Cross-Browser.com

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.

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.

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

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:  }