So what do we do at this point? I sometimes find myself adding alert() boxes at strategic points in the code. You can use these prompts to tell us the values of certain variables as the code progresses. Eventually, if you're lucky, you'll discover what was causing the problem. This is no way to work though. It wastes too much time! We need to find the error fast. This article aims to describe a way of doing so.
A Simple Example:
Take the form below, used for adding two numbers, as an example. Just three fields and a button:
Now look at the code I wrote for the onclick event of the button. All it has to do is add the values in the first two fields and place the sum in the third:
var i1 = frm.Number1.value;
var i2 = frm.Number2.value;
var fld = frm.total;
fld.value = i1 + i2;
You might think I've spoilt the fun of describing how we go about finding the error. Well, not really - it's never fun. This article isn't a lesson in the theory of debugging. It's an article to describe the practice of debugging. Knowing how to debug effectively is something you either have or you have to pick up over the years and is well beyond the scope of this article.
The first essential step in debugging your code is getting your hands on a debugger. Microsoft give it away for free and you can get it here. Download and install a copy of Script Debugger before you carry on. You can't do much without it.
With Script Debugger installed, relaunch the browser and press the button again, you will see the same error message but a different dialog box, as below:
If you click Yes the Script Debugger window will open and take you to the line of code that is causing problems.
No more guessing which line it is. You know the exact line where the error occurred.
Taking it one step further:
Now that we know where the error is we can delve deeper to see what actually caused it. To do this we want to halt the code before the error and do some investigation. This is a simple case of adding the "debugger" keyword to your code, just before the line causing the error, as in the following example:
When Internet Explorer encounters this line it stops executing the script and launches the debugger. This is what has happened in the above screen-shot.
So, what do we do now we've paused it? Well, we need to find out exactly what it is that's undefined. To do this we can use the Command Window. From this little window you can easily check and re-assign values (at "run-time") to any of the variables that have been defined. Launch it from the View menu of the debugger or by clicking the button on the very right-hand-side of the toolbar.
To use the Command Window to check a variable's value you simply type in its name and press enter. In the shot below you can see that, one by one I've typed in the names of the variables in my function to test their values. The command window will return the value it associates with that variable on the line below. For i1 and i2 in this example you can see it contains the strings "12" and "56" but it tells us the variable called "fld" is undefined! Here lies our problem:
Let's allow the code continue running and we can think this over. To do this you can either close the debugger or press F5. You will still see the error though! This is because fld is still undefined.
At this point you may well have that eureka moment and see the problem straight-away. If that's the case then you simply correct the code and pretend it never happened. Otherwise, we need to take this approach one step further. You can also re-assign variables from the Command Window. If you do this, then press F5 and see no errors, all is well. Once you've found the solution you can fix your code. Consider the lines in the Command Window in the screen-shot below:
Trying it out for yourself:
Assuming you're using Internet Explorer and you have the the Script Debugger installed, you can test it for yourself using this form. Just click the calculate button:
Even if you already knew about and used the Microsoft Script Debugger I hope that you've found something new and useful from reading this article. It might not be the Holy Grail of script debugging but it's a basis to work on. Every situation is different and being able to debug each piece of code is something you will learn as you use it more and more.
You might be wondering how you debug script in other browsers, such as Mozilla. Well, that's a whole other ball game and probably the subject of a future accompanying article. Leave it with me.