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.
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 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.
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.
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.
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.
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.
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.
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!
Updated: Dec 4th, 2010