DevTools tips — day 17: back to the console
part of the “Advent calendar for front-end developers” series
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.
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:
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:
