Chrome Console tips
Tags: console, tips, javascript, tricks
Published: 2020-04-09 22:03:03

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.

![Semantic Log messages](https://res.cloudinary.com/jabilegbe/image/upload/v1586464586/articles/warn_and_error_semantics_and_stack_trace.gif)

![Filter by Regexp](https://res.cloudinary.com/jabilegbe/image/upload/v1586467119/articles/filter_by_regex.gif)

![Filtering by log level](https://res.cloudinary.com/jabilegbe/image/upload/v1586467122/articles/filter_by_log_level.gif)

## 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.

![JSON printing](https://res.cloudinary.com/jabilegbe/image/upload/v1586467125/articles/dir_and_log.gif)

## 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. 

![table](https://res.cloudinary.com/jabilegbe/image/upload/v1586467116/articles/table.gif)

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.

![Styling](https://res.cloudinary.com/jabilegbe/image/upload/v1586469040/articles/cloudinary.png)

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.

![Copy workflow](https://res.cloudinary.com/jabilegbe/image/upload/v1586467038/articles/copy_workflow.gif)

You can clear the console using `console.clear()` but you can also do this using <kbd> Ctrl L </kbd>

## 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](https://developers.google.com/web/tools/chrome-devtools/console)
 - [Wes Bos' youtube](https://www.youtube.com/watch?v=xkzDaKwinA8)
 - [Samantha Ming's article](https://www.samanthaming.com/tidbits/40-colorful-console-message)
 - [Chris Nwamba's article](https://www.telerik.com/blogs/how-to-style-console-log-contents-in-chrome-devtools)

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.