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
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Implement the Google AJAX Search API

    Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API.

  • By
    Form Element AJAX Spinner Attachment Using MooTools

    Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an...

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!