I’m not going to rant on about how Firefox is a better browser, although in my opinion it is, or cry over flaws in Internet Explorer that give me head aches almost every day. What I would like to explain is why Firefox should have a place at the heart of every web developers process.

Firefox is an invaluable, time-saving tool regardless of weather you’re designing standards compliant visions of pure css beauty or, at the other end of the scale (more on that in another post) , customising templates for enterprise CMS products targeted exclusively at corporate environments running Internet Explorer.

So why is Firefox so invaluable? Well, firstly it renders pretty reliable standards compliant output which is a good starting point but more important is its extensibility. The combination of this open extensibility and some very smart web developers willing to contribute has led to a tool-set that no other browser has been able match, not that many (if any) seem to really be trying.

Firefox add-ins that should be in every web designers toolkit:

• The Web Developer Toolbar by Chris Pederick
  Access to a vast array of information about the way pages are constructed, allowing browser features such as css rendering, javascript, images and cookies to be turned on and off on-the-fly. The ability to edit live cached versions of pages and there related files, instantly seeing the effects and the ability to re-size the browser to precise screen resolutions as well as providing direct access to validation services. In fact, so many features I couldn’t possibly list them all here and do them justice.

• FireBug by Joe Hewitt
  Such a powerful tool it still blows me away to think how I ever managed without it. Firebug allows you inspect any object or element on a page telling you, among many other things, which styles are being applied or over-ridden. A full javascript debugging environment providing detailed error information and links directly to the source of the errors as well as letting you add breakpoints and watches and editing on the fly.

And a couple of less developer oriented add-ons I have found useful on a daily basis:

• ColorZilla
  An eye-dropper colour selection tool that runs from the status bar.

• FireFTP
  A complete, full-featured FTP client inside Firefox.

• Stylish
  Allows you to create custom style sheets for websites you regularly use that override the default styles for the site. Handy for fixing browser bugs, accessibility issues or just plain ugly sites!

• IE Tab
  Allows you to switch the current page to Internet Explorer inside Firefox. Great for quick comparisons.

And finally, in the interests of fairness and to show my openness on this subject, if you’re absolutely determined NOT to use Firefox (you poor poor fools! ) then here are some (lesser) solutions for the IE oriented among you:

• XRay by WestCIV
  XRAY is a bookmarklet that works with both Firefox and IE6+ that, through the wonders of Javascript, exposes the box model properties of any element on a page.

• Web Accessability Toolbar by Vision Australia
  I haven’t actually used this toolbar much, but it appears the folks in the AIS team (Accessible Information Solutions) at Vision Australia have done a pretty good job at implementing something very similar to the Firefox Web Developer Toolbar.There’s access to validation, window resizing and the ability to switch CSS, Javascript, ActiveX and Images on and off. As with the Web Developer Toolbar you can highlight key elements on the page such as tables and divs although here you are also able to identify and highlight a raft of other elements including lists, tab-order, access keys and headings.

  As the toolbars primary focus is on accessability rather than development it also comes with some pretty nifty features such as a colour contrast analyser, gif flicker checker, the ability to switch to greyscale.This is actually a REALLY powerful tool and a vast improvement over some other attempts at a web developer style toolbar for Internet Explorer.