FireBug is Free and Open Source and The Best Web Development Plug-in for FireFox. FireBug lets edit, debug, review CSS, HTML and Java Script right from FireFox Browser. Non intrusive, light weight plug-in is really a gem for Web Developers. Well, there is another very important use of FireBug. It can show graphically how each files behave while loading. This will give you a very good idea on how to optimize the web pages.
Watch the timeline file by file
Each file in FireBug’s Net Tab, has a respective Bar that shows when the Page was started to load and when it finished loading. This is relative to other files and hence gives you an idea of load comparison with other pages. Lots of revelations like Java Scripts loading in sequential rather than parallel etc. This is very handy for optimization.
Separate by File Type
Sometimes, you be interested in how images load in each page. You might have linked a huge BMP file instead of JPG and it certainly will slow down load time. These can be easily sorted out using this feature.
Can differentiate between Cached and Non Cached Pages
Firebug color codes requests that are served from the cache in a lighter gray 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.
and much more features of FireBug really helps you pin down the issue. we’re loving it. Do you? or Do you have something better? We’d like to hear from you.
Here is a screenshot of FireBug showing Digg Site Load.