This appendix is more of a primer for motivating Firebug novices than a comprehensive tutorial.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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
reach in and grab references to nodes for instant quick manipulation. In
particular, you can grab references to any content in the page through
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
useful built-in functions like
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.
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
console.log("the value of foo is", foo) in
order to be able to introspect
If you were to instead use
value of foo is "+foo), you’d be stuck with a
String. It may not matter for primitives, but
foo were a complex
Object, you want the benefit of
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.
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.
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.)