Firebug — Debugging Web Pages using Firefox

Firebug is a plug-in for the Firefox web browser that helps with debugging web pages. There is lots of online documentation, most of which I haven't even read, but this page distills some of it for the use of CS110 students.

To determine if your Firefox has Firebug installed, go to the tools menu, and you should see Firebug listed:

If you don't have it, go to Tools > Add-ons and click on Get Add-ons, type firebug in the search box, and find the main Firebug module in the results. Click on the Add to Firefox button, and follow the instructions. Alternatively, visit this Firebug hyperlink, and click on the huge button that says install.

Firebug can debug a number of things, which I'll try to demonstrate in the sections below.

Getting Started

There are several ways to start Firebug for a particular page, and the Firebug user interface is still evolving. If you don't see a handy icon on your location bar, you can activate it via the Firefox tools menu.

Once it's started, you'll see the page split and, in the lower half, you'll see the Firebug window, with the firebug icon at the upper left. (You can also configure Firebug to start in its own window.) There are a set of tabs below the that allow you to explore and debug different aspects of your page.

HTML

Click on the "HTML" tab and you'll see the source code for this page hierarchically structured based on the HTML tags. Click on the triangles ( left-pointing triangle ) at the left to open/close the tags in the structure of the page. If you've made a mistake in the structure of your page, this may help you find the error.

Elements of the rendered page (above Firebug) are highlighted when you select or roll over their elements in the HTML pane. This can help you navigate to the correct place. Just move your mouse over the source to see the highlighting.

You can even dynamically change the text and tags of your page, to try something out. Try editing the following list, by double-clicking on the items you want to change. You can observe the results in the browser window above, providing quick feedback.

Change the opening/closing tags for this list from OL to UL
Apples: change this first item to Aardvarks. Control-k will delete to the end of the line
Bananas: change this to Baboons, and delete the rest

Click on the "Edit" button (above the tabs and to the right of the "inspect" button) and the entire left pane of the Firebug window becomes a black-and-white editor.

Of course, this on-the-fly editing doesn't change the real page on the server. It would be convenient, but the browser doesn't know you're the owner of the page. You can do this same on-the-fly editing of a page at The New York Times or The White House, which demonstrates why you shouldn't be able to change the page that others see.

CSS

Click on the CSS tab to see the style information for the page. Again, you can edit this on-the-fly to experiment with different changes.

Style Information

Clicking on the HTML tab will, as usual, show you the document source in the left panel. In the right panel, you will see the style information that applies to that element. You can even see the style rules that have been overridden. For example, in this document, the P.note tag is defined in an external style sheet to be maroon text on white. At the document level, that same tag is defined to be bold text.

In the following paragraph, both of those have been overridden by an inline stylesheet to specify orange, normal-weight text on white. In the source pane, navigate to the source for the orange paragraph and click on the P element at the beginning.

