Professional Ajax, 2nd Edition

11.2. FireBug

Mozilla's Firefox has long inspired creative add-ons due to its open and fairly straightforward add-on capabilities. In 2006, Firefox contributor Joe Hewitt introduced FireBug as a new tool to help developers create and debug web sites and web applications. Built into FireBug are tools that allow DOM inspection of the page that is currently loaded, style information about particular elements, and the part most interesting to Ajax developers, monitoring of all traffic from the XHR object.

11.2.1. Installation and Setup

FireBug is available for free from www.getfirebug.com. FireBug is downloaded as an XPI, meaning that Firefox knows how to install it. Once you have clicked on the download link, you'll be prompted to allow the package to be installed. Clicking OK on this dialog installs FireBug (though you'll need to restart the browser to use it).

FireBug augments the Firefox window in two ways.

• First, it adds a small panel on the right of the status bar to display error information for the page (green if there are no errors, red if there are errors).

• Second, a main panel displaying information about the currently loaded page is displayed at the bottom of the window. This panel can be visible or hidden by default and can be quickly toggled by clicking on the status panel.

11.2.2. The Interface

The basic FireBug 1.0 interface has three tabs in the main panel.

• The first tab is called Console, and it contains a basic command line JavaScript interface. It is on this tab ...