DEV Community

Cover image for Consoles in JavaScript
Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on

Consoles in JavaScript

Hello fellow knowledge hungry developers.
console.log() is one of the best friend in a web developers' life, it simply make our lives way easier. But did you know there's more to console than just console.log()? In this post, we are going to discuss about Consoles in JavaScript.

Introduction

A web console is a tool which is mainly used to log information associated with a web page like: network requests, JavaScript security errors, warning, CSS etc. It enables us to interact with a web page by executing a JavaScript expression in the contents of the page.

Types of Console

  • console.log()
  • console.error()
  • console.warn()
  • console.clear()
  • console.time()
  • console.table()
  • console.count()
  • console.group()

1. console.log()

Mainly used to log/print the output to the console. We can put any type inside the log(), be it strong, array, object, boolean etc.

//console.log() method
console.log('string')
console.log(800)
console.log(true)
console.log(null)
console.log(undefined)
console.log({a:1, b:2}) // object inside log()
console.log([1,2,3,4]) // array inside log()
Enter fullscreen mode Exit fullscreen mode

console.log

2. console.error()

This method is used to log error messages to the console. IUseful in testing of code. By default, the error message will be highlighted in red color.

// console.error() method
console.error('This is a sample Error')
Enter fullscreen mode Exit fullscreen mode

error

3. console.warn()

Used to log warning messages to the console. By default, the warning message will be highlighted with yellow color.

// console.warn() method
console.warn('This is a sample Warning')
Enter fullscreen mode Exit fullscreen mode

warn

4. console.clear()

Used to clear the console. This console will be cleared, incase Chromium based browsers, a simple overlayed text will be printed like one shown in the screenshot below stating 'Console was cleared', while in Firefox, no message is returned.

// console.clear() method
console.clear()
Enter fullscreen mode Exit fullscreen mode

clear

5. console.time() and console.timeEnd()

Whenever we want to know the amount of time spent by a block of code, or a function, we can make use ot the time() & timeEnd() methods provided by the JavaScript console object. They take a label which mst be same, and the code inside can be anything(a function, object, simple console.log())

// console.time() and console.timeEnd() method
// console.time() method
console.time("Let's see time console")
let time1 = function(){
    console.log('time1 function is running')
}
let time2 = function(){
    console.log('time2 function is running')
}
time1()
time2()
// console.timeEnd() method
console.timeEnd('Time Taken')
Enter fullscreen mode Exit fullscreen mode

time & timeEnd

6. console.table()

This method allows us to generate a table inside a console. The input must be an array or an object which will be shown as a table.

// console.table() method
console.table({a:1, b:2, c:3, d:4, e:5})
Enter fullscreen mode Exit fullscreen mode

table

7. console.count()

This method allows us to generate a table inside a console. The input MUST be an array or object which will be shows as a table.

// console.count() method
console.log('This is a sample count')
for(let i=0; i<10; i++){
    console.count('This is iteration number', i)
}
Enter fullscreen mode Exit fullscreen mode

count

8. console.group() and console.groupEnd()

group() and groupEnd() methods of the console object allows us to group contents in a separate block of code, which will be indented. Just like the time() & timeEnd(), they also accept label, again of the same value.

// console.group() and console.groupEnd() method
// console.group() method
console.group('This is a sample group')
console.log('This is a sample group log')
console.warn('This is a sample group warning')
console.error('This is a sample group error')
// console.groupEnd() method
console.groupEnd('This is a sample group')
console.log('This is a new section')
Enter fullscreen mode Exit fullscreen mode

group & gorupEnd

That's all folks πŸ’—

Latest comments (1)

Collapse
 
wushang1987 profile image
Will Wang

Good job