Google DevTools’ Console Tips for Better Debugging

Knowing to log data to your DevTools console is one of the essential debugging skills when it comes to javaScript. I realized that there are many convenient and efficient ways of doing this and would like to share it with the community.

Printing messages

We might be familiar with the most basic console.log() and console.info() that prints the value of the variable/message to the console.

Adding a message along with a variable is useful and helps identify the value being printed. Moreover, this could be customized to a great extent.

 

1. Enclosing the variable in {} avoids the necessity to add a text as the variable name is printed beside the value by default.

 2. When there is a lot of information being printed on the console it is difficult to make the required message stand out(you know the pain if you are using redux-saga with redux-logger that logs information with every action), to resolve this we can custom style our messages.

3. We can further improve our debugging experience by using the console.warn() that prints messages in yellow background and console.error() that prints messages in red background.

4. We can filter the logs based on the type of console we use from the Default levels dropdown.

Trace

It is a very common practice to write a reusable function and use it in multiple places. I have ended up not knowing which one is calling which and spent hours debugging. Well, we now have console.trace() to save us. This has been a life-saver!

 

Assert

Evaluating conditional operators is yet another debugging that needs to be done often. We can avoid writing ternary or if-else statements with console.assert()

 

Performance

We have a couple of options to measure performance.

 

 

1. I use the console.count() to check the number of times a method is called. In react, I use it to check the number of times my component re-renders on state changes.

2. Use console.time() to calculate the time taken for your program to execute and for page load. I prefer using the Performance tab of DevTools for measuring the page’s performance.

Groups & Table

 

I, personally, don’t use these often, but you can check Console API Reference for details. In fact, all the above were referred from the official docs.

 

That’s all Folks !!!

 

Do let us know in the comments the lesser-known ways of console logging that you use.

Tags: