Firebug is the most advanced free web analysis tool to date. While some of its functionality may resemble IE development toolbar (reviewed here), its scope, extra features and attention to details make it invaluable both to QA personal and web-designers. It’s fair to say that the only advantage IE development toolbar has over Firebug, is the fact that some websites only work with Internet Explorer, making it impossible to work with firebug (which runs on firefox). Having said that, if you’re working with a site which works both with IE and with Firefox, firebug will blow your mind.

On a personal note - the fact that AdvancedQTP is working (for the most part) in IE6, 7, firefox and safari was only made possible due to Firebug. It literally saved me weeks of tedious work through its superior debug, design and analysis features.

Well, now that I’ve got you all excited, let’s see exactly what are you excited about.

Getting Started

After you install Firebug, it will appear as a small icon at the bottom right corner of your firefox window - either or  . The green icon indicate Firebug is ready for action; while the gray icon indicates that you must enable Firebug before you proceed. Clicking the green icon will raise Firebug panel and enable its use.

Firebug consists of two main panes - a left content area (here showing the page HTML structure), and a right attribute area (here showing parts of the DOM properties of the selected element). Some features will display only one pane (for example - the net screen and the CSS screen).

Clicking the X icon will close the panel, and clicking the ^ icon will detach the panel from the bottom of the screen, allowing you to set your own layout. Next to these icons appears the first killer feature of Firebox - the searchbox. Type in any part of an elements name, style-attribute, event or innertext, and Firebug will immediately focus on it in the HTML structure on the left. Clicking ENTER will jump to the next match, and so on.

On the top of the Firebug panel you can find two toolbars - The top bar indicating the currently analyzed element, and the second bar for choosing different screens and features.

Features

Firebug has many, many features, so I’m only going to cover a few of them. You can read about more features at Firebug’s home.

You’re still here? Hurry up and download Firebug now!