Simon Willison’s Weblog

Graphing requests with Tamper Data

I spent the weekend in Boston, speaking at GBC/ACM’s Deep Ajax seminar with Alex Russell and Adrian Holovaty. I’ll be posting some notes on this later, but I wanted to share a really neat Firefox extension that Alex showed me: Tamper Data.

Tamper Data is an extension for intercepting HTTP requests and modifying them. I have very little interest in this functionality myself, but hidden deep within the extension is the ability to do this:

That’s a graph showing what happens when you load up www.yahoo.com. It shows every component of the page—JavaScript, CSS, images—and when each component started and finished loading. You can use it to get an idea for how long it took between the HTML starting to load and the browser beginning to pull in the CSS, then the images, and so on. It’s a superb visualization of what happens when a page is loaded.

Unfortunately, if you install and run the extension (Tools -> Tamper Data) you’ll see this instead:

To get the graph, you have to right click in the main data grid and select “Graph All” from the context menu. Be sure to hit “clear” before loading a page that you want to graph or you’ll end up seeing data from other pages too (you should shut down GMail or similar to prevent their polling requests from polluting the graph).

It’s a great tool but it’s pretty well hidden. If you’re looking for a side project, implementing the same functionality in a smaller extension (maybe as an extra tab in the Page Info screen) would be a significant service to the web development community.