Brother-in-law Don added Firebug to my Firefox browser when using my computer awhiles back. He told me something about Firebug being a tool that could help me troubleshoot web design issues and/or figure out how an element that I like on someone else’s web page is coded. Sounded pretty good!

I haven’t had the need to play with Firebug until this week though, since I spent most of late 2008 getting intimate with my sewing room. But this week I enabled the Firefox add-on to help me customize a new WordPress theme I’m working with and WHA-HEEEEEE!!! The thing is awesome. I so wish I’d had it before because it saves a CSS rookie like me loads of time identifying which CSS style controls what element on the page.

Here’s what it looks like (at least the way I use it):

I click the little Firebug in the lower right corner of my browser, and Firebug sort of superimposes this control window over my web page. So then, say I want to change the color of my post titles. I click on “Inspect” in the Firebug window, then I hover over the “Happy 2009!” post title. When the little blue box is over the element that I’m interested in, I click on it. Firebug shows me the HTML source for that header on the left, and the CSS style for it on the right! In that same area, if I were to hover over “color: #000000;” I would see a rectangle showing the actual color that this value is (in this case, black). Ooooh.

But that’s not all. If I were to say, hm I wonder what the post title would look like if I changed the color to #FFFFFF, I could just edit the color in the style window, and the text would turn white! Considering how slow my connection is sometimes, this feature alone makes it worth having the tool. No more navigating to the stylesheet, making the change, saving, waiting for the save to finish, waiting some more for the save to finish, then refreshing the page to look at my change…only to find that dangit, it looks better in black! And going through the process all over again.

I know I’m barely scratching the surface with what Firebug can do, but the few things I do use it for so far are indispensible. Just wait til I learn the keyboard shortcuts.

For a more thorough description and screenshots of the CSS and HTML development benefits that Firebug provides, see Firebug’s pages on:

• CSS development
• HTML development

Similar Posts:

• Time for a facelift
• New bells ‘n whistles on the site

Popularity: 2% [?]