Problem solve Get help with specific problems with your technologies, process and projects.

Debugging a Web page

Programming expert Andrew Borts goes into detail about the debugging of the Web page and the internal elements of the Web page -- the JavaScript.

Andrew Borts
In my last tip, " Testing iSeries Web applications" we learned how to find out how to log who's using our Web sites, figure out what operating systems and browsers are being used and what resolutions are being used. We've also discussed the best way to track using a logging analysis application, how to choose the correct resolution for the overall appearance, and how to make sure what we're producing is formatted so the browsers can display it properly.

More Information
In this tip, I'll go into detail about the debugging of the Web page and the internal elements of the Web page -- the JavaScript. So let's start by debugging the "mess" we just developed.

The elements we need to concern ourselves with are:

  • The HTML on the page –- what's happening with it? (Covered in "Testing iSeries Web applications")

  • The Javascript on the page -- what's happening with it?

  • 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.

  • Dig Deeper on Debugging