I use Firefox and many extensions everyday to help speed up the development process. These extensions are tools for web developers and they help me provide my clients with high quality development that would be costly if these tools did not exist.

ColorZilla

Just like Photoshop’s “eye dropper” tool, this tool enables you to find a color on a website. It also has an auto copy feature that copies the hex color. It has a bunch of other features to do with colors and websites.

Firebug

*Favorite.  One of the most robust extensions in Firefox for web development.
Some things this is used for:

• Finding where I missed ending div tags with the HTML viewer
• Developing AJAX with the DOM viewer and console view.
• Measuring load times to help find objects that are large downloads
• Previewing CSS changes
• This tool has many more uses, in fact to many to list check it out!

YSlow

An extension to Firebug that analyzes a page to give it a grade on how well it loads for the user. It also explains the grade in several sections and how to fix them.

HTML Validator

A quick way to see if your page validates without touching anything! It either shows an X or a check mark. It is still recommended that after you validate with this, you check to insure it validates with the W3C validator as there may be some inconsistencies.

IE Tab

This is one really simple tool. Whatever your version of IE you are running it will use it and render it through Firefox. It is super easy, just click a button and you have activated it for the tab you are on.

SearchStatus

Very small display for PageRank and Alexa ranks. PageRank is how Google ranks individual pages on your website. Alexa is how the website ranks against all of the other websites. This is just to get an idea of how much traffic hits a website and the pages on the website so you can optimize them accordingly.

Web Developer Toolbar

*Favorite. This is a collection of tools that will make you wonder how you survived developing without them.
Some things this is used for:

• Resizing my window to standard resolutions to see how accessible the website is.
• Disabling the style sheets to see how readable the page is.
• Quickly disabling JavaScript.
• Populating form fields.
• This tool is a must have! Download the extension and checkout the massive amount of tools it has.

Xmarks

Syncs firefox bookmarks and saved passwords between any computers I install Xmarks on. This is really useful if you work at different places and frequently type in passwords for CMS systems, store fronts, and just about everything. It also allows me to bookmark things and organize them in folders and it syncs them automatically.

Google Gears

Allows me to read/write mail while the internet/gmail is down. It also lets me access google docs and a few other websites.  It also speeds up these websites because it put’s everything in a database for faster access.

Am I missing any totally awesome Firefox extensions that you use for web development? Are you missing one of these amazing tools? My next blog will be on the desktop tools I use for web development.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.