Appendix A. A Firebug Primer

If you're a web developer, the Firebug extension (http://www.getfirebug.com) for Mozilla's Firefox browser (http://www.getfirefox.com) is one tool that you'd be remiss to leave unnoticed, and this is especially the case when you're working with a high-powered JavaScript toolkit, because Firebug is absolutely essential for streamlining your debugging efforts. This appendix systematically glosses many of Firebug's key features in hopes of familiarizing you with possibly the best way to debug a web application (or deconstruct a page just for the fun of it).

This appendix is more of a primer for motivating Firebug novices than a comprehensive tutorial.

Installation

Like any other Firefox extension, installing Firebug is a piece of cake. Head out to http://www.getfirebug.com and click on the installation button. Take note that a yellow warning bar may appear at the top of your screen and prevent the installation from taking place, so you may need to click on the "Edit Options . . . " button to authorize the installation. Once Firefox restarts, you should have a Firebug item in your Tools menu and a Firebug icon in the bottom-right corner of your browser window, as shown in Figure A-1.

Left: once Firebug is installed, an item appears in the Tools menu and presents you with a few standard options; right: in addition to the Tools menu item, an icon appears in the bottom-right corner of the browser window
Figure A-1. Left: once Firebug is installed, an item appears in the Tools menu and presents you with a few standard options; right: in addition to the Tools menu item, an icon appears in the bottom-right corner of the browser window

To Allow or Not to Allow?

Before delving into all of Firebug's cool features involving DOM manipulation and JavaScript dissection, let's take a moment to review some helpful ways that you can customize Firebug to automatically switch on and off for particular web sites. This feature is often overlooked, yet very convenient to use because you can customize Firebug for development purposes. For example, you may choose to leave Firebug disabled by default because it noticeably bogs down JavaScript-heavy web apps like Gmail. However, you can still specify that Firebug should always turn itself on for a custom list of URLs corresponding to web apps you're developing so that you don't have to manually switch it on and off as you multitask between various browser tabs. As you find a need to use Firebug with more sites, simply add them to the to the list of allowed sites.

Right-clicking on the Firebug icon in the bottom right corner of your browser brings up a contextual menu with options for configuring your Firebug settings for allowed sites. In particular, you have the following options, shown in Figure A-2:

Disable Firebug

Turns off Firebug until you either uncheck it or navigate to a site that you've already specified should use Firebug through the "Allowed Sites . . . " menu item.

Disable Firebug for . . .

Prevents Firebug from being enabled for the current site and adds it to the list of blocked sites—handy if you want to enable Firebug by default but want to disable it for a custom list of sites.

Allowed Sites . . .

Brings up the "Firebug Allowed Sites" window, which allows you to specify a custom list of allowed and blocked sites.

Open Firebug in New Window opens Firebug in a separate standalone window—handy if you feel cramped in the default panel that opens in the bottom of the browser window.

Various configuration facets of Firebug
Figure A-2. Various configuration facets of Firebug

Now for the Fun Stuff

Now that you've equipped Firebug for use with particular sites, let's take a look at some of the coolness that has been spinning up so much Firebug buzz. The front page of the O'Reilly Network at http://www.oreillynet.com is as good a starting place as any.

Once you've navigated to http://www.oreillynet.com, enable Firebug, and notice that the previously grayed-out icon in the bottom-right portion of the browser window switches to a green circle with a check mark in it, as shown in Figure A-3. Shortly thereafter, you may notice some activity related to a GET request in the pane below the row of tabs while the "Console" tab is selected. Hovering over the hyperlink reveals a tooltip specifying the location of the script on the server.

Firebug delivers valuable insight into your debugging (and dismantling) activities
Figure A-3. Firebug delivers valuable insight into your debugging (and dismantling) activities

We'll systematically work through each of the tabs you see in the Firebug interface—Console, HTML, CSS, Script, DOM, and Net. As you'll see, there's a phenomenal amount of functionality packed into what seems like a "mere" extension. Thankfully, Firebug's interface is highly usable and organized fairly intuitively once you've spent some time with it.

Inspect

Notice the colorful Firebug icon in the upper-left corner of the Firebug pane. In addition to being a nice decoration, it also doubles as a button that reveals a menu fairly similar to the one in the Tools menu. The remaining items in the row—Inspect, Clear, and Profile—are also buttons. Let's start with the Inspect button.

The Inspect button allows you to instantly locate any element in the DOM tree by hovering over it in the browser window, which is really helpful when you're trying to troubleshoot a particular part of a complex layout or search for a needle in a haystack. Click on the Inspect button, shown in Figure A-4, so that it becomes depressed. The main menu provides all of the representative main menu items and is always located in the upper-left corner. The Inspect button, always beside it regardless of the selected tab, is incredibly handy and one of the most common features you'll probably find yourself using. Watch as Firebug switches to the HTML tab and displays the corresponding HTML and CSS as you hover over various elements on the page. The corresponding HTML pertinent to the currently hovered-on item is highlighted in the HTML tab so that you can easily inspect the entire element and its context.

Clicking the hovered element in the page causes the corresponding content in the HTML tab to become highlighted and the scrolling ceases so that you can take control of your mouse again without losing your place. Once you've located the particular DOM element you're looking for, you can do just about anything from within the HTML tab: dynamically edit the node's content, add an attribute, remove an attribute, reveal the corresponding CSS that styles a particular node, etc.

The Inspect button at work
Figure A-4. The Inspect button at work

Take a few moments to get better acquainted with the inspection feature by exploring other aspects of the O'Reilly Network's main page. A particularly interesting activity includes modifying elements in the DOM tree and seeing the effects immediately take place in the browser. For example, Figure A-5 shows one of the graphics on the front page resized to be a little too wide. Again, just click on the HTML to modify the attributes of the various tags to see the changes take effect. You might also try adding a valid attribute to an element by selecting the DOM element and then clicking on the Edit button that appears whenever inspection is occurring.

You can use Firebug to hack on the HTML in the page and see live results
Figure A-5. You can use Firebug to hack on the HTML in the page and see live results

Console

By now, you must have noticed that there's a nice little command prompt in Firebug that appears whenever the Console tab is selected. In a nutshell, this little command prompt, shown in Figure A-6, will execute whatever JavaScript you throw at it. Use it to test out JavaScript concepts, or reach in and grab references to nodes for instant quick manipulation. In particular, you can grab references to any content in the page through JavaScript's document.getElementById function. So what if an element doesn't have an id value—give it one yourself and be on your merry way. From there, you might choose to use the console's built-in console.dir (just like in Python) to reveal methods available to it. Now would be a good time to divert to Firebug's documentation (http://getfirebug.com/docs.html), where you'll find details about console, incredibly useful built-in functions like dir, and more.

Left: the console is your scripting interface into any web page; right: clicking the subtle button that looks like a ^ on the far right of the console prompt reveals a multiline JavaScript editor
Figure A-6. Left: the console is your scripting interface into any web page; right: clicking the subtle button that looks like a ^ on the far right of the console prompt reveals a multiline JavaScript editor

Another contextual button that's visible while the Console tab is selected is Profile, and it does exactly what you'd think: profiles the execution of JavaScript in the page, as shown in Figure A-7. You simply click on it once to start profiling and click on it again to stop profiling and display a summary of the statistics collected. Can it get any easier than that? The snapshot below is from http://jobs.oreilly.com, and displays some JavaScript stats related to clicking on the navigation bar that appears on the left side of that page.

Firebug comes with an incredible profiler that gives you all sorts of handy stats about the performance of JavaScript in web pages
Figure A-7. Firebug comes with an incredible profiler that gives you all sorts of handy stats about the performance of JavaScript in web pages

It's especially noteworthy that Dojo binds tightly with Firebug. When it loads in Firefox, the console is available for dropping output that's great for debugging or status messages via the console.log function, and on other browsers, Firebug Lite (a minimalist console) still logs output and allows you to interact with the DOM.

Because console.log is by far the most commonly used function for debugging, it's helpful to know that you should separate items you'd like to log instead of other approaches such as concatenating them together. The reason is that Firebug allows you to inspect items by clicking on them, and if you implicitly convert them to a String you lose this benefit. For example, you might log a status message about a variable called foo as console.log("the value of foo is", foo) in order to be able to introspect foo. If you were to instead use console.log("the value of foo is "+foo), you'd be stuck with a String. It may not matter for primitives, but if foo were a complex Object, you want the benefit of introspection.

HTML and CSS

You should be fairly comfortable investigating the HTML and CSS tabs because you encountered the same content during your earlier escapade with the Inspect button. Still, a somewhat subtle feature worth pointing out is that you can right-click on items in either of these tabs to reveal a contextual menu with several useful options in it. Among these options are the ability to scroll the page to the element of interest, log events related to the element, directly modify the element, and so on.

A superset of the same content that appears under the CSS tab also appears in the HTML tab if you select the underlying Style tab, included in a pane on the right. Note that you can directly change the style of elements through the CSS tab, as shown in Figure A-8, or through the HTML tab. You can also click on a style element to disable it in the page depending what is most helpful for your particular situation. And wait, there's more: the Layout tab that's adjacent to the Style tab displays the active properties for the currently selected element's padding, borders, margins, and offset. As might be expected, you can preview changes to these properties by changing the values directly in the diagram.

Top: disabling elements; middle: Firebug's Layout ruler; bottom: manipulate the layout of a DOM element's margin, or anything else for that matter (this example shows the upper margin being changed to 100px)
Figure A-8. Top: disabling elements; middle: Firebug's Layout ruler; bottom: manipulate the layout of a DOM element's margin, or anything else for that matter (this example shows the upper margin being changed to 100px)

Script and DOM

Firebug's Script tab reveals a powerful JavaScript debugger that allows you to set breakpoints in particular scripts and watch the values of variables in the code as it executes. Unlike some debuggers you may have previously encountered, the Firebug JavaScript debugger is intuitive and easy to learn. To set a breakpoint, just load the script of interest by using the contextual menu just above the Script tab and click on the line number where you want the breakpoint. A small red circle should appear, confirming the breakpoint. You can click on the red circle to remove the breakpoint, or click on additional lines of code to add additional breakpoints. Likewise, you can type in the name of a variable or a derived expression into the accompanying Watch tab to keep an eye on how values are changing from breakpoint to breakpoint. Is debugging JavaScript getting easier, anyone?

The DOM tab, shown in Figure A-9, is fairly self-explanatory and essentially provides the same information you can already view in the HTML tab, but in a tree view it might be easier to inspect and manipulate, depending on the situation.

Top: using Firebug's JavaScript debugger to set breakpoints; middle: watch expressions, even ones that you derive yourself; bottom: the DOM tab allows you to inspect and manipulate the DOM through a traditional tree view
Figure A-9. Top: using Firebug's JavaScript debugger to set breakpoints; middle: watch expressions, even ones that you derive yourself; bottom: the DOM tab allows you to inspect and manipulate the DOM through a traditional tree view

Net

By now, you've seen most of Firebug's cool and useful features; however, the Net tab, shown in Figure A-10, is a "saved the best for last" type of thing. Basically, the Net tab gives you all of the info you'd ever typically need for performance analysis as it relates to pieces of the page loading, and conveniently, media types are logically categorized into groups such as CSS, JavaScript, images, and so on. As a special treat, there's even a category for viewing network statistics related to XHR (a.k.a. AJAX) requests. Overall, the Net tab provides valuable insight into potential performance bottlenecks and load times associated with content. For projects with a lot of dynamism, it's almost like having a crude network profiler at your fingertips.

Firebug's Net tab itemizes the media associated with a page by category and provides the associated load time
Figure A-10. Firebug's Net tab itemizes the media associated with a page by category and provides the associated load time

Go Forth and Dismantle

We've taken a look at the highlights of Firebug, but the best way to get comfortable with it is to spend some time dismantling the design of a few web pages. Head out to any site with a semi-complex layout and take a few minutes to learn more about how the designers put it together. In addition to having some fun doing detective work, you'll learn a lot along the way. Then—the next time you need to quickly debug some of your own work—you can just whip out your Firebug skills and remedy the situation without even breaking a sweat. (And again, the point of this appendix isn't to provide an exhaustive tutorial for Firebug—it is to give you a jumpstart and increase your awareness of just how much time Firebug can save you if you learn to use it well.)