Top Firefox Add-ons You Can't Live Without

There are Firefox add-ons out there for developers, but which ones are the best of the best.  The kind of add-on you use on a daily basis, and can't live without as a web developer.  These are 5 add-ons you can't live without as a web developer.

1. Firebug

Firebug is hands down the best add-on out there for developers.  It allows you to edit, debug, and monitor CSS, HTML, and Javascript live on any web page.

It also provides the ability to view all requests processed during pageload, warning you of any broken images or references.

Firebug also is an add-on for Google Chrome called Firebug Lite for Google Chrome.

2. Web Developer

Web Developer is an add-on that really does a great job of combining alot of helpful add-ons into one.  Some of the features include: disabling cache, disabling javascript, disabling cookies, live css editing, window resizing, element outlining, and ruler measurements, to name a few.

The author also makes an add-on for Google Chrome: Web Developer for Google Chrome.

3. Pagespeed

Pagespeed is an add-on for evaluating the performance of a web page and offers suggestions on how to improve them.  Pagespeed does require that you have Firebug installed.

I wrote a pretty lengthy post on this add-on called Speeding Up Your Website with Google Page Speed, which gives you a quick tour of the capabilities of PageSpeed and how to use it.

4. YSlow

YSlow, is very similar to Pagespeed in that it evaluates the performance of a web page and offers suggestions on how to improve them.  However, YSlow considers a whole slew of criteria that PageSpeed does not, and vice versa.  So I suggest using both add-ons.

5. ColorZilla

Colorzilla is a fancy add-on that lets you retrieve any color in your browser.  Simply click the color tool and mouse over any color you want to retrieve in your browser window and click.  It saves the color, so you can copy and paste the color into any other program.  It also allows you to zoom the page you are viewing and measure distances between any two points on the page.

5. FireQuery

FireQuery is a Firefox extension integrated with Firebug.

• jQuery expressions are intelligently presented in Firebug Console and DOM inspector
• attached jQuery data are first class citizens
• elements in jQuery collections are highlighted on hover
• jQuerify: enables you to inject jQuery into any web page
• jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)