Web Development and Debugging Tools

2 minutes read

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.

Note 2016-09-16: This information was originally compiled in 2009. While not all of it is still relevant some of it may still be useful. Proceed with caution until I have a chance to reboot this list. You may also be interested in my list of Awesome React Boilerplates.

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.

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 is a simplistic proxy tool that allows you to trap raw HTTP request and response headers for analysis and testing.

Leave a Comment