The popular Firefox web development extension Firebug does some pretty cool stuff out of the box: Debug JavaScript, tweak the CSS, and see all the network traffic.

Firebug extensions are a sort of meta-extension that lets you add on to Firebug. Developers are adding some features that we’re starting to find hard to live without.

Here we’ll lay out our five faves.

1. YSlow

We’ve written about YSlow before. It measures your site’s speed against Yahoo’s rules for high-performance websites. It generates a little report card that analyzes your page’s events and components, pointing out which pieces of the page are causing the most problems.

It’s worth a glimpse into YSlow from time to time, even if you feel like your site is performing well. You may still find improvements to make, and if not, at least you’ll pat yourself on the back with your good score.

Download YSlow

2. Firecookie

Firecookie shows all the cookies being accessed by the current web page. You can see when one has been changed, and you can alter your cookie settings for accepting or denying cookies right from the Firebug panel.

I like the cookie access in Firefox 3’s new Page Info screen, but pairing cookies with Firebug just makes sense. One of the best things about Firebug extensions is that they can bring all your debugging to one place.

Download Firecookie

3. FirePHP

Speaking of bringing all your debugging to one place, I never would have imagined I needed FirePHP, but now I love it. It brings PHP debugging into Firebug using special “X-FirePHP-Data” headers that are invisible in the browser. FirePHP requires a PHP library to send the debugging messages.

There’s a similar extension for Cold Fusion called ColdFire. We haven’t tried it, and they aren’t listed on the Firefox extension site, so proceed with caution.

Really, there’s no need to have a different extension for each programming language. I’d rather see a standard, language-agnostic version. Then, any language could send header data to Firebug.

Download FirePHP

4. Pixel Perfect

Okay designers, this one’s for you. Pixel Perfect helps you create designs that are just right. You can overlap a partially transparent mockup above your actual web page. Then use Firebug’s standard CSS controls to find just the right settings to make the design pixel-perfect.

Download Pixel Perfect

5. Rainbow

First a warning: Some people have experienced problems with Firebug when using this extension. It’s worked fine for me.

The aptly named Rainbow color-codes your code. For example, JavaScript variables are green, reserved words are blue. The coloring is sure useful when you have hundreds of lines to read.

Download Rainbow

If you’re interested in more Firebug extensions, Jan Odvarko keeps a list of them. Of course, you could also write your own Firebug extension.

See also: