DevTools tips — day 17: back to the console

part of the “Advent calendar for front-end developers” series

Tomek Sułkowski
Dec 17, 2018 · 2 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 covered DOM and Ajax breakpoints. Today let’s start the week by going back into console!

48. For more readable logs— add brackets!

If you console.log even a single variable you might forget (or get confused about) which one was that. Things get event less readable if you have multiple variables to log.

“Em… which value was what variable again?”

To make that much more readable, log an object instead — just wrap all your console.log parameters in curly brackets. Thanks to the enhanced object literal introduced in ECMAScript 2015, that’s all you really need:

Credit for this tip: I first saw this idea in the amazing Wes Bos’ materials

Can’t get much clearer than this! Or can it…?

49. Brackets + table = 🤯

Remember that console.table tip from the Day 3 of our series?
Let’s add that too!

The ultimate log.

And that’s it for today! 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 18th day is already published, read it here:

Tomek Sułkowski

Written by

Frontend trainer, Angular enthusiast, family man,