Firebug

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.

JavaScript Debugger

Perhaps THE killer feature of Firebug is its ability to debug JavaScript online, when the webpage is being loaded. To use the debugger, first load the page you want to debug. The select Script in the bottom bar menu, and the name of the .JS file you want to see in the top bar menu. For example, the following screenshot was taken when Firebug was set on the jquery.form.js script.

Once you have select the relevant script, scroll to the code you want to debug, and place a breakpoint at the appropriate position (for example by clicking the line number). Then, refresh the page, and wait until firebug reaches the breakpoint. Now you’ll be able add variable watches and control the script execution flow via the right-side pane.

The JavaScript debugger was originally designed for website builders and QA personal, but it can also be a real asset if you’re writing web-extensibilities.

HTML explorer

Much like IE development toolbar, Firebug has an HTML structure explorer. However, unlike IE dev. toolbar, Firebug lets you explore the actual DOM objects of the different elements. Just select HTML in Firebug’s lower menu-bar (it’s the default selection), and you’ll see the entire HTML element tree of the current page in the left-side pane. As you can see, Firebug shows you the actual HTML code and text, unlike IE dev. toolbar, which only shows you #text in place of text nodes.

Hovering over a node in the HTML tree will automatically highlight it in the webpage, and similarly, clicking Inspect and selecting an element in the webpage will automatically focus on its corresponding HTML tree node.

While Firebug excels in the way it displays and colors the HTML tree, its true value lays in the right-side panes. The HTML tree has three right-side panes you can choose from. Layout and CSS are unbelievably useful to web-designers (you can experiment with different style properties and immediately see the results, without changing the actual webpage), but have little value to QA or QTP personal. The DOM pane, however, is a real treat.

A killer feature in the HTML tree screen (there’re so many killer features, I’ve lost track):

The DOM pane allows you to browse through the HTML tree objects, achieving the same result as working with QTP’s webobjects Runtime properties. You can easily expand a web-element’s parent-node, sibling-node, child-node, attributes collection, and any other complex property it got, thus exploring the entire DOM relational tree. The following sequence shows how I explored a specific web-element, expanded its parent-node, and browsed to its child-nodes.

This effectively allows you to hunt for elements and their properties, with the same power as QTP’s object spy, but with the comfort and ease of an expandable tree.

Web performance profiler and HTTP explorer

While it doesn’t presume to be a professional performance profiler, Firebug does allow you to identify bottlenecks that cause load latency and problems. This feature is invaluable to website builders, but it can also assist QA personal in pinpointing problems and explore bugs. Just switch to the Net screen, and reload the page. You’ll immediately see how much time each element took to load (it’s actual HTTP request), allowing you to spot any problem in real time.

This is all fine, but the real killer feature of the Net screen (yes, another killer-feature) is hiding behind the little + icons of the HTTP requests. Expanding an HTTP request node will present you with its full header information (both the request and the response), the actual HTTP response body, and any cache elements that were invoked.

The real cool trick is that you can run your tests with the Firebug panel opened, read the HTTP data into QTP, and verify it as part of your test.

Like I’ve mentioned before, these features are just the tip of the iceberg. Firebug is packed with dozens of new features, making it a truly worthy web-design, QA and automation support tool.

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