email@encode8.com
JavaScript

5 Lesser-known but Useful Console Methods in Developer Tools

While developing websites, most of the web-developers rely heavily on developer tools which comes built-in with most modern browsers. Developer-tools, or DevTools, can be used to test features on the fly — by live editing css and javascript. DevTools is widely used to debug websites — by using console object. By using the console object, useful debug messages can be shown inside the console tab of DevTools. While console.log() is the single most widely used function, there are several other methods of the console object that are left untapped. Here are some of the lesser used methods that can be very helpful for specific purpose.

1. console.time()

This method is very useful to calculate duration of specific operation. The method creates a timer when called with a single parameter, and the timer can be stopped by calling console.timeEnd() with the same parameter. This will output the time in milliseconds taken by the codes between the methods, to complete their operation.

Example:

console.time("myTimer");
...
// codes for which duration is to be calculated
...
console.timeEnd("myTimer");

The above will output something like:

myTimer: timer started
myTimer: 459ms

2. console.count()

This method counts the number of times count has been called. This method takes an optional label parameter which lets distinguish between count calls. While debugging, this method can be used instead of assigning counters inside functions..

Example:

var name = "alan";
function hello(){
   console.count(name);
}

hello();
name = "tom";
hello();
hello();

// Output:
alan: 1 
tom: 1 
tom: 2

3. console.table()

table() method is especially useful for debug messages with objects or array. It takes object (or array) as the first parameter; it also offers an optional second parameter (as array) to specify the columns to show.

Example:

var myObj = [{name: "alan", age: 30}, {name: "tom", age: 29}];
console.table(myObj);

This will output:

Using the column parameter:

var myObj = [{name: "alan", age: 30}, {name: "tom", age: 29}];
console.table(myObj, ["name"]);

Output:

It is worthwhile to note here that console.table() outputs can get very ugly if it is called with nested objects that have different keys.

4. console.trace()

console.trace() is an improved version of console.error(). While console.error() prints output as a colored error message, console.trace() gives you a stack trace. With console.trace() you can view stack of calls made to reach the line where console.trace() is called.

Example

function fun1(){
    fun2();
}
function fun2(){
    fun3();
}
function fun3(){
    console.trace();
}

fun1();

// Output:

  fun3 debugger eval code:8:1
  fun2 debugger eval code:5:1 
  fun1 debugger eval code:2:1 
   debugger eval code:10:1

5. console.group() and console.groupEnd()

These two methods are incredibly useful when loads of data is output to console. To create a group, just call console.group() and to close the group, console.groupEnd(). console.group() takes an optional ‘label’ parameter to identify between groups.

Example

console.group("output from loop 1");
for(i=0;i

This outputs:

Conclusion

Web-developers have been using console commands for ages — back when Firebug was a thing. These days, almost all major browsers come packed with Developer Tools. While developer tools have improved both in features and performance, we — the developers — are still using console.log(), leaving the power of other useful methods mostly untapped. I hope this post has been helpful for your next coding session.