Firebug is beautiful
Join the DZone community and get the full member experience.Join For Free
Today, Firebug has reached version 1.5 and is the first extension that I download for a fresh Firefox installation. Let's analyze the most important features of Firebug and how it simplifies the every day tasks of a web designer or web developer.
Our Firebug DZone Refcard has recently (yesterday) become available, so we won't go into detail about how to use every feature, but will instead create a panoramic of Firebug and why you should start using it for your web development work.
Firebug is capable of analyzing blocks of the page as they are pointed to by the mouse, and relates them to the corresponding segment of the HTML source code. Moreover, it calculates the CSS rules that apply to the particular block by unifying the various sources like inline style attributes, embedded <style> tags and external style sheets (crossing out the overridden rules).
These two features are great in helping CSS debugging, where a rule does not have the effect you're expecting or there's for example a missing closing tag which screws up the structure of the page. Quickly finding where an element is and if its dimensions are correct is a way to avoid introducing the classic background-color: blue CSS rule to colorize an element and identify it.
The Net panel is another killer feature of Firebug. When this functionality is activated, all the network activity of the browser is logged. This means you can view every HTTP request made during page loading or asynchronously, in a temporal list. The black sheep resources which take longest to download will immediately standout, along with missing files.
Basically, Firebug intercepts POST and GET requests and visualizes headers and bodies for you. Furthermore, it does the same with HTTP responses, even with the ones interpreted by Ajax callbacks.
Thanks to these features, a typical use case of the Net panel consists in the debugging of AJAX pages. In a few seconds, you can open the Net panel and inspect the response returned by the server (normally not visible to the end user), and bisect the error research between the server (which may generate a garbled response) and the client (which may interpret it incorrectly.) No need to replicate the requests in the browser bar, which is particularly difficult when there is POST or headers involved.
Usually you don't see higher-order plugins for a browser extension, but Firebug has become so diffused to become a commodity and results in an exception.
For example, SourceForge uses Beacon, a Firebug plugin, to collect the Net panel timing information and submits them to a web service end point, with the goal of conducting performance tests periodically.
Another famous example is the YSlow tool, which runs euristics on the informations provided from the Net panel to display advices in order to speed up the loading time of pages. The tips range from methodological (make fewer HTTP requests, use GET for idempotent operations) to operative ones (configure the headers of your webserver to help caches and compress components with gzip to minimize the bandwidth requested).
If you feel Firebug can speed up your development and debugging process, don't forget to download our Refcard too in order to always have a quick reference of Firebug's features.
Opinions expressed by DZone contributors are their own.