Web Developer Toolkit
These browsers and add-ons help me analyse and debug the websites I build.
Opera
Opera’s web browser does a great job of following standards. If Opera renders your site badly, you probably made a mistake somewhere. Opera is worth installing as a browser to test your CSS in.
I wrote a review of Opera 9 to give a website developer’s perspective on it.
Firefox
Mozilla’s Firefox is a safe place to develop standards compliant websites. It follows standards very well and interprets the ambiguous parts helpfully.
Browsing and developing all day is very demanding. I find the usability and extensibility of Firefox a great help.
Firefox Add-ons
I like these extensions because they do one thing well.
Console 2
Refines the Javascript console so that errors can be filtered. The console includes CSS errors, so you can use this for basic testing of your CSS. You should send it to the W3C CSS Validator from time to time to double check, though.
HTML Validator
Installs the W3C’s HTML Validation Service code into Firefox. It validates each page once it has loaded, giving the result in a compact statusbar panel.
Double-click the panel to View Source for the page, or use Ctrl+U like normal. It highlights errors and each is listed in a panel below the source code. Clicking an error scrolls you to it.
It’s amazingly useful and convenient. How can you live without this?
Restart Firefox
Adds a Restart Firefox item to the File menu. Very useful when try new add-ons as you must restart the browser.
Table Inspector
Displays any accessibility attributes. Great for problems which are hard to spot in the markup and checking the usefulness of summary and abbr.
Web Developer Extension
A very famous and equally useful tool for viewing structure, testing performance at different screen sizes, checking alt text and a myriad other things.
I still use version 1.0 for its better integration with Firefox’s sidebar.
An essential but sometimes flakey way to test quality assurance.