Jiffy Firebug Extension for Firefox - 1.0.20080619 - 06/19/2008

The Jiffy Firefox Extension is written Bill Scott of Netflix. It adds an additional panel to Firebug that provides a visual view of the Javascript time measurements captured by Jiffy-Web. The extension is available under Creative Commons license.

Jiffy-Web is a fine-grained and flexible website performance tracking and analysis suite written by Scott Ruthfield and the team at Whitepages.com. The library provides a simple way to insert and capture time measurements in your Javascript code and save them to a backend service for later analysis.

Jiffy Extension with mock data

On This Page:

Quick Links:


Each time you take a measurement with Jiffy, the measurements are recorded in the DOM under a single JSON object. This firefox extension simply grabs the values when its panel is opened in firebug, a page with metrics is loaded or the Refresh button is hit.

The extension provides the following features:


The Extension has been tested on the following Firefox versions:

The Extension works with the following Firefox/Firebug combinations (it may work on other versions, but these are officially supported):


The extension has four command buttons: Clear, Refresh, Duration and Print.


Pressing the clear button will clear the stats from the page and render a blank panel. This is a destructive operation as it calls the clearMeasures method (see Configuration section below).


Forces the graph to render the current measures available on the page. This is useful if some measures are captured on user events. After triggering these measured events, press the Refresh button to see a new graph including the new measures. This calls the getMeasures method (see Configuration section below).


This toggles rendering the measures as a list of elapsed times vs. rendering the measures as elapsed and duration times along a timeline.

Snapshot of duration turned off

When the Duration button is off, marks are rendered in a vertical list fashion. Each event measurement is plotted relative to the mark.

In duration mode the both elapsed and duration times are represented for each mark.

Snapshot of duration turned on

When the Duration button is on, marks and events are rendered along a timeline. Each mark displays both elapsed and duration times. Each mark bar graph renders the elapsed time plus the "dead" time giving a total picture of duration.


Displays the current stats as a list of elapsed time measurements in a separate window formatted for printing.


This is a firebug extension. You will need Firebug installed. The steps to getting setup are:

Snapshot of Jiffy Extension

If installed correctly, the test page should look something like this.

Working with Other Measurement Libraries

By default, the Jiffy extension gets measurements from the web page by calling window.Jiffy.getMeasures() and clears measurements by calling window.Jiffy.clearMeasures(). It also tests whether a page has metrics by looking for the presence of the window.Jiffy object.

These three points of interaction with Jiffy are defined in Firefox configuration properties. The three properties and the default values are:

PropertyDefault ValueDescription
extensions.jiffy.clearMeasuresJiffy.clearMeasures()A valid Javascript code fragment that when appended to 'window.' will clear the measurements for the page.
extensions.jiffy.getMeasuresJiffy.getMeasures()A valid Javascript code fragment that when appended to 'window.' will return the measurements for the page. The details of the Java array returned is discussed below.
extensions.jiffy.scopeObjectJiffyA valid Javascript variable that when appended to 'window.' will denote (by it being defined and non-null) that measurements exist on the page.

Array returned by getMeasures()

The getMeasures() call should return an array of Java objects, each containing the following fields

etElapsed time for this measurement.
evtThe event measured (in Jiffy this is recorded with the Jiffy.measure() method).
nameThe name of the category that holds a set of events. In Jiffy this is called a 'mark'. A mark is created by calling Jiffy.mark(markName). Each call to Jiffy.measure(evt, mark) associates an event with a mark.

Here is an example of the array returned by Jiffy.getMeasures().

        var measures = [
            {et:2676, evt:"load",             name:"PageStart", rt:1213159816044},
            {et:7,    evt:"carouselcreated", name:"onLoad",    rt:1213159818722},
            {et:67,   evt:"finishedonLoad",  name:"onLoad",    rt:1213159818729}

If you set the three extensions.jiffy.* configuration parameters (use about:config to access them), return an array as described above, clear the measures and supply the name of the object holding your values or methods, then the Jiffy extension can work with your Javascript measurements. Jiffy Extension will render it like this:

Jiffy Extension with mock data

What the Jiffy extension will graph with the mock data above.


Frequently asked questions will be added here.

Creative Commons License
Jiffy Firebug Extension by Bill W Scott is licensed under a Creative Commons Attribution 3.0 United States License.