Dec72006Firebug: Free, indispensable Web design tool
Trying to figure out exactly why something on a Web page looks the way it does often involves figuring out the complex interaction of multiple CSS styles. The CSS concepts of inheritance and the “cascade” (which I discuss in chapters 4 and 5 of CSS: The Missing Manual) means that an element on a page might be formatted by more than one style. For example, a particular h1 tag might inherit a font face and font size that was defined for the body tag, a margin defined for the h1 tag, and a font color defined in a class style that’s applied to the tag. And that’s just a simple example.
Fortunately for us Web designers, there’s a free Firefox extension that makes it easy to see how styles affect a particular tag on the page. Firebug (http://www.getfirebug.com/) provides several helpful tools for analyzing your Web pages. One of the most useful is the style panel which lets you see which styles apply to a particular page element–it lists inherited styles as well as styles that apply directly to the element. It also crosses out any CSS properties that don’t apply to the element because they’ve been overruled by more specific styles.
Another useful tool is the Layout tab which provides information concerning the width, height, margins, padding, border and placement of an element on the page. This is a great way to answer simple questions like: how wide is this sidebar anyway (as you can read in Chapter 7 of CSS: The Missing Manual, this kind of question isn’t always easy to answer.) Although you can find similar features in Dreamweaver, I haven’t seen any free tools that offer this much helpful diagnostic information for Web designers.
And believe it or not, these are just a few of the things this incredible extension can do (it also includes a powerful JavaScript debugger for you programmers out there.) It only works with Firefox (there’s another solution for IE and other browsers mentioned on the Firebug Website). Download it today…it could save you hours of hair-pulling frustration.
Bonnie January 21st, 2007 at 3:08 pm
Thanks