Firefox Extensions for Web Developers

Firefox is my development browser of choice, and has been for a long time (since Firebird 0.6 from what I remember). The browser on its own has a basic set of tools for debugging but with extensions you can turn it into the perfect tool for developing websites.

Note: This is in no way a comprehensive list; there are hundreds out there to choose from, these are the few that I use every day. You only need to take a quick search of delicious to find “X number of Firefox extensions you must use!!” lists; I’m not a big of those types or posts as they all seem to post the same info.

Firebug

I think every Web Developer has heard of Firebug; I honestly can’t remember how I managed to get anything done before I started using it, it’s such a time saver. It comes packed with useful tools like a HTML inspector, CSS inspector, JavaScript debugger and website performance analysis (Net tab). You can even extend it’s functionality using plug-ins e.g Firecookie and ySlow.

One word of warning when using Firebug; make sure you disable / close it when you aren’t using it as it will increase page render time massively.

Web Developer Toolbar

Yet another tool that most Web Dev’s must have heard of as it is such a brilliant extension. There are way to many features to list here but my personal favourites are: quickly disable/enable JavaScript, view alternative media stylesheets, view page document size, display line guides and resize the browser window to a specific resolution. Most of it’s functions I’ve never used but you never know when they may come in useful; download the Web Developer Toolbar.

Colorzilla

Colorzilla is one of those extensions that you don’t realise how much you use it until it isn’t available to you. This little tool allows you to hover over any colour (color) on a page and it will give you the corresponding Hex / RGB value. Great for when you don’t want to go hunting through a stylesheet for the colour.

It has a few options I very rarely use such as the colourpicker and the ability to save favourite colours, I prefer Photoshop and a notepad to be honest but each to their own I guess.

FireFTP

For a long time I was a FlashFXP user; that was until I stumbled upon FireFTP. The extension embeds an FTP client directly into a Firefox tab! My favorite feature (which is in most FTP clients) is the ability to keep local and server folders in sync. It’s also possible to drag files directly from a folder on you computer straight to the server (not vice versa though unfortunately).

One feature I wish it had was the ability to ignore certain file types when uploading e.g. .svn folders. It’s possible to get round this issue by hiding hidden files / folders; then of course you fail to upload the hidden .htaccess file and break your URLs…. oh well not a bad compromise when it’s free to use (the author does accept donations which go to a generous charity for children).

Fireshot

Fireshot is one of many screenshot tools available for Firefox; it comes in both free and pro versions, but I’ve never needed any of the pro features. Gone of the days of pressing the “Prnt Scrn” button and stitching long pages together, Fireshot does it all for you. Another great feature is the ability to screenshot Flash on a page which doesn’t usually show up using print screen.

HTML Validator

My final extension is HTML Validator, this places a small icon in the bottom right of your status bar and tells you when it runs into invalid HTML. Now I don’t always use this but its good when you are editing large pages and your layout is breaking due to a missing closing tag; it may not solve the issue but it will give you a line number of where to start looking.

I would recommend disabling the plug-in by default then creating a ‘whitelist’ of sites you wish it to be enabled, as it can seriously slow down your browser.

If you have any recommendations for extensions let me know, maybe I’m missing a treat in that “must use!” extension.