console.timeLog

By  on  

I work on a really complex debugger at Mozilla but, and don't tell my colleagues, I sometimes enjoy simply using console.log and other console commands to get some simple output.  I know, I know, but hey -- whatever gets the job done.  A few years ago I detailed console.time and console.timeEnd for measuring time for a given set of tasks; let me show you console.timeLog, a new function in Firefox Nightly for logging events during a console.time timer!

Start by kicking off the timer with a name of your choice:

console.time("MyApp");

Whenever you want the intermediate timer value, as well as extra information like variable or object values, you can use console.timeLog:

// Same timer name, provide sublabel and optional info
console.timeLog("MyApp", "constructor"); 
// MyApp: 4ms constructor

console.timeLog("MyApp", "render", this.state);
// MyApp: 2ms render Object { disabled: false }

When your timed tasks have completed, you can call console.timeEnd to stop the timer:

console.timeEnd("MyApp");
// MyApp: 10ms

Firefox has a Performance tab for very detailed performance metrics but, as always, the console is a great way to get some basic insight at a glance.  The timeLog function is an awesome way to get intermediate timing and information while your script runs!

Recent Features

Incredible Demos

Discussion

  1. MaxArt

    don’t tell my colleagues, I sometimes enjoy simply using console.log

    Don’t worry, your colleagues do the same too

    • MaxArt

      Hey, does your comment system not handle emojis? :(

  2. This was new to me, thanks! One other useful console command is console.table. Prints objects nicely to the console.

  3. Brad Kent

    So, does each call to console.timeLog reset the timer?
    If so, I wouldn’t call that an “intermediate” value

  4. Brad Kent

    And to answer my own question.. it appears no, timeLog() does not reset the timer.
    My confusion was due to the poor documentation on MDN’s site and your example where first call outputs 4ms, and the 2nd call outputs 2ms (2nd call’s output time should be greater than the first)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!