JavaScript: Tracing performance to the console

I wanted to trace the performance of Ajax call in a project I’m working on. The obvious place to store this kind of information is the developer console. If your browser supports debugging, you can writen to the console object and display it in the browser. You should be able to open it in most browsers by pressing F12 or Ctrl-Shift-I.

Elapsed time

You’ve probably already used console.log or console.debug but the console global JavaScript object does provide many more functions. Two of them which are useful in our use case are:

console.time()
console.timeEnd()

They both take a timer name and when time() is called a timer with this name will be started. When timeEnd() is called the specified timer is stopped and the elapsed time since its start in milliseconds is logged to the console at the Info level. Here is how the ouput looks like in Firefox:

Your code would look like this:

console.time("refreshGrid");
// refresh the grid
console.timeEnd("refreshGrid");
console.time("fillGrid");
// fill the grid
console.timeEnd("fillGrid");

You can also have an outer timer logging the total time an operation lasts and some inner timers logging the time for individual steps:

console.time("total");

console.time("refreshGrid");
// refresh the grid
console.timeEnd("refreshGrid");

console.time("fillGrid");
// fill the grid
console.timeEnd("fillGrid");

console.timeEnd("total");

Timestamps

Another function of the console global JavaScript object which you could use is console.timeStamp() e.g.:

console.timeStamp("started");
// fill the grid
console.timeStamp("ended");

This will output the following to the console:

If you are using Firefox, please note that the Firefox Web Console doesn’t support the console.timeStamp(). But Firebug does. So if you want to use it, you’ll need to install Firebug which is an awesome plugin anyway.

Check for existence

Another thing you have to keep in mind is that although these console functions are pretty well supported by most popular browsers they do not seem to be part of any specification and you might find some browsers (e.g. mobile browser) which do not support them. Calling these functions in such a browser will cause you JavaScript code to fail. So you should either make sure that you only use this in your development environment but do not push it to you production site or at least check whether the console object and its functions exist:

if (console && console.time) { console.time("test"); }
if (console && console.timeEnd) { console.timeEnd("test"); }
if (console && console.timeStamp) { console.timeStamp("test"); }

Internet Explorer 8 doesn’t support the console global JavaScript object. Internet Explorer 11 does. It also looks like Internet Explorer 10 also supports this but I couldn’t check it.

Network calls

If all you’re after is to check how long your Ajax calls to the server last, you can just use the network call analyzer available in the developer tools of your favorite browser.

In Chrome it looks like this:

Network tab Chrome