Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Measure and count executions

Take advantage of the Console API to measure execution times and count statement executions.

TL;DR

  • Use console.time() and console.timeEnd() to track time elapsed between code execution points.
  • Use console.count() to count how many times the same string is passed to a function.

Measure execution times

The time() method starts a new timer and is very useful to measure how long something took. Pass a string to the method to give the marker a name.

When you want to stop the timer, call timeEnd() and pass it the same string passed to the initializer.

The console then logs the label and time elapsed when the timeEnd() method fires.

Basic example

Here, we measure the initialization of a million new Arrays:

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

Which outputs the following in the Console: Time elapsed

Timers on the Timeline

When a Timeline recording is taking place during a time() operation, it annotates the timeline as well. Use it when you want to trace what your application does and where it comes from.

How an annotation on the timeline looks from time():

Time annotation on timeline

Marking the Timeline

Note: The timeStamp() method only functions while a Timeline recording is in progress.

The Timeline panel provides a complete overview of where the engine spends time. You can add a mark to the timeline from the console with the timeStamp(). This is a simple way to correlate events in your application with other events.

The timeStamp() annotates the Timeline in the following places:

  • A yellow vertical line in the Timeline's summary and details view.
  • It adds a record to the list of events.

The following example code:

function AddResult(name, result) {
    console.timeStamp("Adding result");
    var text = name + ': ' + result;
    var results = document.getElementById("results");
    results.innerHTML += (text + "<br>");
}

Results in the following Timeline timestamps:

Timestamps in the timeline

Counting statement executions

Use the count() method to log a provided string along with the number of times the same string has been provided. When the exact statement is given to count() on the same line, the number is incremented.

Example code of using count() with some dynamic content:

function login(user) {
    console.count("Login called for user " + user);
}

users = [ // by last name since we have too many Pauls.
    'Irish',
    'Bakaus',
    'Kinlan'
];

users.forEach(function(element, index, array) {
    login(element);
});

login(users[0]);

Output of the code sample:

console.count() example output