« The things you can hold in a book | Main | Haile in New York »

Firebug and page layouts

Since the holiday weekend, the only thing that’s really going on around here is work. Common Kitchen is evolving like a weed in its Subversion repository, with 236 revisions as of right now and well over 200 tickets in Trac. We’ve become obsessive about closing tickets, and since we implemented Trac’s milestones feature, watching the roadmap.

Our decentralized working pattern means we don’t spend a whole lot of time looking at one screen and talking about how things look, and there are a lot of tickets saying things like, “That green went away? What happened?” Last night I spent 45 minutes tracking down a CSS bug, and part of that time was finding the right tools to diagnose the problem.

Let me save you some time. The tool is Firebug. Firebug is a plugin for Firefox which opens a bottom-of-the-browser window allowing you to browse page source (in the same sort of collapsible-tree format as Firefox’s DOM inspector), highlight portions of it, and see which CSS rules apply to that chunk of code, in order from strongest to most distant inheritance. In other words, it lets you back-track up the cascade. Rules which are overridden are shown, but struck out, so you can pick them out as well.

By showing me that some rules simply weren’t being applied, I was able to go back to the CSS validator to figure out what was buggy about my stylesheet, and solve the problem. And now that I know how to attack the problem, I find myself popping open Firebug all the time to check out why things are doing what they’re doing. It’s a neat idea, and a very helpful one.

Now Playing: Paralysed from Nowhere by Ride

Technorati Tags: , , , ,

Post a comment