DevTools tips — day 3: console methods

An advent calendar for front-end developers

Tomek Sułkowski
Dec 3, 2018 · 3 min read

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.table works 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:

Tomek Sułkowski

Written by

Frontend trainer, Angular enthusiast, family man, https://twitter.com/sulco

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade