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

  • By
    Instagram For MooTools

    If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram.  With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...

  • By
    CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

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!