console.time('myMethod()');
console.timeEnd('myMethod()');


These two simple lines will help you get to the bottom of your web performance bottlenecks in your timeline.

Start tracking:

console.time('myMethod()');

console.time() is the start method for tracking your performance. This will kick off a timeline marker once the browser has hit this piece of code. I prefer to use the name of the method as the console statement name. This allows me to see which method is being called and where it is, in comparison to my performance bottleneck.

End tracking:

console.timeEnd('myMethod()');

console.timeEnd() is the end method for tracking your performance. I again prefer to use the method name so that I can see how long it takes between the time I called console.time(‘myMethod()’); and when I finally get to console.timeEnd(‘myMethod()’);

If console.time() and console.timeEnd() have the same message name, then you will get an output to see how long it took, in milliseconds since the timer was initiated.

Here is a short video I made to show how the console.time() works:

Check out a working demo

console.time() demo

And find the code on my github repository:
console.log() experiment