Get firebug

Sunday 4 February 2007

For the longest time, I've struggled with the CSS that styles this site. It has grown organically, which is a nice word that means "without thought". It had gotten to the point where there were too many rules affecting too many elements, and I couldn't make a change without some unpredicted part of the page looking very wrong. I could see the effect my changes had, but I couldn't see why they did.

I was using Firebug, an awesome Firefox plugin that shows you the CSS in effect for an element. But I still couldn't see the chain of causation that got me where I was. I was using a recent build (0.4.1), but it turns out that Joe Hewitt had been a busy boy, because version 1.0 of Firebug is now available.

The leap in version numbers from 0.4.1 to 1.0 was entirely justified. If you'd been using Firebug and liked the way it was going, you have to get 1.0, because it looks like Firebug times ten. The killer feature for me is the CSS panel which shows what styles are in effect for the selected element, including all of the inherited styles, and which rules are overridden. Using this tool, it was straightforward to see what rules were affecting my layout, and to clean things up.

But there are a ton of other tools in Firebug: layout visualizers, rulers, Javascript debugger, network analyzer, etc, etc, etc. It really is amazing what's packed into it. If you're doing any sort of web development, you need to Get Firebug.

Comments

[gravatar]
Sam 10:39 AM on 4 Feb 2007

Amen. I use Firebug very regularly, and I would be an unhappy man if forced to develop without it.

[gravatar]
Doug Napoleone 11:07 AM on 4 Feb 2007

I also highly recommend Web Developer and HTML Validator (Tidy based) (does CSS as well).

It's all about Web Developer + Firebug. The sum is much greater than the parts.


There are times when Web Developer is MUCH MUCH better than firebug. I have a custom middleware for django which adds infromation to the http response header. I can use WebDeveloper to look at these headers. The 'Display Element Information (Ctrl+Shitf+F)' is crucial to help you find stuff using the Firebug DOM browser. The ability to turn on and off CSS, do CSS editing and other elements makes tracking down problems much easier.

The validator speaks for its self.

Writting a dynamic app like the PyCon schedule was a nightmare enough with them!

[gravatar]
Chet 3:42 PM on 4 Feb 2007

Firebug saves me every time - and usually from my own poorly recollected\documented css designs.

[gravatar]
Bob Congdon 1:41 PM on 5 Feb 2007

Firebug works great with one caveat. On my laptop it wouldn't display CSS content. According to the Firebug FAQ this is likely due to an upgrade from Firefox 1.5 to 2.0. The only documented fix is the reinstall FF and plugins.

Add a comment:

name
email
Ignore this:
not displayed and no spam.
Leave this empty:
www
not searched.
 
Name and either email or www are required.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.