Net Panel

Firebug and Network Monitoring

Some of your web pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your advertising partner's servers taking a little siesta? Firebug breaks it all down for you file-by-file.

Watch the timeline unfold

Each file in the Net tab has a bar which shows you when the file started and stopped loading relative to all the other files. The bars will teach you things you didn't even know. This will help you tune the order of files in page so that the user spends less time waiting for things to show up. Vertical line across bars represents an event (e.g. blue line == DOM content loaded)

Break it down by type

Sometimes you are particularly concerned about a certain type of file, like JavaScript or images. Click the buttons in the Net toolbar to filter the list by type. This is also a great way to find out the total size and download time for a particular type of file.

Cached or not cached

Not all network requests are equal - some of them are loaded from the browser cache instead of the network. Firebug provides status codes for every request so you can quickly scan and see how effectively your site is using the cache to optimize page load times.

Examine HTTP Headers

HTTP headers contain all sorts of interesting information like the mime type of the file, the type of web server, caching directives, the cookie, and lots more. To see the HTTP headers, just click the arrow to the left of each request to expand it.

XMLHttpRequest monitoring

The phenomenon that is Ajax revolves around a little thing called XMLHttpRequest. It's not much fun to send these requests out and get no visual feedback about their travels. Firebug shows you each XMLHttpRequest, both in the Net tab and the Console tab, along with the text that was posted and the text of the response.

Time stamps

This feature is useful in cases, in which the developer needs to know when a particular piece of JavaScript code is executed relative to the HTTP request made by the web page. Use console.timeStamp() to create visual time stamps drawn over the graphical time line.