Developer

Ease your JavaScript testing and debugging load

JavaScript development tools have been slow to materialize, but there are various options available today. Learn more about debugging JavaScript and related tools in this Web Development Zone column.

Web development platforms like JSP, ASP.NET, ColdFusion, and so forth offer plenty of powerful development options on the server side. However, they do not negate the role of client-side Web development with JavaScript.

JavaScript provides both logic and user interface features, while offloading processing from the server. While it has been with us for many years, development tools are still a bit awkward. Let's take a closer look at the development and debugging options for JavaScript.

Development tools

If you are accustomed to working with development IDEs like Visual Studio or NetBeans, then you are familiar with the various debugging options, which include stepping through code, setting breakpoints, and watching variables. These are invaluable tools when monitoring code execution or tracking down a bug. Unfortunately, these tools are not as prevalent for the JavaScript developer.

Weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.
Automatically sign up today!

Debugging

A critical step in application development is tracking down bugs in a script or code. This involves isolating code chunks and analyzing them line by line. When working with JavaScript, you can hearken back to methods used before the advancement of development tools.

In this scenario, the most often used JavaScript function is the alert message box. You can use it to inspect values stored in variables/objects and combine with a loop to view the contents of an object.

As an example, the HTML in Listing A is not executing as planned. Basically, it verifies values that are entered in two text fields before the form is actually submitted.

The form is always submitted regardless of values entered, so we can use alert statements to inspect the contents of values during script execution. The script in Listing B uses alert statements to monitor variable values.

If you execute the script, it is clear the if statements always evaluate to true. Upon closer inspection, you will notice the assignment operation is being used (=) as opposed to equality (==). By making these two changes, the script will execute as expected.

This error is common, especially when developers are moving back-and-forth between languages like VB.NET and others that have different syntax. Here's a quick look at more common errors:

  • JavaScript is case-sensitive, so variable names, JavaScript statements, and such must utilize proper formatting/case. Use a consistent naming convention for your objects, variables, and function names.
  • The use of commas throughout the code. With the exception of the for statement, JavaScript uses the comma as the separator character for arguments.
  • JavaScript uses curly braces to define a block of statements.
  • Strings must be enclosed in quotes (single or double).

Debugging with the alert function is common for JavaScript developers, but these days there are other options for monitoring a script, including 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:

  1. Start the Web application in debug mode (Debug | Start).
  2. The application launches in a browser window. Return to the Visual Studio client. Select Debug | Window | Running Documents.
  3. 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.
  4. 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 utilize a standalone JavaScript debugger tool. A good example is SplineTech's JavaScript HTML Debugger, which is a full-featured development tool. If you utilize 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 utilize older approaches to debugging, but there are many tools available today to ease the testing and debugger load.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

0 comments

Editor's Picks