Firefox Extensions: The Must Have's for Developers

When developing web sites, there are some tools that developers find invaluable in their development efforts. When working on web sites, I develop in Firefox, because of the wonderful ability to use ad-ons with it. These tools make it so much easier to find bugs and to make things work the way I want them to. Below are my favorites.

1. Web Developer: I've been using this tool for years now. It is a collection of a bunch of tools all in one location and allows you to see outlines of various blocks, information about different elements, and so much more. I highly recommend having it available if you do any web development work.
2. Firebug: This is my new favorite tool. It is a debugging tool that allows you to inspect various aspects of a web page. You can then make changes to the site live, such as changing, adding, or removing CSS or HTML code to see how it will affect the site.

   It also has several tools that can be added on that you might find useful. These are the three I use:

   • YSlow: Yahoo has some specifications they list for making a fast loading web site. This will give you a list of why a site might be running slowly. You can then choose which to change to make it run faster. Yes there are websites that do this, but having it in the console is nice.
   • FireCookie: Allows you to inspect, add, delete and change cookies on a site. If you are working with cookies, this tool makes troubleshooting so much easier.
   • FirePHP: My sites are all PHP based. With this tool, I add a little code to my site and then the PHP log is send to the Firebug Console for me to read. A real time saver.
3. ColorZilla: A simple color picker tool. If you need to know what the color is, just turn it on, mouse over and look at the status bar. It will display RGB, HTML # notation, and what element is setting the color. Will pick anything on the page, including within images.
4. HTTPFox: This is a new tool for me, but I like it. I turn it on and it allows me to see the HTTP Headers live. It only collects data when you tell it to, so the data does not get overwhelming. Now there is no guessing at what data is being posted or what headers are being interpreted. It also does cookies, so you might not need the FireCookie extension.
5. MeasureIt: This cool tool allows you to measure an area. You click to turn it on and then click and drag to measure the region and it returns width and height. Simple, yet useful.
6. SeoQuake: This is an extra. Not really a developer tool, but many times you also need to think about SEO as you work. This tool allows you to see, all on one bar, the Google PageRank, Google Index, Yahoo Links and Link Domain, MSN Index, Alexa Rank, Site Age (using WayBack Machine) and more. You can add other extensions to it as well.