When properly configured, Firefox can become the ultimate web development tool, giving you direct access to the page you are working on so you can style your page in real-time, debug javascript or even edit the html.

Create Separate Profile for Web Development

Installing all of these development tools will make Firefox into a very heavy browser, so we should first create a new profile for Firefox.

You can launch a separate profile at the same time as your regular profile by creating a new shortcut with these arguments, replacing WebDev with the name of your profile. There’s also a more detailed explanation of how to do this.

firefox.exe -P WebDev -no-remote

Now that you’ve got Firefox configured with a separate profile just for web development, let’s take a look at the extensions we can use to make Firefox into the ultimate web development tool.

Must-Have Web Dev Extensions

These are all extensions that I use on a regular basis for web development.

Firebug is the most powerful extension for debugging javascript, viewing CSS and html. You can make dynamic changes to the code and CSS, and use it to debug your Ajax code. It’s truly the best extension out there.

This extension is a very lightweight extension that will easily show you the elements on the page and their assigned class/id. It’s simpler to use than the web developer extension for those times when you just need the quick info for an element. You can also use it to remove elements from the page.

The YSlow extension is a new extension from Yahoo that will analyze your page and tell you where you are making mistakes. It’ll even give you a grade on your site performance. You’ll notice the little gauge in the lower right-hand corner… it tells you the total size of your page as well as the load time. Very useful extension, but it does require the Firebug extension.