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:
9. console.assert
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).
10. console.table
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!
11. console.dir
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. console.log will render this interactive element that looks like it was just cut right out from the Elements pane. What if you wanted to inspect the actual JavaScript object that it references? See its properties etc?
In that case, if you need more literal representation of your data, use console.dir instead.
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:
Also, the 4th day is already published, read it here:
