Firefox Extensions for Web Developers 2010

Even though I use Google Chrome as my primary browser, Firefox is my browser of choice for web development - thanks to its wonderful extensions. This post will be useful to you if you are new to web development and want to know some of the best firefox extensions for web development. 

All the recommended extensions on this page are available in one place as a collection - Devnetfx Web Development

If you are short of time, you need to know just the following two extensions and you will be fine for 90% of your development - Firebug and Web Developer

Web Developer - Web Developer is the plugin of choice for style gurus. The toolbar gives you a lot of options for inspecting, validating and optimizing web-pages. 

Firebug - If Web Developer is the tool of choice for style gurus, Firebug is the tool of choice for back-end developers. It becomes a must when you are doing Ajax debugging. It allows editing, debugging, monitoring CSS, HTML, and JavaScript. Firebug is powerful by itself, but when you add other extensions like YSlow, XRefresh, Firecookie etc., it is unbeatable.

Other Extensions

View Source Chart - I love this extension because it allows you to see DOM structure visually.

MeasureIt - This extension sits in one corner and its when I need to check height and width that I call my friend.

ColorZilla is just like MeasureIt - does its job well and quickly. It is Advanced Eyedropper, ColorPicker, Page Zoomer.

iMacros For Firefox - Allows you to automate Firefox. Record and replay repetitious work. Recently I was doing some artwork uploading at a client which involved a combination of UI steps. Thank God I knew about iMacros for Firefox!

Html Validator adds adds HTML validation inside Firefox. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.

YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites. PageSpeed from Google is another one which does the same job of analyzing web pages for performance issues.

FireShot creates screenshots of web pages (entirely or just visible part). I just use the basic version and it does my need for taking snapshots easily.

XRefresh does the job of browser refresh for web developers (integrated into Firebug) You need to download software from binaryage to use it. With most developers using two monitors, it becomes an essential utility to see results instantly.

Dummy Lipsum generates "Lorem Ipsum" dummy text from http://www.lipsum.com.

Firesizer allows you to resize the window to specific dimensions - quickly.

X-Ray When I am too lazy to inspect using Firebug and Web Developer, X-Ray allows me to analyze page quickly.

Notable Omissions -
GreaseMonkey GreaseMonkey is one of the most downloaded extensions and it allows you to customize the way a webpage displays using small bits of JavaScript. Perhaps I will find some scripts to start using it in future.

Resources

The Best 50 Firefox add-ons for Web-developers! has a lot of good suggestion. Apart from XRefresh, View Source Chart, ShowIP it covers a lot of ground.

Firebug Extensions page has a list of extensions for firebug. Some firebug extensions are situation specific like FirePyhton, ColdFire etc. and some are generic which can be used in most cases like YSlow, FireFinder etc. I would recommend you to have a look and see if you can find some that meets your needs.

All the recommended extensions on this page are available in one place as a collection - Devnetfx Web Development. I hope you found some useful extension which will make your life easier as a developer.