Firefox is the browser of choice for a huge number of web designers and developers because it is open source and extensible. It is possible to write extensions which enables the user to create features that are not available by default. For those who cannot write these extensions, there is a rich pool of free ready made extensions already available. Some of these extensions enable us to do a fair amount of web design and development without the use of IDEs, without leaving the browser.

Here, I present a simple checklist to help you configure Firefox for Web Development. I am sure that most web developers and designers out there use most of these extensions already. This serves a checklist for me to quickly configure a machine which is not set up the way I want it, when I have to work on it. I hope it will be useful to others as well.

Firefox extensions are available in abundance. A downside to this is that soon, these extensions start taking a toll on the performance of the browser. A way to counter this would be to use separate profiles for different tasks.

You can create separate profiles by running the profile manager. Exit Firefox. Start > Run > firefox.exe -ProfileManager

Create a suitable profile name (for example, webdev). You might want to enable the Don’t ask at startup checkbox. Note that you will have to import your bookmarks for the new profile. You will have to setup other customizations (start page, toolbars etc) also once you create the profile.

You can launch different profiles using the profile names in shortcuts. For Example
“C:\Program Files\Mozilla Firefox\firefox.exe” -P webdev -no-remote
The no-remote keyword here, enables you to run firefox with multiple profiles in the same instance.

The web development profile will use a certain number of extensions to enable you to work efficiently on your web pages.
Here is a checklist of extensions you can use in alphabetical order with their links. You can get more detailed information for these extensions and also the latest versions.

1. Aardvark
2. Clear Cache Button
3. Colorzilla
4. Dummy Lorem Ipsum
5. FEBE
6. Firebug
7. FireFTP
8. Greasemonkey
9. HTML Validator
10. IE Tab
11. Measure It
12. OperaView
13. Restart Fox
14. Safari View
15. Screengrab
16. Tab Mix Plus
17. View Source With
18. Web Canvas
19. Web Developer
20. YSlow

This is a very basic setup. Depending on what you wish to accomplish you can add more relevant extensions.Once you have setup your web development profile. You can use the FEBE extension to back up your configuration. A big thanks to all those talented and generous developers who have given us these extensions and of course, to the Firefox team for creating a superb browser.