DevTools tips — day 3: console methods
An advent calendar for front-end developers
Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve reached a count of 8 tip, so today we start with the number 9:
console.assert prints following values if the first argument (assertion) is falsy. It’s useful if you only need to log a message in a specific condition — now you can do it without a dedicated
if statement. Plus, you’re getting a stack trace gratis ;-)
Beware that if you use it in NodeJS version ≤ 10.0, it interrupts execution of subsequent code. It’s fixed now in ver. 10 (and of course perfectly safe in browsers too).
This one is surprisingly still not well known amongst developers. If you have an array (or array-like object, or… just an object), you can print it in the form of a nice table in the console using
console.table method. Not only it will figure out the table column names based on all the properties that are in the objects that your array holds, but also the columns are resizable and even… sortable!😳
If there are too many columns, use the second argument, which is an array of column names to display.
Oh, and if you’re dabbling in backend from time to time,
console.tableworks with node since version 10 too!
The most popular
console.log method prints the data in a format that makes sense for most devs in most cases. But sometimes it can be not what you want to see — the typical example is printing out a DOM node.
In that case, if you need more literal representation of your data, use
And that’s it for today! (“Just 3”? Oh come on, it’s Monday, let’s keep some energy for the rest of the week 😉)
As usual: if you’ve learned something new, please:
→ clap 👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:
Tomek Sułkowski (@sulco) | Twitter
Also, the 4th day is already published, read it here: