If you spend any time coding CSS from scratch or debugging existing stylesheets, you know how tricky it can be to find that pesky error! Whether it is getting IE6 to play nice or just understanding where all that white space is coming from, these Firefox add-ons should help you do the job better and faster. I’ve only chosen a couple of my favorite add-ons and my favorite features of each. Feel free to include your favorite features or add-ons in the comments as this list is anything but exhaustive.
The Web Developer Toolbar by Chris Pederick has many useful features like an easy-access javascript disabler, a simple window resize to test 800×600 screen resolution, and an option to view all of the stylesheets associated with a page (easily searchable!).
One of my favorite features, however, is surprisingly simple and incredibly useful. Using the Outline menu, you can outline any block level element on the page with just two clicks of the mouse. Personally, I can end up spending minutes of wasted time adding borders to elements here and there trying to figure out why I am seeing too much or too little space in a certain area. No need to do that anymore with this feature. It outlines your div tags for you, making spatial debugging a much simpler and faster process.
My other favorite feature in the web developer toolbar is the quick access to the W3C XHTML validator. It will upload your local file and display your pass/fail status quickly and efficiently!
Next on my list is the Firebug add-on which again, has a wealth of useful and time-saving debugging tools. My favorite, by far, is what I’ve coined as their CSS specificity revealer. Ok, you got me, I just made that up. The feature I’m referring to goes something like this:
1. You add some CSS rule
2. Your CSS rule doesn’t work
3. You can’t figure out why it doesn’t work
4. You wish to yourself there was some tool out there that could tell you if someone wrote a rule that is somehow overriding your own
5. You realize that firebug has that very feature and you’re going to use it now!
Launch firebug after you’ve installed it and click the “Inspect” button at the top of the console. Now, watch the Style panel on the right hand side. As you mouse over different elements on the page, you will see which rules apply to which elements. You will also see which rules are being overridden by others as evidenced by the line through.
For instance, in the above example, the #description rule is overriding our normal <p> tag line height of 1.4em because #description is an ID (which will always have a higher specificity than a non-ID rule).
Personally, I think this feature of firebug makes it one of the best CSS debugging tools out there.
And remember, feel free to leave me some tips and tricks in the comments section if you have any!
Leave a Reply