Console Tab in Chrome Developer Tools

Console Tab

 Today I am going to talk about some features of the Console tab which are again very helpful for debugging web applications.

Log

Gone are the days, when people used to put alert() statements everywhere throughout the code in order to check variable values or control flow in the JavaScript code. Now we can use console.log() statements in order to see what's going on in the client side code. We can output all the values and the results are visible in the Console tab.

Warn

If we want to output the message as a warning, we can use console.warn() statement. These messages appear with a yellow warning sign. These are useful if you want to put some messages for less likely scenarios. We can even filter all the warnings together.

Info

Messages output using console.info() statement come with a blue info sign. These can also be filtered.

Error

Using console.error() statement we can output the error in the console tab. It appears with a red color. We can also navigate to where the error occurred directly as the source is displayed right next to the error. 

Assert

console.assert can be used for testing. For example,

console.assert(10 == 5*4,"Items Not Equal");

So it will break at this point and take us to the script where the test failed.

Group

Using a lot of console.log statements can become unwieldy. So in order to manage log statements better, we can group them together.

        console.group("Group Example");

        console.log("Message 1");

        console.log("Message 2");

        console.groupEnd(); 

So here the 2 log messages will come under a single group. Similarly, we can also use console.groupCollapsed() if we want the group to appear as collapsed.

Time

In order to find the time taken by a snippet of code, we used to get the current time before and after and subtract the two timestamps. Using console.time() makes it more convenient and quicker to find out the time.

        console.time("Loop Time");

        for (var i = 0; i < 100000; i++) {}

        console.timeEnd("Loop Time"); 

console.time() denotes the starting point and console.timeEnd() denotes the end point.

dir

console.dir() prints the JSON representation of the supplied object. For example,

console.dir(document);

will print the whole document's JSON representation.

dirxml

console.dirxml() prints the XML representation of the supplied object.

console.dirxml(document);

will print the whole document's XML representation.

Count

Using console.count we can keep the count without maintaining a counter explicitly. Another very handy feature for debugging.

Profile

Using console.profile() we can start and using console.profileEnd() end profile. Profile is pretty useful to find out what all code got executed and how much time each part took. Its similar to SQL Server profiler.

Trace 

In order to see the stack trace I can put this statement anywhere in my JavaScript code. This will show me the stack trace of who called this statement.

Execute JavaScript

Other than these useful commands, we can also execute any JavaScript code in the console tab directly. I can inspect or change the values of any variables or elements.

Conclusion

In this post, we discussed about different console tab commands and how they can be helpful in debugging and development. Once you start using it, you will realize how useful it is in everyday development and debugging.
For future updates to my weekly blog, please subscribe to the blog.