Waterfall generators for other browsers

The Waterfall chart generated by Firebug as introduced earlier in this chapter obviously only works with Firefox, because Firebug is a Firefox add-on. This is not convenient if Firefox is not your favorite browser, or if you want to see how other browsers load content. Here are a few free alternatives for other browsers.

Fiddler (browser-independent)

Fiddler is a proxy which logs all HTTP and HTTPS traffic between your browser and the Internet. It also allows you to change the incoming and outgoing data. Because it doesn't integrate with the browser itself as Firebug does, Fiddler works with any browser, including Internet Explorer.

Download at Fiddler from http://www.fiddler2.com/fiddler2/.

To generate a Waterfall chart with Fiddler, follow these steps:

1. 1. Start Fiddler.

2. 2. Make sure that the Streaming button is depressed. This ensures that Fiddler doesn't use buffering, which would distort the Waterfall chart.

1. 3. Start your favorite browser and load a page. It is the easiest if you have only one page open at a time, because Fiddler will record all traffic to all browser windows.

2. 4. You will see all the files loaded as part of the page in Fiddler, in the left-hand Web Sessions window.

3. 5. Press F12 to stop capturing any more traffic.

4. 6. From the Edit menu, choose Select All. This way, all files will be shown in the Waterfall chart.

5. 7. Click on the Timeline tab on the right-hand side. This will show the Waterfall chart. To see how to interpret the chart, visit http://www.fiddler2.com/fiddler/help/timeline.asp.

   If the bars on the timeline look hatched rather than solid, it means that Fiddler has used buffering, which distorted the chart. Click on the Streaming button to switch off buffering and start again.

1. 8. If you want to analyze another page, clear out the Web Sessions window first by clicking on the Remove button. Press F12 again to start capturing traffic again and visit another page in your browser.

Internet Explorer via WebPagetest

This free, web-based service uses Internet Explorer to produce Waterfall charts. Simply visit their site at http://www.webpagetest.org/test and enter the URL of a page you're interested in. You can run tests from the United States, the UK, and New Zealand.

Because this is a web-based service, there is no software to install. On the other hand, it won't work for you if your site is behind a firewall, which probably applies to your development server.

Also, keep in mind that it runs Internet Explorer to produce its charts, so the charts you see apply to that browser even if you are visiting WebPagetest with Firefox!

Google Chrome

Google's Chrome browser lets you generate a simple Waterfall chart right out of the box. You also get headers and other details about each file.

Download Google Chrome fromhttp://www.google.com/chrome.

To generate a Waterfall chart:

1. 1. Open a web page in Chrome.

2. 2. Right-click anywhere on the page and choose Inspect element. The Web Inspector window appears.

3. 3. In the new window, click on the Resources button.

1. 4. Choose to enable Resource Tracking. Your page reloads and the Waterfall chart appears.

To see request and response headers, parameters, and so on, click on a filename to the left of the Waterfall chart. This replaces the Waterfall chart with detailed information for that file.

Apple Safari

Apple Safari has the same underlying code base as Google Chrome, including the Web Inspector.

Download Apple Safari from http://www.apple.com/safari/.

However, before you can use the Web Inspector on Safari, it needs to be enabled first:

1. 1. Open Safari.

2. 2. Open the Safari settings menu and choose Preferences. The Preferences popup appears:

1. 3. Check Show Develop menu in menu bar.

1. 4. Close the Preferences popup.

With the Web Inspector enabled, you can now generate a Waterfall chart in the same way, as with Google Chrome:

1. 1. Open a web page in Safari.

2. 2. Right-click anywhere on the page and choose Inspect element. The Web Inspector window appears.

3. 3. In the new window, click on the Resources button.

1. 4. Choose to enable Resource Tracking. Your page reloads and the Waterfall chart appears.

To see request and response headers, parametes, and so on, click on a filename to the left of the Waterfall chart. This replaces the Waterfall chart with detailed information for that file.