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

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

Incredible Demos

  • By
    Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

  • By
    HTML5 Input Types Alternative

    As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...

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!