InsideTech

How To >> Browse Articles >> Web Development

Firebug is Your Best Friend

Ever wonder how that site you like did its roll-overs, or which route they took to implement rounded corners in CSS? Or maybe you're about to take in a feed from a client's site, and you'd like to see how well they structure their pages. Well, you could pore through the source of the page, download the linked CSS files and inspect those, and trace what you can of the Javascript you can see. Or you could install Firebug.

Firebug has rapidly become my favorite Firefox extension ever. And by rapidly, I mean the first time I tried it out, it shot to the top of my rankings! Once you've got Firebug installed, you'll see a little gray slashed circle in the bottom right corner of your browser window. Right click it to turn Firebug on, then click Inspect and mouse over the page you're browsing to highlight the source behind the page and the CSS that styles it.

You can collapse the HTML tags in Firebug's main window to let you see the structure of a document and focus just on the area you're inspecting, or expand them to show you everything. The extension's CSS inspector carefully picks out every snippet of the style sheet that controls the element you're looking at, so you won't miss any inheritance. There's even a Layout view that helps you decode all the complex CSS spacing elements effecting the segment you're inspecting.

I could go on and on... The point is, if you know XHTML and CSS, Firebug will rapidly become an indispensable tool. And if you're learning CSS, you don't need much more than a code-savvy mind, a decent book, and Firebug to figure everything out.

One key point, though: If you're a frequent user of gmail, Netvibes, or other highly dynamic sites, you'll want to disable Firebug from inspecting those URLs. It works just fine, but sites like that tend to slow down if Firebug's looking at them. Load up those sites, right-click the Firebug icon at the bottom right of your browser, and choose "Disable Firebug for [sitename]".

---