Chrome Console tips

Chrome's DevTools is a powerful tool to have in one's arsenal as a frontend developer among it's vast array of tools is the humble console, you may know her from her greatest hit - console.log.
In this post, I will share some tips I have learnt and some I have seen in the wild.

Semantic messages

It's pretty easy to use console.log all the times but if we are intentional about the contexts of our log messages we can enhance the user experience from our use of the console by employing it's more semantic variants console.warn and console.error
these

• Offer a better presentation with contextual background colors for the messages
• Include a stack trace
• Allows you to filter by log level

Create React App employs this in it's warning messages especially linter warnings, you can filter these out when working on your feature and filter to only this when cleaning up for a commit.

The $ stack

In chrome Devtools

$_ returns the value of the most recently evaluated expression" $0, $1, $2, $3 and $4 commands work as a historical reference to the last five DOM elements inspected within the Elements panel or the last five JavaScript heap objects selected in the Profiles panel.

React DevTools take this approach as well with $r.

Pretty prints

While I tend to use console.log most times, I often prefer the presentation of console.dir when dealing with objects, this method provides a JSON representation of the message. and when used with DOM elements gives a good view of the element's DOM.

Tables and groups

This is related to the above. When dealing with arrays of data or closely related log messages you can use console.table or console.{group, groupCollapses} to get a nice display of the data.

I caught a glimpse of Kent C. Dodds using the collapsed group to log requests and their associated responses from his hacked fetch api in bookshelf app

Styling

This can be a bunch of fun or even serve a practical purpose, by taking advantage of console formatting you can style messages using CSS.

Vue Js uses this to show the version when an app first loads. The guys at Cloudinary also have a message for you.

Utils -copy, clear

I often need to use a static version of an API response to flesh out a user interface and I won't waste time writing that out by hand, avoiding spelling or case errors in my keys. with DevTool I usually copy the response and copy to clipboard using the console after editing maybe.

You can clear the console using console.clear() but you can also do this using Ctrl L

Resources

There's so much more you can do with the DevTools and the console in particular, you may find these links helpful

• Chrome DevTools documentation
• Wes Bos' youtube
• Samantha Ming's article
• Chris Nwamba's article

While it's common practice to avoid unnecessary console messages, it remains true that they can improve developer experience especially when you are building a library to be used by other developers.

Please share your own tips with me in the comments.