CSS Debugging and Editing with Firebug

Occasionally a new tool comes along that literally changes my life. Prototype, del.iciou.us, and most recently, Firebug. Using it, especially when evaluating CSS and javascript (especially when it’s all over!), has increased my productivity and saved me from many migraines. In this post, I plan to focus on some of the helpful features for debugging CSS. In a later post, I plan to cover how wonderful it is to debug and test javascript in firebug,

Especially on websites that have a lot of nested styles, finding where that extra padding is coming from can be a headache and waste a lot of time that could be spent being productive. With firebug, you can quickly see where each element is getting its styles and the full cascade of styles affecting it. From there, it is easy to alter the CSS and html live to figure out what needs to be done for the desired effect. This feature can be used for a world of uses. For example, say I wanted to override some of the CSS on my orkut.com profile. First, I open up my profile and open firebug:

The green check mark in the bottom right indicates that there are no errors (you can choose to display any or all of the following: javascript Errors, javascript warnings, CSS errors, or xml Errors) used on the page is valid. The dropdown list displays where styles are being defined.

Select “inspect” from the menu then hover to select the element to edit. On the right hand column, the styles are defined specifically for the element, but also what it inherits (font from panel table) and what is over-written (font from main table class). Dreamweaver 8 has a similar feature for showing the cascade of elements. As an added benefit, each of the rules listed has a hyperlink back to the file where it is defined. Also in this screen shot, notice that firebug displays the html hierarchy as a breadcrumb like chooser for the currently selected element. This breadcrumb is clickable and allows for quick access to the nearby html elements.

Here you can see how easy it is to work with or turn off styles. One great feature displayed in this screenshot is that when hovering over a defined color, a pop-up displays the color. The same is true for any images that are used in a style or in html.

And, viola! In only a few short minutes, I am able to find and define what style classes I want to override and see what the page will look like live as I made the adjustments:

This blog entry was posted on Monday, February 12th, 2007 at 3:00 pm and is filed under Javascript/AJAX, Languages, Reviews, Software. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.