Ease your JavaScript testing and debugging load
Published: 08 May 2006 12:35 BST
... browser tools and IDEs.
Browser options
While Internet Explorer is the most popular browser, its JavaScript debugging support is rudimentary. A window will display if JavaScript errors occur. The error messages (as with most JavaScript errors) leave much to be desired, but they do let you know which errors occur. The messages include a line number (even though it never corresponds to the actual offending line, it does place you in the vicinity).
Also, it can launch an external application for debugging (Visual Studio if installed) or examining the code. Note: You enable JavaScript debugging by going to Tools | Options.
Mozilla-based browsers provide options as well. Firefox includes the JavaScript console that displays messages (errors, warnings, information) about scripts on the current page. It actually displays the offending code with an arrow pointing to where the error occurred.
Netscape and Opera includes the JavaScript console as well. Some browsers include special syntax for debugging. A good example is Opera, which supports the opera.postError() command to send output to the console. The Safari browser Debug menu allows you to turn on the logging of JavaScript errors, and they will appear in its console.
IDE options
You may be able to debug browser-based applications via your favorite IDE. Visual Studio is one example that allows you to debug Internet Explorer applications via its debugging support. You must have debugging enabled on the Web server (IIS). Follow these steps to use it:
- Start the Web application in debug mode (Debug | Start). The application launches in a browser window. Return to the Visual Studio client. Select Debug | Window | Running Documents. The currently running application will appear in the Running Documents window. You can select the Web form and actually place breakpoints in the JavaScript code. Return to the Web form and use the application; execution will halt at any JavaScript breakpoints inserted.
Visual Studio is not alone with its debug support. For example, Dreamweaver includes their own JavaScript Debugger that allows you to debug syntax and logic errors, as well as setting breakpoints, watching variables, and stepping through code. A nice feature is the inclusion of an explanation of any JavaScript errors in plain English.
You may also use a standalone JavaScript debugger tool. A good example is SplineTech's JavaScript HTML Debugger, which is a full-featured development tool. If you use the Eclipse IDE, JSEclipse is an Eclipse plug-in for JavaScript development.
Another language to debug
JavaScript has evolved into the standard for Web client scripting. It has an overwhelming number of language resources, but development support is not as readily available. Most developers working with JavaScript tend to use older approaches to debugging, but there are many tools available today to ease the testing and debugger load.











