fbpx

Beyond the console.log()

While working on frontend most of the time we use console.log(). In sort for frontend developers, it is a tool for debugging. But most of the developer doesn’t know the real power of the console. It consists of lots of features a few of them I will discuss here.

#1: Organized logging:

var chair = { type1:"Wooden", type2: "Iron", type3: "Plastic"}
var table = { type1:"Wooden", type2: "Iron", type3: "Plastic"}

Normal Way logging:

console.log(chair, table)
loggin
console.log(chair, table)

Organized way logging, In this way we can easily identify the log variable.

console.log({chair, table})

bettter_console_log
console.log({chair, table})

#2: Measure performance of code with the console.time():

Many times we want to measure the time taken by any piece of code to check the performance of code. There may be many ways to do but the easiest way is using the console methods.

Here is a trivial way to do.

const start = Date.now();
// do some stuff
console.log('Took ' + (Date.now() - start) + ' millis');

An elegant way to achieve something similar

console.time('Label 1');
// do some stuff
console.timeEnd('Label 1');
consoletime-power-of-time

#3: Table – console.table()

Sometimes it’s a mess to see the structure of the objects printed by console.log(). console provides a nice way of outputting objects to the console via the console.table() method. It takes two arguments— data and columns, which is optional.

var x = [{name:'anil',age:23},{name:"akash",age:28},
{name:'anita',age:22},{name:"akashi",age:21}]

case 1: using normal console.log().
console.log(x)

non-table-log-power-of-console
Logging array object with console.log()

case 2: Using console.table() method.
console.table(x)

tablelog-power-of-table
Logging of array object using console.table()

Even you can sort the data by clicking column name in the table

sorting the data

#4: Using groups in the console

Many times we want to group our logs for better debugging. Grouping the related logs make our life easy.
For this purpose, you can use nested groups to help organize your output by visually associating related messages. To create a new nested block, call console.group(). To exit the current group, call console.groupEnd(). For example, given this code:

Console-group-power-of-console
Grouping the logs using console.group()

#5: Console.log, Console.error, Console.warn and Console.info

These are probably the most used methods of all. You can pass more than one parameter to these methods. Each parameter is evaluated and concatenated in a string delimited by the space, but in case of objects or arrays, you can navigate between their properties.

console-power-of-console
console log, info, warn

#6 console.trace() and console.assert():

The console.trace() the method displays a trace that shows how the code ended up at a certain point.

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

In the console, the following trace will be displayed:

console.trace
bar @ VM2461:3
foo @ VM2461:5
(anonymous) @ VM2461:7
console.trace()

The console.assert() the method writes a message to the console, but only if an expression evaluates to false.
Calling console.assert() with a falsy assertion print message to the console without interrupting execution of subsequent code. 

console-assert-power-of-assert
console.assert()

We will describe console.trace() and console.assert() in details in another blog. Along with these two we will tell few other intesting console tricks

will discuss in new blog

Read More: Map Vs forEach in javascript

References:
https://console.spec.whatwg.org/
https://developer.mozilla.org/en-US/docs/Web/API/Console