Last -- the CGI script itself
So what tools are at our disposal for debugging Javascript? So far you've downloaded Firefox -- great tool, and you already have Internet Explorer -- so let's look into those.
Built into Internet Explorer (IE) there are Javascript tools that are defaulted to be off when you get them.
Go to Internet Options under tools;
Then click advanced;
Then look for "Disable Script Debugging" and turn them off.
Also, "Display a notification about every script error" is optional to debug properly -- but not necessary. The goal is to have NO Javascript errors. This disrupts the users more then you realize.
So now, it's debugging time. You have a problem, you just don't know what. Go to the "View" menu on top, and look for "Script Debugger." If you don't see it after performing the above setup, close ALL open Internet Explorer windows, and re-open it. It should appear after that. Then flag to break the page at the next Javascript statement. If there is an error on the page, the prompt will say "Error – would you like to Debug" then click OK or Cancel at that point. Right now, we're just hunting for problems…
So, I hit F5 (refresh on AS/400 and on IE.)
The prompt to debug the page appears, click Yes.
Click OK to Step into the Script you're running.
Now we're on a Microsoft Debug page -- one that is similar to VB's debugging page.
The Yellow pointer on the left side, near the bottom, represents the location of the current line of code being executed…
(example magnified)
Now let's look at our primary debugging tools;
I'm selecting a quick watch to look at a particular field within the "DOM" (refer to Javascript books for this) but you can look at fields by referring to their ID's, or window.document.etc, you can start by looking at window.document and drill down from there if you're totally lost. You can also set breakpoints.
I set a breakpoint (the maroon dot) and hit F11 and then did a quick watch on the field I created within the Javascript. Javascript is a top down process when loading on the page, so understand that the code needs to be executed before you can see definitions, and/or results of the debugging process.
When I perform my QuickWatch, you see my field has the date within it (note the code var theDate = new Date() was where the definition of theDate came from.
OK, we've learned how to debug a Javascript page. To exit this debugging session, hit "Continue."
Or hit the "X" on the upper right corner of the window (close window) and click "Yes."
Done! Javascript Debuggers now?
In the next tip, I'll show you some of Firefox's amazing built in tools.
-----------------------------------------
About the author: Andrew Borts is webmaster at United Auto Insurance Group in North Miami, Fla. He is often a frequent speaker at COMMON and is past president of The Southern National Users Group, an iSeries-AS/400 user group based in Deerfield Beach, Fla.
