Debugging - client side (Advice)

How to debug faulty client side scripts.

When you are trying to debug client side code, there are not many ways you have available for seeing what is going on. Usually, you have to resort to placing a document.write() into the body of the page or perhaps putting up an alert box when the script runs.

In Netscape , you can bring up a debugging console by typing the string 'javascript:' into the location box and pressing return. Because you have not indicated any action to be passed to the interpreter, it opens the debugging window by default.

Another way to do some very effective debugging is to trap the onError event handler with your own debugger script. You would implement the debugging error handler as something that opens a window and places HTML into it. Then you attach the handler to the current window with the self.onerror property.

You might find it useful to open a document window with a "text/plain" MIME type so you can simply use document.writeln() actions to display some debugging text.

A useful technique when debugging form handlers is to loop through all the elements in the form, presenting them in an alert() box for inspection. Of course this is useful for all kinds of collections, not just forms.

The example script illustrates three different ways to do debugging. There are lots of other techniques too.

The first example simply uses document.write() and alert() methods to feed information back to the user.

The second example is more sophisticated and attaches an error handler to the onError event hook. This works in MSIE. In Netscape , it was expected to work, but as of the pre-release version PR3 it still would not catch the errors. Since Netscape is very likely to undergo rapid and frequent updates for the foreseeable future, this might start to work quite soon. Nevertheless, Netscape provides the JavaScript console which may be helpful too.

The third example is based around a call to the embedded Java VM and requests that it prints a message on its console display surface. Again, whether this works may be browser and platform dependent but it is a starting point for custom building your own suite of debugging tools.

The fourth example shows how to debug form values without causing a form submit or page refresh.

Example code:

   <!-- Simple debugging example -->
   <HTML>
   <BODY>
   <SCRIPT LANGUAGE="JavaScript:>
   // Write text into the document body at this point
   document.write('Your text here');
   // Present a dialog box with a message
   alert('Your other text here');
   </SCRIPT>
   </BODY>
   </HTML>
   ---------------------------------------------------------------
   <!-- Custom debugging example -->
   <HTML>
   <HEAD>
   <SCRIPT>
   function debugHandler(aMessage, aURL, aLineNumber)
   {
   myText  = "An error has occurred\n\nThe message is\n\n";
   myText += aMessage + "\n\n at URL\n\n";
   myText += aURL + "\n\non line number ";
   myText += aLineNumber;
   
   alert(myText);
   
   return true;
   }
   </SCRIPT>
   </HEAD>
   <BODY>
   <SCRIPT>
   // Note that this may not work in Netscape 
   self.onerror = debugHandler("This is an example error", "local site", 21);
   myError = null.open();
   </SCRIPT>
   </BODY>
   </HTML>
   ----------------------------------------------------------------
   // Java console debugging
   // Calls the Java console output to print a debug message
   function consoleDebug(errMessage)
   {
   java.lang.System.out.println(errMessage);
   }
   // Call the console debug output like this
   if(someError)
   {
   consoleDebug("Display this text on the Java Console");
   }
   ----------------------------------------------------------------
   // A form debugger provided by Jon Stephens
   // This can pasted into the location window if it is prefixed
   // with javascript: and if all the line breaks and extra
   // spaces are removed
   function formDebug()
   {
   var output = "";
   for(var i = 0; i < document.forms.length; i++)
   {
   for(var j = 0; j < document.forms[i].elements.length; j++)
   {
   output +=  "Form: " + i
   +  " Elem: " + j
   +  " Type: "
   +  document.forms[i].elements[j].type  + "; "
   +  document.forms[i].elements[j].name  + ": "
   +  document.forms[i].elements[j].value + "<br>"
   }
   };
   var newWin = window.open("","newWin","width=350,height=350");
   with(newWin.document)
   {
   open();
   write(output);
   close();
   }
   }

See also:Arguments.callee, Arguments.caller, Debugging - server side, Dialog boxes, Document.open(), Input-output, JavaScript debugger console, Object inspector, Window.alert(), Window.confirm(), Window.onerror, Window.prompt()

insert figure 0067

Cross-references:

Wrox Instant JavaScript - page - 205

Web-references:

   http://msdn.microsoft.com/scripting/default.htm?/scripting/debugger/
   http://developer.netscape.com/tech/javascript/index.html?content=/software/jsdebug.html