DevTools tips — day 9: timing the console

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

Tomek Sułkowski
Dec 9, 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 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 timer
  • console.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'))


Tomek Sułkowski

Written by

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