Ease your JavaScript testing and debugging load
Tony Patton
Published: 08 May 2006 12:35 BST
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.
Debugging
A critical step in application development is tracking down bugs in a script or code. This involves isolating code chunks and analysing 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 utilise 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...
Previous
Did you find this article useful?
235 out of 462 people found this useful
- Share this article:
