My Drupal Blog

This post really only needs to be two lines long.

Line 1 – Download and install Firefox
Line 2 – Install Firebug

This point may not need making for a lot of people and so to them I apologise, but it’s worth making anyway because Firefox, and the extensions which one can use with Firefox, really can make a Drupal themer’s life so much easier. And even if only a couple of people who weren’t using these tools before reading this post start to that’s got to be a good thing. It’s also worth making this point because it’s easy to forget just how impressive Firebug really is.

Before Firebug, the Web Developer’s Toolbar was the long-time king of Firefox extensions for web designers. It installs a neatly arranged toolbar packed with useful stuff. If you don’t have this extension it’s definitely still worth getting as it has some nice features such as local validation checks, the ability to identify the exact size of any fonts, and an option to view the complete CSS of any site. But in terms of debugging, nothing today quite matches up to the power of Firebug.

Basically, Firebug has a series of very cool features which allow you to easily identify what various elements of a webpage are doing. There are a number of different ways you can configure the Firebug interface depending upon your particular preferences, but for my general XHTML/CSS debugging purposes I have a simple split pane setup. On the left is a breakdown of the XHTML and on the right a listing of whatever CSS relates to the chosen XHTML I select in the left hand pane. This alone is handy for Drupal themers as we are almost always going to be dealing with multiple style sheets, and Firebug neatly shows you what rules are being applied to an element, where they are coming from (i.e. which style sheet), and whether they are the dominant rule or have been overridden by another rule. But without doubt my favourite feature is the ‘Inspect’ button. To use this feature just open up Firebug, click ‘Inspect’ (just under File), and then hover over a webpage in Firefox. Firebug puts a blue bounding box around whichever element you are hovered over and at the same time sorts through the XHTML/CSS in the Firebug window allowing you to quickly drill down to specific elements. You can also go back and hover over the XHTML part of the Firebug window and it will show a highlight on your webpage for whichever element is selected, with different color highlighting for padding and margins – very impressive.

I could go on about how good Firebug is for a little while (because I’m cool like that ;) ), but undoubtedly the better choice would be for you to just go and download it, use it, and see for yourself – simple as that.