Firebug, Firefox Add-on (Debug HTML & CSS)

Today’s post is for anyone who has ever tried to layout a web page and ended up clutching handfuls of their own, rootless, hair while weeping and thumping the table.  This Firefox extension is a tool so useful that it has already saved my life 3 or 4 times this week.


Well.  The problem is CSS, basically.  We aren’t supposed to use tables for layout anymore and I’m fine with that.  CSS is pretty cool for most things and I’m all for standards compliant design.  One of the things we’ll be using this blog for is introducing our customers to some of the tools and approaches that will add to their site and those that beginners tend towards that don’t really help.  I love CSS but that moment where it’s all going wrong and your conception of what “float: left” means and Internet Explorer’s just aren’t on the same wavelength is just hell. 

You’ve checked everything and you’re staring straight at the relevant bit of your stylesheet, adding up width’s in your head and convinced everything is fine.  Despite all this, your right hand column is nowhere to be seen and your images have no spacing.  If you’ve been doing this for a while you’re probably thinking, “This would be so easy in tables” and hating yourself for it.


Never fear.  The solution is here and its name is Firebug.  It’s not the first developer centered add-on for Firefox, just the best one I’ve tried so far.  Firebug allows you to debug your CSS, HTML and Javascript, live.  Got some irritating layout issue that you just can’t track down?  Install this baby and walk down through the HTML as you’re on the page.  Find the section that you’re interested in and see its block highlighted on the main page together with margins and padding and see all CSS that controls the element in question.  The ability to see what properties are inherited from where while getting a visual representation of the block and its margins and what elements are breaking out of their containing blocks.  It’s priceless.  And I’m probably nowhere close to exploring the things this add-on can actually do.

Firebug in action

Firebug in action


If this has all gone over your head and sounds like Geek talk, then sorry.  All it means is you haven’t had the misfortune to try and layout a HTML page.  Just skip this post and the other “tools” type posts and you’ll know where they are if you ever need them.

I’d like to say thanks very much to Practical Ecommerce, the site that introduced me to Firebug in their Firebug review.

If you want to check out Firebug yourself, here is the Firebug download.


Tags: , , , , , , , , ,

Comments are closed.