NOTE: This blog has been moved to http://www.looksgoodworkswell.com

Friday, June 20, 2008

Announcing: Jiffy Firebug Extension for Viewing Client Side Performance Data

In the previous article I discussed our full cycle tracing mechanism we built at Netflix.

Firebug Extension: First Attempt
When I was trying to explain the capabilities of this system to others in the organization, I started doodling in Apple Keynote to see if I could create a single diagram that captured all of the timings and what was really happening during a full cycle trace. This is where the diagram I used in the previous article came from. Here is the diagram:

roundtrip-blog-capture-alltimes.png (by billwscott)

This got me thinking. What if I could create a tool that would take the timings from the web page and render it with real time data. The obvious solution was to build this as a Firebug extension. Here is what the tool ended up looking like once it was plugged into Firebug:

roundtrip-firebug.png (by billwscott)

The nice thing about this visualization is that it clearly puts the timings in context. You can see the Response overlapping with the Page rendering (which is a good thing). You get a clear picture of how the measurements fit together.

Currently, this is not available outside of Netflix. There is some code cleanup, upgrade to FF3/Firebug 1.2 needed as well as it is tied to the type of metrics I described previously. If others think it is useful I will try to burn some cycles, make the data source more generic and get it out for public use.

Jiffy Firebug Extension

However, I was showing this to Steve Souders (in relation to the Velocity panel) and he mentioned that one of the other panel members, Scott Ruthfield of Whitepages.com and his team were building an open source metrics and instrumentation tool for Web pages called Jiffy.

In the words of Scott:
Thus we built Jiffy—an end-to-end system for instrumenting your web pages, capturing client-side timings for any event that you determine, and storing and reporting on those timings. You run Jiffy yourself, so you aren’t dependent on the performance characteristics, inflexibility, or costs of third-party hosted services.
Steve suggested adapting what I had done with the current Neflix Firebug extension for use with Jiffy.

I quickly realized that since the focus of Jiffy was for measuring on the client page (as well as a way to log measurements) that I needed a more generic way to view the data. I decided to model this new measurement panel slightly after the Firebug Net panel.

The result is the Jiffy Firebug Extension.

Jiffy Firebug Extension

Today I am making this extension available to the public under a simple Creative Commons License. Simply put, this adds a new panel to firebug that provides a nice way to view timing measures either in a collapsed or timeline view. It's also flexible. You can wire it to other libraries besides Jiffy if so desired.

You can learn all about the extension and read more about the Jiffy library at my Jiffy Extension site or go directly to the Jiffy-Web google group.

Blogged with the Flock Browser

4 comments:

Anonymous said...

Thanks for posting your article, Bill - it's been a pleasure working with you, and I look forward to sharing a panel with you at Velocity!

For those hearing about Jiffy for the first time, feel free to check it out at http://code.google.com/p/jiffy-web or http://code.whitepages.com/.

Note that we aren't "releasing" until Velocity begins on 6/23 - in particular, there's plenty of code and documentation still missing - but since Google Code doesn't have a "private" workspace, you can see our work in progress.

I'll be posting more about this on Monday.

Anonymous said...

This is excellent stuff. Thank you for releasing the Firebug extension.

One thing though - Creative Commons do not recommend the use of CC licences for software. Is there a specific reason you chose a CC license for this?

http://wiki.creativecommons.org/FAQ#Can_I_use_a_Creative_Commons_license_for_software.3F

Bill Scott said...

Thanks for catching that.

I think that is a recent development as I had discussed this with CC folks before and it was not an issue.

I will switch it to BSD in the next few days.

Goal is to make it nonrestrictive.

Anonymous said...

Mind you, Creative Commons don't say *why* you should not use CCs for software. The whole open license issue is total janellopy. REM choose the Perl 2.0 licence to release some videos recently, for instance.