At the Forge - Firebug

Firebug is a brilliant means of debugging Ajax applications.

During the past year or two, Web developers have witnessed what we might call the JavaScript renaissance. That's because all the fancy Ajax, Web 2.0, mashup, interactive, collaborative, desktop-like applications that are being developed are written in JavaScript. This is possible today not only because the JavaScript language has improved, but also because browsers are increasingly compliant with Web standards. And, of course, the availability of cross-platform JavaScript libraries, such as Prototype, has added many features to the language, while simultaneously ensuring cross-platform compatibility.

So, with all the JavaScript development happening today, what is the most popular way to debug programs? That's right, it's the built-in alert function:

alert("value of x = '" + x + "'");

Alerts might be unpleasant, ugly and downright annoying, but they have been the best and easiest way to debug JavaScript for several years. Sure, there have been a few JavaScript debuggers, but none of them has been all that exciting to use, let alone easy or productive.

Well, I'm happy to say that the situation has now changed. Firebug is an open-source plugin for the Firefox browser that aims to be a one-stop debugging tool not only for JavaScript, but also for everything that a Web developer needs. Written by Joe Hewitt, one of the founders of the small startup Parakey, Firebug 1.0 was released in early 2007. It already has become wildly popular among Web developers, and for good reason.

This month, we look at Firebug, so that we can debug, inspect and optimize modern Web pages. Firebug already has improved my ability to debug modern Web pages dramatically, and I wouldn't be surprised if this turns out to be the case for many other Web developers.

Installing Firebug

Firebug is distributed as an extension for the Firefox Web browser. It is most easily downloaded and installed from the Firebug site ( To install it, click on the download Firebug button. If you already have told Firefox this is an allowed download site, you will be able to download and install this Mozilla extension. If not, you need to add to your list of trusted download sites, and then repeat the download procedures. Once the extension is installed, restart Firefox.

Once you do this, your Web browser will look much the same as before, but with some small changes. First, there now will be an icon at the bottom of the screen in the status line. This icon will look like either a green V in a circle (to indicate that it is running) or a gray circle with a slash through it (to indicate that it is disabled). Firebug can be enabled all of the time, but you're probably interested in debugging only a small number of sites that you visit. Thus, it's useful that by clicking on the Firebug icon—or by going to Tools→Firebug in the Firefox menu—you can indicate the sites for which Firebug should be active.

You can add a new site to this list by selecting open Firebug from that same Tools→Firebug menu, or by adding it manually with the allowed sites dialog box from that same Firebug menu. In either case, the site you currently are visiting will be viewable in Firebug.

Now that we have started Firebug, what can we do with it? Let's have some fun by going to the Linux Journal site ( Activate Firebug for this site, and your browser window will be cut in half, with the top half still showing the Web page and the bottom half containing Firebug. I generally prefer to work with Firebug in this way, but if you prefer to keep your browser window separate from your debugging window, you might want to choose open Firebug in new window, rather than simply open Firebug.

The main menu for Firebug contains the Firebug icon, which offers most of the same menu options as the icon in the status line and Tools→Firebug menu, along with links to the Firebug documentation and home page. An Inspect button always sits next to that icon, and it lets you zoom in on a particular item on the page. The rest of that menu bar changes according to the context in which you are operating, which is determined by the second row of buttons, marked Console, HTML, CSS, Script, Dom and Net.

Debugging HTML

One of the first, and easiest, tasks to take on with Firebug is debugging HTML. Click on the HTML button and choose Inspect. You immediately will see the HTML source code for the current page highlighted in the Firebug window.

Now, here's where the magic begins: with HTML/Inspect selected in Firebug, move your cursor over the Web page (the upper frame). As you move the cursor, the HTML element over which it is passing is highlighted in blue. In the Firebug frame, the HTML source corresponding to that rendered content also is highlighted.

This functionality is particularly useful when I know something is going wrong with the rendering of my Web page, but I'm not quite sure which part of the HTML source is to blame. A few clicks of the mouse later, and you easily can know which part of the file you need to edit.

Firebug highlights the HTML source code that it displays, albeit using different colors than the View Source page that Web developers know and love. (I think that Firebug's color choices are better.) Moreover, Firebird displays the HTML source as a tree, including indentation. This, along with a display of all of the current element's parent tags (next to the edit button on the top row) provides a great sense of the current element's context in the document.

Inspecting the HTML certainly is useful and interesting, but it gets better. If you double-click on the text in the Firebug frame, you now can edit it. Obviously, your changes do not get saved back to the server, meaning you can return to the original content by refreshing the page. Nevertheless, it is quite useful (and fun!) to replace text on existing pages, right from your browser.

Replacing text in an HTML element is a good start, but what if we want to modify the markup itself, rather than only its text or attributes? Right-clicking on the tag (or any of the text within the tag) displays a pop-up menu, letting you copy the HTML, innerHTML or XPATH of the selected tag. You can ask for the selected tag to be displayed in the top frame, scrolling if necessary in order to reach it.

Finally, you can add new attributes to this element or ask to inspect the element in the DOM tab. And indeed, the DOM view provides another way of looking at the same document. While still inspecting one of the HTML elements, click on the DOM button in the second row of the Firebug frame. The frame changes its appearance, listing a large number of DOM attributes associated with the element. Thus, inspecting an image in the DOM tab shows that its type is IMG, while inspecting a link shows that it is of type A. As always, Firebug lets you edit any attribute you like by clicking on the value and replacing it.