1. Computing

JavaScript Testing

Debugging Using Alert

From , former About.com Guide

Before you can use the debugging tools built into most web browsers, you need to spend some time learning how to use the debugger.If you are not writing a lot of JavaScript then you may decide that you don't want to spend the time learning how to use the debugger just so that you can find and fix the errors in the occasional JavaScript that you write.

The alert() function in JavaScript provides a quick and easy to use alternative for debugging simple JavaScript without needing to learn how to use the debugger. In fact debugging is about the only use that this function has since you should not be using it in your working scripts.

There are two ways to use alert() to assist in debugging a script that isn't working properly. One way is to use it to trace the path through the code that is followed when the script is run. The second use is to display the values that certain fields contain at selected points within the script.

Unless you are trying to debug why your script produces different results in a specific browser to what it does in other browsers, the best browser to do your debugging in using alert() is Opera. The reason for this is that Opera adds an extra checkbox to the bottom of all the modal dialog calls which provides you with the ability to turn off JavaScript for the current web page. This provides you with a way to exit if it turns out your script is stuck in a loop or once you have worked out what is happening and don't want to have to step through the hundreds of additional alerts that will be produced before the script finishes.

To use alert() to trace the path followed through the code simply insert alert statements into various spots in your script and give each a different value. Two of the more obvious alternatives are to either just number the alerts - alert(1), alert(2) etc. - or to use letters of the alphabet - alert('a'), alert('b') etc - so that you can tell exactly where in the code that you are when each alert is produced. Provided that you have at least one alert within each function, each if and else, and each loop, you will be able to track the exact path followed through the code and compare that to the path that you would expect the particular test to follow.

Where a syntax error in your JavaScript stops the script from running right through, the last alert that is produced and the one that you would expect to be produced next will narrow down the area in the code that contains the syntax error. This approach will also show you where a script that is processing values different from what you expect it to have suddenly starts following a different path through the code to that which you expected it to take.

Alerts can also be used to check the value held in a particular field at a specific spot in the code. The simplest way to do this is to simply include the name of the field to be examined inside the alert - alert(fieldname) - however if you are also using alerts for trackign the path followed at the same time or are trying to check the value in several fields then having the alert display which field has the value will assist you in distinguishing between alerts - alert('fieldname = ' + fieldname).

You may need to add and remove alerts in different spots in the code while tracking down the error that is causing your script to not work but should eventually be able to locate the exact cause of why your script isn't working correctly simply by seeing what alerts are run in which order and what values they tell you that selected fields contain.

Of course you can find out all of this without needing to amend the script to insert the alert statements if you know how to use the JavaScript debugger that is built into all browsers except Firefox (and which can be added to Firefox by installing the Venkmann extension).

©2013 About.com. All rights reserved.