Observe the style rules in the Firebug pane at right. (You may have to scroll to see the all three: (1) the element.style (the inline style), (2) p.note from firebug.html (the document-level style), and (3) p.note from cs110-main-style (the external style).

This paragraph is just an example of the P.note class of paragraph.

You can edit these styles:

Click to the left of the "color: orange" in the element style where you see a ; the style is then grayed out and marked with an , and the maroon takes over again.
Click on the symbol and the orange is restored.
Click on the word "orange" and type another color name, such as blue. Notice that Firebug auto-completes what you've typed, and immediately shows your change.

Sometimes, if you don't already have a stylesheet for an element, you have to add an inline stylesheet to it so that you can modify its style. You can do that by editing the HTML.

To add a new property, go to the end of any value and press return; this will open up a new line, just like in an editor.

Seeing the Cascade, using Firebug

We know that multiple stylesheets can apply to a particular element, and there needs to be rules to determine the winner. Look at this page with cascading rules and see how Firebug shows you the losing stylesheets and where they come from. You should be able to see something like the following screenshot:

Layout Information

As you may know, CSS allocates space for elements using a "box" model, with dimensions such as margin-left, border-width and padding-top as well as width. You can see this information using Firebug.

Click on the "layout" button at the top of the right pane, next to where it says "style." You'll see the box model for the current paragraph, including dimensions. It'll look like this:

Mousing over the different parts of the box selects them. You can them modify their dimensions. Try increasing the left/right margins of the orange paragraph:

Double-click on the "0" in the left margin. Type a biggish number, like 50, so that the change will be unmistakeable.
Repeat this on the right margin.
Notice the change in the paragraph.

You can switch back to the "style" layout to see the change to the element's stylesheet.

JavaScript

Click on the "Console" tab in the Firebug window and you'll get a pane where you can type JavaScript code that is immediately executed and you can see the results. Notice at the bottom of the window is a small, one-line pane with >>> at the left margin. You can enter a line of JavaScript code at that triple-angle prompt, and it will be immediately executed.

Try entering the following lines of JavaScript, one at a time:

var x=5
This just stores the value 5 in the variable x. If you made no typing mistakes, Firebug just prints your code and gives no result. If you did make a typing mistake, you may see an error message.
vax x=5
Here, we've accidentally typed an x instead of an r at the end of var: Firebug prints the error message; it's not exactly clear, but at least we know we made a mistake.
x
If we just type a variable, Firebug prints its value.
3*x
More generally, if we type an expression, Firebug evaluates the expression and prints its value. Here, 3*x should be 15. Is it?
var y=3*x*x+2*x+5;
Here, we've typed a complicated formula for y in terms of x. Again, if we didn't make any syntax errors, Firebug just executes the statement. However, we really do want to know what y is.
y
By typing lines of code and interrogating the values of variables, we can easily step through the logic of a computation.
Math.pow(2,5)
alert(y)
We can use built-in JavaScript functions, too.

Single Stepping

Now, click on Firebug's Script menu and scroll down, looking at the source of this page, until you see some JavaScript code in SCRIPT tags, namely two versions of a function that computes the length of the hypotenuse of a right triangle.

Look first at pyth1. Believe it or not, I wrote that intending that it would be the working version: the bug that is in it is entirely natural. Perhaps you would make such a mistake yourself.

Now, let's imagine we want to test and debug this function. Try the following steps:

Switch to the "Console" tab.
Enter an expression invoking that function, to test it. Try:
```
pyth1(3,4);
```
Hmm. It returns NaN, which isn't what we expected.
Switch back to the "script" tab and click on the line-number for the first line of the function, namely var a2=a*a;. You'll see appear to the left of the line number. This sets a breakpoint at that place in the code. A breakpoint says to Firebug, "stop here and let me step through this code."
Now, switch back to the "console" tab and, re-evaluate the test expression:
```
pyth1(3,4);
```
Firebug will start to execute your code, reach the breakpoint right away, and it will automatically switch to the "script" tab, and indicate where it is with
Look in the pane to the right. You'll see all the variables in the function (parameters and local variables). Two, "a" and "b," are defined, since they are the parameters; the rest are undefined, since we haven't yet executed the lines that assign them values.
Above that pane are a set of arrows for stepping through your code. Click on . This executes one step of your code.
Notice the change in the pane that displays your variable values. Now, "a2" has a value, and you can double-check that it's the correct value.
Click again to step again. Now, "b2" has a value.
Click again, and "c2" gets its value.
Click again, and you see that "c" is "NaN." Why? We've narrowed it down to one line of code, and it doesn't take long to see that the problem is that we are taking the square root of "c," which is "undefined," instead "c2." Bug found!

Try debugging pyth2.

Disadvantages

I may be imagining it, but I think Firebug slows Firefox down. You can easily disable it by going to "Tools > Firebug > Disable Firebug."

Learning More

There are many other features to explore. A cool one is a breakdown of the time it takes for your web page to load, so you can zero in on whatever is slowing it down, such as a large graphic or included file.

Try some of the following links, all from the Firebug page: