General Debugging Tips

You can download some very nice Javascript debugging programs for a variety of platforms, but your initial debugging can be done with simple techniques right in your code. Most browsers will give the line number of an error - this is essential. Some browsers give better error descriptions than others. There are basically two types of errors: syntax errors, and logic errors.

Syntax Errors

A syntax error will occur when you have not followed the grammer of Javascript: forget to put two quotes around a string; forget to put a closing curly brace; have punctuation in the wrong place, etc. The browser will inform you of most syntax errors.

Logic Errors

After you correct your syntax errors, the script still may not work properly while running: it may be mis-calculating a value, or perhaps an if condition is using the logically wrong (but syntactically valid) operator. These are logic errors.

Among the tools that most Debuggers provide for solving errors are Watch Variables and Breakpoints. You can utilize these same concepts without a debugger.

Watch Variables

A watch variable is a variable for which you want to watch the value, as the script is running - that is, as the page is active in a browser.

A simple technique for using watch variables without a debugger is to use the window's status bar (some browsers are better at this than others). For example, in the following code fragment I want to watch the value of the variable dx. I insert line number 9. Notice the "//// debug" comment. I do this so I won't forget why I added this line, and so, later, I can search my file for "debug", and delete all those lines.

Now I save the file, refresh the browser, and watch the value of dx on the status bar, as the script is running.

1:  if (cl + dx < 0) {
2:    cl = 0;
3:    dx = 0;
4:  }
5:  else if (cr + dx > this.width()) {
6:    cr = cl + this.clipWidth();
7:    dx = 0;
8:  }
9:  window.status = "dx: " + dx; ////////////////////// debug

Break Points

There are times when a variable's value is changing too quickly to use a watch. You need to stop the script and look at the variable. A break point is a line in the script at which the script stops running. You can then look at the current values of variables. When you are ready, you let the script continue running.

A simple technique for using break points without a debugger is to use Javascript's alert() function. This function stops the script, displays a message, and waits for the user to click the OK button. The script then continues executing. This technique is not exactly like a break point, but its close enough. For example, in the following code fragment I want to see the value of dx only if it enters the else if block, and before it is assigned zero. I insert line number 6.

1:  if (cl + dx < 0) {
2:    cl = 0;
3:    dx = 0;
4:  }
5:  else if (cr + dx > this.width()) {
6:    alert("dx: " + dx); ////////////////////// debug
7:    cr = cl + this.clipWidth();
8:    dx = 0;
9:  }


By your use of X and/or CBE and/or any Javascript from this site you consent to the GNU LGPL - please read it. If you have any questions about the license, read the FAQ and/or come to the forums.

Tech Support

Forum support is available at the X Library Support Forums.


World Wide Web