Logging messages to Chrome devTools Console
Knowing to log data to your DevTools console is one of the essential debugging skills when it comes to javaScript. I realised that there are many convenient and efficient ways of doing this and would like to share 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 variable is useful and helps identify the value being printed. Moreover, this could be customised to a great extent.
- 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 with every action), to resolve this we can custom style our messages.
3. We can further improve our debugging experience by using 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 very common practice to write a reusable function and use it at 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.
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.
- I use 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 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.
Preseving console logs:
We know that once a page refreshes the logs are cleared. Here is a way to preserve the log on page reload/ redirection:
Click the settings icon from DevTools and check the ‘Preserve log’ checkbox.
That’s all Folks !!!
