God I love Firebug

So I’ve been tweaking our intranet instance of Drupal this week trying to make improvements to the interface and display. In particular I’ve been customizing several templates related to the Event Module. I don’t like how the calendars display because I think they include some redundant information and don’t use the space effectively. The problem is that when you are changing templates in Drupal particular CSS related changes, lots of potential files come into play. This is in part due to the modular construction of Drupal. So when a page loads several stylesheets come into play: the ones from all the modules you have installed, and the stylesheet from your theme. While this is great in theory because it makes the styles build on top of one another, it can make debugging a little challenging because you’ve got several stylesheet to look at. The solution? Most Drupal developers will tell you to use the Devel module. This is a fabulous module which is really helpful when you are developing in Drupal, particularly for creating themes or creating/changing templates, it is sort of slight overkill for simple CSS debugging.

A much better solution and one which is multi-purpose is to use Firebug. Firebug is a Firefox extension which helps you to test and debug CSS and javascript. Using the Inspect button, you can select a particular element on the screen and see what styles are being applyed to it and what files contains those styles. You can also dynamically turn on or off styles to see if this affects the change you want without having to edit the CSS. Its a fast and efficient way to debug stuff. It has many other features that my developers love but for me when they showed me the CSS debugging I was in heaven.