Wednesday, 20 June 2007

Essential Firefox extensions

When working on websites I've tested them in Internet Explorer and Firefox for some time but until recently still used IE as my main browser. A couple of months ago I decided to take the plunge and switch completely to Firefox. There are so many things that make Firefox better than IE, especially for web development. What follows is a list of my current favourite extensions:

Spell checking
I always found it ridiculous that IE doesn't have a built in spell checker. Firefox has many languages available for download so you can add spell checking to your web forms.

Firebug
This is probably one of the most useful tools I have come across for web development. It allows you to inspect and edit CSS, HTML and Javascript on-the-fly directly in the browser. I find it particularly useful for debugging CSS layouts when I'm just not sure where a mysterious 50 pixel wide gulf between elements has come from.

Flashblock
Flash adverts can be very annoying when I use RDP to connect to my desktop remotely. This extension lets you decide whether or not to run them.

Greasemonkey
Greasemonkey is an extension that allows scripts to edit the way pages look. For example you can add extra links to ebay that only show negative feedback, or perhaps show a clock counting down to the end of the auction. There are hundreds of free scripts for all kinds of popular websites available at http://www.greasespot.net/.

IE tab
Firefox is great but sometimes you need to check a page in Internet Explorer. To avoid the sick feeling clicking the blue 'e' icon produces IE tab allows you to render pages using the IE engine within a Firefox tab. It also allows you to set certain sites such as Windows Update to always open in the IE engine.

Web Developer toolbar
This is a Firefox toolbar with various useful options. Similar to Firebug it reveals the structure of the page and has lots of handy features for working with forms and images.

Fiddler
Not really a Firefox extension but hugely useful, Fiddler is a free HTTP debugging proxy. Basically it sits between your browser and the server showing you everything your browser requests and allowing you to "fiddle". You can view anything from raw hex, to XML to an image as well as build requests. It's invaluable for troubleshooting all kinds of web applications and also just exploring how they are put together. Whilst being Windows only (it's from Microsoft) there is also Charles for OS X.

1 comment:

Derek Fowler said...

Firebug's Net tab has some limited XMLHTTP sniffing stuff too. Usefully it's split into HTML, CSS, JS, XHR, Images and Flash with an option for showing everything.

Firebug's not far off being the definitive Web Development debug tool; now Yahoo! have created a position for someone to solely work on it hopefully it should see some considerable improvement in future versions.