Steven Benner's Blog

Mozilla Firefox is by far my favorite web browser. It is secure, feature packed, and very well maintained with a great community behind it. It is also the web developers’ best friend, with tons of built-in tools and user created add-ons to help people creating web sites. In my opinion, because of the array of tools available and the quality of the product, every web developer should already be using Firefox as their main browser.

This is an arbitrary list of my favorite Firefox add-ons for web development. These tools have fundamentally changed how I design and develop web pages. With these tools I can accomplish tasks in minutes that would have taken me hours just four years ago.

Firebug

This is the end-all-be-all tool for web development and design. If you don’t already have it you are missing out on what every other web developer in the world discovered years ago.

The Firebug add-on gives you a look into how the page is really rendered. You can view the fully rendered markup, get style information for any element, view JavaScript and DOM events, edit markup, run custom JavaScript, edit and add CSS, and it even has a decent page load timer that gives you an idea of how long the different objects and includes take to download and parse.

https://addons.mozilla.org/en-US/firefox/addon/1843

YSlow

The YSlow add-on is a site optimization tool created by Yahoo. It gives you far more detailed information about page loads based on Yahoo’s optimization “spec”. This add-on will give you a rating based on a number of optimizations that Yahoo has found make pages perform better and lower load on servers. It gives you a report for each possible optimizations and suggestions for improving any areas that are lacking.

https://addons.mozilla.org/en-US/firefox/addon/5369

PageSpeed

Google responded to Yahoo’s YSlow add-on by creating PageSpeed, which has a lot of the same features but brings a few more tools to the table. PageSpeed is no where near as pretty or intuitive as YSlow but provides some other optimization information that YSlow does not, such as minifying CSS and JavaScript, image crunching and CSS optimization. This is a great tool, not to replace YSlow, but to be used along with it.

http://code.google.com/speed/page-speed/

Web Developer

The Web Developer add-on takes the form of an ever-present toolbar, ready to help you in a number of unique ways. You can view the page under different browsing conditions, view information and layouts about the page, and highlight code details on page. This doesn’t get as much regular use as the other add-ons, but its features are unique, so when you need it, it is the only option.

https://addons.mozilla.org/en-US/firefox/addon/60

Tamper Data

This is one of the more technical of the add-ons, a fool for viewing and modifying browser requests and HTTP headers. This is another one that I don’t use very often, but when you need it, it is exactly the tool you need. You can see exactly what connections are being made, what files are being downloaded and the server responses to the requests.

https://addons.mozilla.org/en-US/firefox/addon/966

ColorZilla

One of the best tools for getting exact color codes, ColorZilla is an eyedropper tool for your browser. If you’ve ever seen a color that you wanted, even if it is an image, a piece of a gradient, or the effect of a transparency, this tool will tell you the exact color that you are seeing. It will provide you with a copy and paste RGB code that you can plug into CSS or Photoshop.

https://addons.mozilla.org/en-US/firefox/addon/271

ScreenGrab

Get real page screenshots with ScreenGrab. This awesome tool will give you a full page screenshot in PNG or JPEG format. Not only a great tool for demoing designs, you can make a quick fix on a live page with Firebug then take a screenshot to confirm that this is what the client wants. I also use this as a way to keep online receipts and order confirmations. Save full page and I have all of the information in one perfect file.

https://addons.mozilla.org/en-US/firefox/addon/1146

MeasureIt

Ever need to figure out how many pixels wide something on a page? This add-on is a simple box tool that lets you figure out the exact dimensions of anything on a page.

https://addons.mozilla.org/en-US/firefox/addon/539

Am I missing something?

Do you know of any add-ons that should be on this list? Please let me know, I am always looking for hot new tools to simplify development and reduce my dev time!

By: Steven Benner
Updated: Dec 4th, 2010