1. Firefox: while it’s not an extension, the browser itself deserves mention.  Primary web development should happen in a standards-compliant environment, and Firefox is a great platform for that.  There are certainly other browsers that fit the bill (Safari and Opera are candidates), but neither has the wealth of extensions that Firefox offers, nor the developer community behind them.

2. Firebug: the tagline at the Firebug site is “web development evolved”, and that is a true statement.  Firebug may well be the largest single innovation in web development, ever.  That’s a bold statement, but it provides so much functionality, you hardly need other tools.  Some of it’s best features include:
   • Visual DOM exploration: mouse over nodes in the DOM tree, see them highlighted in the browser window.  Conversely, inspect an element in the browser window and access it in the DOM tree
   • Realtime CSS editing: changes to styles take effect immediately
   • Javascript console: execute arbitrary javascript in the context of the page
   • Network monitor: see full details on every request and response the browser makes, as they happen
   • Javascript debugging: a full-featured debugger and profiler for javascript code
   • Realtime reporting of Javascript and CSS errors: you’ll know when something’s not right

   If you don’t have Firebug yet, go get it.  Now.

3. HTML Validator: invalid markup is a web developer’s nightmare — if your markup isn’t right, how can anything else be expected to function or look right?  Yet, unless you’re extremely well disciplined (and even then, sometimes), you’ll make mistakes.  This extension adds on-the-fly validation to Firefox, letting you know right away when there’s an error, indicating where it is, and even offering suggestions on how to fix it.  The validator has multiple validation engines; for best effect choose the serial algorithm (w3C’s SGML parser first, then HTML Tidy).  There’s no longer an excuse for invalid markup.

4. Web Developer Toolbar: Chris Pederick’s toolbar was one of the first Firefox extensions targeted at web developers, and it still offers plenty of functionality.  Besides offering shortcuts to oft-used Firefox features, it works with cookies, forms, window resizing, HTML validation and more.  It also provides lots of information about the page and it’s elements.

5. Tamper Data: when you need detailed information about HTTP requests and responses, the Net tab in Firebug is one place to look.  Another is Tamper Data, which provides an easily-filtered interface for inspecting HTTP traffic.  However, Tamper Data also allows the user to “tamper” with the request before it’s dispatched to the server, an incredibly useful trick when debugging misbehaving web applications.

Using the right tools will not only make your job easier, it’ll make you a better developer.  These tools can alert you to mistakes in your code, and you’ll learn to avoid repeating them in the future.

Everyone has their own favorite tools in their toolbox.  These are my favorites, and I ones I believe no professional web developer should be without.

http://www.xulplanet.com/references/xpcomref/ifaces/nsIRequest.html