The developer tools (thanks Firebug for leading this charge years ago) have gotten incredibly sophisticated. There are all sorts of ways to tell where time is being spent as well as the details inside of each element. But there are times when you want to be in control of what is being timed.
How to use:
// VERY SIMPLE TO SET UP A TIMER
MMStopWatch.start("Simple Example Timer");
// CALLING describe ON A TIMER SHOWS ITS CURRENT TIME
MMStopWatch.describe("Simple Example Timer")
// VERY SIMPLE TO STOP THOSE TIMERS, TOO
MMStopWatch.stop("Simple Example Timer");
The “name” of the stopwatch is it’s key. So you can create as many as you like with the same interface. Calling “describe” with the name will print out the current elapsed time (if still running) or total time (if stopped). It simply cannot be easier.
There is one library to pull and include: MMStopWatch.js
Then your output will spit out:
Stopwatch: [Simple Example Timer] runtime: [42.6]
As always: use this in any way you like without any need for attribution in any way.
I also put together a quick JSFiddle with this. Maybe that will help you understand usage and how quick you will be timing your code:
Edit (10/10/2012): I updated the way I’m displaying MS now.