Firebug for CSS development

Being a designer on a small development team means I end up in the code fixing visual design bugs. Firebug has been invaluable for this. Here are some of the things I do the most.

Right-click on anything on the web page and choose Inspect Element. This gets me to the section of the HTML source that I care most about.

Right-click in the Style panel on the right and choose Add Element Style. You can then add CSS declarations to this element and see immediately how it affects the layout of the page. If there's already a CSS block and you want to add a property to it, double-click on the white space after the opening or closing bracket.

Use up and down arrow keys in the value of a CSS element to cycle through values. So if I add a position declaration, I can use the arrow key to see how each value changes the layout. The down-side is you need a valid value in there already. undefined won't work as a starting point.

Arrow keys also work for numerical values, as long as they has specified units. Font size, margin, padding, position... you can nudge any of these values up or down using the arrow keys. It even works on an individual value within a multi-properly list (e.g. padding: 5px 10px 20px;) as long as you put the insertion point in the value you want to change.

And of course turning off a particular declaration is just as important as adding one or changing the value of one. Click in the left margin next to the declaration you want to disable.

There's a ton more in this utility, like the console for evaluating javascript expressions without resorting to alert();, and the DOM. But this is the stuff I use every day. I only wish IE and Safari had equally good debugging tools.

Comments

[zaphod]

I almost skipped this one because the Web Developer Toolbar does most of what I want for CSS and Firebug is just for JavaScript, right?

Great tip, thanks!

[Dave Cortright]

I think FireBug is better, though I haven't used Web Developer that much. I love the ability to target a specific element on the page and easily tweak the CSS for it. Firebug does do Javascript, and I've used the console for debugging. But 99% of what I use it for is CSS.