DevTools tips — day 9: timing 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 played with the versatile color picker tool and today we’ll have 2 short tips about working with time:
26. Timestamp your logs
If you want to take a note of the exact time an event happened in your application, turn on timestamps. You can do it from the Settings screen (find it in the DevTools’ ⋮ dropdown or press F1) or using Commands Menu.
27. Measure execution times
Instead of displaying a timestamp on everything, you may be more interested in a time span between specific points in your script.
For such a case we can employ a pair of useful console methods:
console.time()— starts a timerconsole.timeEnd()— ends counting time and logs the result in the console
If you want measure multiple things at once, provide different labels into these methods (e.g. console.time('loading'), console.timeEnd('loading'))
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 10th day is already published, read it here:
