Following is a list of cross-browser/platform web development and debugging tools useful for client-side developers. Depending on the application, one or all of these tools can be valuable in completing work on a website front-end.
Tools for Firefox and Chrome
Build for standards.
- Chrome includes a powerful set of development tools out of the box, including remote debugging.
- Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse.
- HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla.
- Web Developer adds a menu and a toolbar with various web developer tools.
- IE Tab, an extension from Taiwan, embeds Internet Explorer in a Mozilla/Firefox tab. Handy but doesn’t work on a Mac.
- ColorZilla provides Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox.
- YSlow analyzes web pages and tells you why they’re slow.
- HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.
- MultiFirefox is a small launcher utility that allows you to run multiple versions of Firefox side-by-side (Mac only).
- User Agent Switcher to spoof user agent strings for browser support testing.
- Fangs renders a text version of a web page similar to how a screen reader would read it.
- Google Toolbar to visualize Page Rank.
Tools for Internet Explorer
Ensure application compatibility.
Internet Explorer Developer Toolbar(archive) provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages. It also allows for the inspection of the MSIE-specific CSS passed in through the use of Conditional Comments.
- A look-alike is just that, not the real thing. Here are the Internet Explorer Application Compatibility VPC Images (archive) made available by Microsoft for use in testing browser compatibility with MSIE.
- HttpWatch is a tool for monitoring HTTP traffic in IE.
Performance & Testing
Polish it to a bright shine.
- JSLint helps in checking how bad your script sucks. Just copy/paste and pray.
- WebPagetest will help access how slow your site is once it’s built.
- Validator.nu (X)HTML5 Validator validates HTML5.
- HTML5 outliner provides an easy to use document outline.
- Selenium IDE for automated testing, helping unlock the potential for test-driven development in the UI layer.
Paros(archive) is a simplistic proxy tool that allows you to trap raw HTTP request and response headers for analysis and testing.