Firebug is beautiful

DZone 's Guide to

Firebug is beautiful

· Agile Zone ·
Free Resource
Firebug is one of the most famous extensions for the Firefox web browser. In the past years, the functionalities offered by this plugin alone sold Firefox as the platform for web development over Internet Explorer (besides the respect of W3C standards that characterized Firefox). At that time, Chrome had not been invented yet and when it was released, it incorporated some of the innovations of Firebug like a functional JavaScript console.

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).

The converse use case is also supported in Firebug: visualizing where single HTML elements end up in the page, along with their dimensions and margins in different colors.

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.


Firebug maintains parallel views over the page: the HTML code and the Document Object Model which will be used by JavaScript functions. Thus, via Firebug you can navigate the DOM and learn the available APIs by simply inspecting the various objects and the attached methods.


Having the ability to inspect the DOM and the JavaScript objects defined in a page wouldn't be so brilliant if you didn't have the possibility of actually trying them out.

The Firebug JavaScript console is able to execute every piece of JavaScript code you would insert as a callback in a page. As shown earlier, you can also refer to JavaScript objects loaded in the current page, such as JQuery's $ Facade function.

Thus learning how to use a JavaScript library does not pass from its documentation anymore, nor on a code-reloadpage cycle, but on a by far faster feeback cycle where you write JavaSCript and execute it on the fly, only to copy that in a .js script file when you're already sure it works.


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.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}