I had assumed that everyone on earth knew about the Firebug extension for Firefox, but I keep seeing a common story on #wordpress: people fighting with CSS problems that they just can’t track down, but which Firebug lets me find in seconds.

Firebug is what the Web Developer extension was heading towards: a complete, live-editing HTML and CSS editor embedded in the browser. Make a change in the HTML or CSS of a site and the change is reflected immediately in the browser. Turn individual CSS elements on and off, add and change properties (with autocomplete!) with a click. Debug and profile Javascript, see a graphical representation of page load times (and view requests and response headers for each request involved in building the page!), see graphical representations of CSS element/padding/border/margin metrics, inspect the DOM and more. The screenshots on their website are a great tease about what Firebug’s capable of.

Outside of a great set of major features, Firebug gets the user interface right too. Mousing over an image filename in CSS shows you a thumbnail of the image, and same with color identifiers. HTML and CSS editing lets you edit the minimum chunk you need, not an entire source file. Mouse over elements in the rendered HTML and they’re highlighted in the source. When debugging metrics, actual rulers appear on the top and right side of the element being inspected!

If you do any web development at all — even if it’s just working on your own homepage or LiveJournal style — you should really give Firebug a try. You’ll quickly forget how you ever got by without it (and curse the high heavens whenever you have to do Ajax-y debugging in Internet Explorer!).