Firebug is Your Best Friend
February 14, 2010
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]”.