Integrated Development Environments

At the high end of the spectrum, Integrated Development Environments, or IDEs support a wide range of web development activity, including editing JavaScript and HTML files, deploying code to servers, and integration with existing features like source control. In addition, some include runtime tools and browser integration to assist in debugging.

Cross-Platform, Eclipse-Based

• Aptana - Extremely strong JavaScript support, good support for many common server-side languages, and integration for Dojo.
• MyEclipse - MyEclipse Professional contains a JavaScript editor and debugger. The debugger can set breakpoints, inspect variables, and single step within its own Web 2.0 Browser, based on Mozilla/Firefox.
• ATF - The Ajax Tools Framework contains similar tools as MyEclipse, and adds AJAX toolkit "personalities". These are essentially snippets for the common idioms for a toolkit. The Dojo personality is included, but is not yet updated for 0.9.
• Adobe JSEclipse, formerly a product of Interakt, is a free JavaScript editor. Like ATF, it includes code completion idioms for Dojo, but does not include the debugger.

Windows

• Visual Studio .NET bundles the JavaScript editor and debugger with the other languages. This is especially useful when writing data services in ASP.NET and client-side scripts with Dojo.
• Visual Web Developer Express is a free, scaled down version of the web portion of Visual Studio. JavaScript editing and debugging is supported.
• Microsoft Script DebuggerAn extremely scaled-down and outdated debugger, but familiar to many.

Browser Addons

Mozilla/Firefox

• The Firebug is the debugger of choice for Dojo and Firefox. Consult Cheap Debugging for details.
• JavaScript Debugger, a/k/a Venkman has been around for years, and has adherents. Venkman seems to be dormant, gaining no new features but being ported verbatim to new versions of Firefox.
• Live HTTP Headers is useful for debugging HTTP traffic . Although Firebug is good for analyzing HTTP traffic within the page, as in XHR, Live HTTP Headers excels at between-page HTTP requests.
• The Web Developer Toolbar is a favorite of Web Designers, and includes rulers and positioning features that Firebug does not.

Internet Explorer

• IE Web Developer is a commercial product with Firebug-like features such as JavaScript debugging.
• IE Developer Toolbar, a free download from Microsoft, is useful for page design.
• The Microsoft Script Editor integrates with Internet Explorer and is available as part of office 2003. It is not included in the default install but you can get it from the installation cd's.
• Web Developer Helper - HTTP logging, script debugging and a DOM inspector.

Safari

Drosera is the "native" JavaScript debugger for Safari, and is written by the folks from Webkit, on which Safari is based. The Safari Developer FAQ has some general information about developing with Safari, as well as instructions on how to turn on a debug menu that allows showing a JavaScript console.

Traffic Analyzers

Many problems can be resolved by watching the traffic between the browser and the server. While IDE's and web add-ons analyze traffic, the following standalone programs are more heavy-duty. If you are having any problems with XHR or with js/html/css/jpg files not loading as you would expect, this is often the best way to diagnose them quickly. Also if you are having problems with required files not loading then this is a good starting point to find out why.

• Fiddler is a fantastic HTTP header and content inspector for Windows. It understands HTTP and presents the information very clearly (once you get used to its slightly quirky interface). Well integrated with IE, but work s with any browser. With FF a useful extension to help use Fiddler is the Switch Proxy extension (scroll down that page to find it).
• Wireshark (formerly Ethereal) is great for sniffing all kinds of network traffic.