As part of my rediscovery of web development, I've kitted myself out with a whole new set of tools. There's some really great tools out there and things have certainly improved since I proudly designed a "Made with Notepad" icon for my garish homepage back at uni.

Editor

I never did like WYSIWYG editors for HTML. Not because they're a bad idea per se, it's just that every single one I've tried turns out not to be WYSIWYG. The best I've seen turned but to be WYSISOWYGS (What You See Is Sort Of What You Get… Sometimes.). Things may look fine in the editor itself and it probably looks fine in at least one major browser (usually IE), but the HTML code is terrible, doesn't validate and is usually full of daft things like empty paragraph tags. <p> &nbsp; &nbsp; </p>. No, I don't know why. Admittedly it's been a long time since I used one of these, but right now I'm more than happy with the control and flexibility afforded to me by Vim.

Firefox

I used to be an Opera fan, but when I saw some of the extensions available for Firefox I switched allegiance. Of course, I still have Opera and IE installed for cross-browser testing, but Firefox is my browser of choice simply because it makes a great web development suite.

DOM Inspector

Make sure you install the developer tools when installing Firefox. This gives you the DOM Inspector and requires you to do a "Custom install" using the Windows installer. The DOM Inspector updates to reflect the DOM as you muck about with it in your DHTML, so it makes a handy debug tool.

Web Development Extensions

Javascript Debugger (Venkman) - Fantastic. A proper debugger for Javascript with break points, call stack, watch window etc. Much nicer and easier to work with than the oft-used liberal sprinkling of alert() statements.

Web Developer - A toolbar with a lot of handy functions for your HTML and CSS. Leave it activated all the time to see if your pages are rendered using "Quirks Mode" or "Standards Compliance Mode". Also warns of any Javascript errors with a quick link to the Javascript Console. Validation tools allow easy upload of individual pages to the various online validation systems which means your pages don't have to be live before you can validate them. Handy CSS tools include an inline style sheet editor that updates the view as you hack away. Great stuff.

Live HTTP Headers - Shows all the HTTP requests made by the browser and received from servers. Invaluable for debugging interaction between client and server when developing PHP redirections, forms, cookies etc.

ColorZilla - A simple eyedropper for copying the HTML code for the color of a pixel on the page. Not used that often but great to have when you need it.

HTML Validator (based on Tidy) - Validates every single page using the W3C's Tidy engine. Integrates into the "View Source" view to show you where the errors or warnings are and automatically fixes up warnings and renders a Tidy version of the source.

Other extensions

Not useful for web development as such but no Firefox installation should be without these

SwitchProxy Tool - Easily switch between different proxy servers. Very handy if you're developing a proxy server. Also would be useful for web development if I could find a proper HTTP proxy version of Sloppy - the slow proxy for dial-up modem simulation. That would be great for testing how your pages load for those users behind a slow link. It's all very well testing on localhost but it does give a somewhat more responsive experience. I'm sure it must be easy to knock up a slow HTTP proxy in Perl, but I haven't had a chance to look into it yet.

Adblock - Remove all those pesky ads. In a few clicks makes reading The Register a much more pleasant experience.

Tabbrowser Preferences - Makes tab browsing work properly. Don't know why it has to be an extension!