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
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.
Top comments (0)