At the Forge - Firebug

So far, we have seen how Firebug can help inspect and modify HTML. But, of course, HTML provides only the basic content and structure for a page; if you know what you're doing, you can inspect and modify the CSS definitions as well.

One of the many amazing and clever things about CSS is the way it handles inheritance. If you have set some attributes for <p> in css1.css and others in css2.css, both will apply to <p> tags in your file. Things can become more complicated than that, such as when you have a <p> tag with an id attribute, with conflicting style information. In these cases, the most specific style (that is, the id tag) applies.

On a large site with many different styles, it sometimes can become difficult to keep track of which styles are being applied. Fortunately, Firebug provides some wonderful capabilities for inspecting the CSS associated with a site, and even for editing it.

To use this functionality, click on the CSS button (next to the HTML button we were using earlier), and then on the Inspect button above it. Firebug continues to show its tree representation of the current document, but the right-hand frame displays all of the CSS styles that apply to whatever you're pointing to. Moreover, it indicates which CSS file, and which line of that file was applied. And, as if that isn't enough, it crosses out any styles that were overridden by more specific ones.

As with the HTML inspector, you easily can edit the CSS associated with any element by double-clicking on a style declaration. For example, if you want to change text from roman to italic type, you merely click on CSS/Inspect, then point to the text you want to change. If there already is a font-style property in the CSS, you can change it to read italic. If not, you can right-click on the CSS pane, choose new property, and add the property and its value.

Firebug knows what the legal property names are for CSS styles, so it is able to complete the style name automatically when you begin typing.

The right-hand frame offers more than merely a textual indication of styles. It also has a graphical representation of the CSS box model, showing the number of pixels used by the element, padding, border, margin and offset.

Finally, we get to the JavaScript debugger. As I mentioned earlier, JavaScript is becoming a mainstream application programming language, which means people are writing increasingly complex programs with it. And, although I've long used print statements for much of my debugging during the years, there's no doubt that a good, interactive debugging environment can make it easier to solve certain issues.

Firebug provides several powerful tools for JavaScript debugging. It introduces a new logging system that makes it possible to produce debugging output without using the alert function. I still can't quite believe it took this long for someone to realize it would be helpful to have a method for logging that didn't produce a modal dialog box. Regardless of how long it took, we can now use console.log to write messages to the Firebug console, such as:

console.log("Now executing the 'foo' function.")

Or:

console.log("Username parameter was '" + username + "'")

Actually, Firebug makes it possible to do much better than this, with embedded, printf-like strings:

console.log("Username parameter was '%s'", username)

Firebug provides a set of logging functions, each of which produces output with a different warning level and color. These are:

The output from these methods appears in the Firebug console, which you can view by clicking on the Console button, right under the Firebug icon. Note that using these methods means your methods might be incompatible with browsers that lack Firebug.

The console is not only an area that receives messages though. As with Ruby's IRB and Python's interactive mode, Firebug's console allows you to execute JavaScript within the context of the page. Interested in getting a list of forms on the page? Simply type:

document.forms

and you will get a list of the forms. You also can use Prototype-style methods to retrieve information about much of the page, as in:

$('cvb_form')