So if you’re a web developer you’re using Firefox right? Why? Well it offers great standards compliance and a ton of useful add-ons for web development. Here are the add-ons that adorn my browser and make my life as a web developer a whole lot easier.

Firebug – This is the most important one. When it comes to markup and CSS I pretty much live in Firebug. Particularly great for debugging CSS and Javascript problems. It includes a Javascript console, context sensitive HTML and CSS source inspection and super useful request logging for debugging those pesky AJAX problems. It does a whole lot more but they’re the tools I find most useful.

Web Developer Tools – This offers a huge number of functions. It’s difficult to know where to start. Basically I find it super useful for switching Javascript and CSS on and off, outlining and validating.

MeasureIt – This is pretty basic but useful. It measures stuff. So if you’re on a web page and wondering how wide the layout is, how wide the column is, how big an image is then MeasureIt tells you. Give it a try.

ColorZilla – Ever wondered the exact hex for a color on a web page and sick of screen grabbing it and using the color picker in Photoshop? If so this is for you. It will tell you the color of any part of a web page shown in the your browser which is really useful when you are coming up with color palettes for new designs.

Selenium IDE – This is a super useful acceptance testing tool. Basically you get it to record your actions as you go through your website or web application, click links, populate forms, log in etc. The recordings are saved as scripts that you can then easily tweak and replay. I use this heavily before deploying new releases to make sure everything is looking and functioning as I expect. There is a lot to say about Selenium and using it with Rails projects so look out for more on this in a future post. But with or without Rails its a great website test tool.

Total Validator – We are all trying to keep are markup W3C compliant these days (well most of us) and thats a very good thing. But I found it hard to find a decent tool for validating local files in my development environment. Total Validator has a firefox extension that can bundle up the source and post it to its validation service where it not only validates your markup but also gives some useful tips for correcting any errors. This has been a life saver for me.

IE Tab – Needs no explanation really. Installs a button in you status bar that switches the rendering window between Internet Explorer and Firefox. Dead useful for ironing out those browser compatibility issues.

Alexa Sparky – OK so this isn’t a developer add-on as such but its really interesting if you are curious about the popularity trends of sites you visit and that kind of information comes in useful if your about to embark on your own project.