Advanced Console Logging Methods In JavaScript

Introduction

In the last article, we discussed the basic console methods used in javascript. Now we will learn some Advance console methods used in javascript for debugging. Most of us have used console.log() many times to print messages to the console. But there are many other methods that we can use to debug code easily according to the requirement.

In this article, we are going to learn the below console methods,

• Group
• GroupEnd
• GroupCollapsed
• Trace
• Assert
• Table
• Time

Group & GroupEnd

You can generate a group of messages in the console using these methods. Create a group of messages in the console. It starts with a group method, and all the messages will be written inside this group and exit the current group by groupend().

console.log("Hello world!");
console.group("Introduction");
console.log("Hello again, this time inside a group!");
console.groupEnd();
console.log("and we are back.");

GroupCollapsed

The console.groupCollapsed() method creates a new inline group in the console, but it is not like the group created in the console.group() method. The group initially created by console.group is opened, if you have them collapsed by default you can call the console.group collapsed instead.

console.log("Hello world!");
console.groupCollapsed("Introduction");
console.log("Hello again, this time inside a group!");
console.groupEnd();
console.log("and we are back.");

Trace

The trace() method displays a stack trace showing how the code ended at a certain point.

<button onclick="myFunction()">Start Trace</button>

function myFunction() {
  myTraceFunction();
}

function myTraceFunction() {
  console.trace();
}

When you click the button, you will get the trace of this function in the console output.

Assert

This is again a brilliant tool for debugging. If the assertion fails console will print out the trace means if the expression is evaluated as false. It will display the message in the console, for example, if the sum of the x and y is not equal to 11 it will display the log message.

let x = 5;
let y = 5;
console.assert(x + y == 11, "Expression returned 'false'");

Table

The table method can use to report tabular versions of arrays and objects to the console. The tabular data format works beautifully, allowing you to understand your data better and debug your code quickly.

console.table({firstname:"John", lastname:"Doe"});

console.table(["Audi", "Volvo", "Ford"]);

Time 

Need to check how long some task takes? For example, if you need to measure the performance of a for loop, you can use the console.time() method as shown below.

console.time();
for (let i = 0; i < 100000; i++) {
  // some code
}
console.timeEnd();

Execution duration will print in milliseconds in the console. If you didn’t pass any label, it will print the time with the “default ” label. 

Conclusion

These all are the advanced console methods that can be used in various situations for the debugging purpose in javascript. Do let me know more examples where you use any of the methods for debugging in day to day development cycle. Happy Coding :)