Consoles in JavaScript

#javascript #webdev #beginners #programming

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()

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')

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')

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()

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')

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})

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)
}

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')