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
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • 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...

  • By
    MooTools ASCII Art

    I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create.  ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous;  ASCII...

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!