Home arrow JavaScript arrow Page 5 - Debugging in Javascript
JAVASCRIPT

Debugging in Javascript


Despite its widespread use, there is little support for debugging in Javascript. When scripts get complicated, the debugging process can cause even the most patient programmer to pull out their hair in frustration. Chris Root offers several tools and techniques that just might keep you from going prematurely bald during the debugging process.

Author Info:
By: Chris Root
Rating: 4 stars4 stars4 stars4 stars4 stars / 26
February 16, 2005
TABLE OF CONTENTS:
  1. · Debugging in Javascript
  2. · The Hard Way
  3. · Using Comments
  4. · Are We There Yet?
  5. · Make a Log Window

print this article
SEARCH DEVARTICLES

Debugging in Javascript - Make a Log Window
(Page 5 of 5 )

The solution is a log window that can be used in any document in a similar way to an alert box but with more versatility. Write a new document that contains a textarea with attributes like the one below. Save the file as dialog.html in the same directory as the file that you are debugging or in the directory of your choice (if you choose another directory you should use the complete URL instead of a relative one to refer to it).

<html>
<head>
<title>Debug Window</title>
<script language="Javascript">
function setField(msgText,mode)
{
   var msgField = document.getElementById("display");
   if(mode == 1)
   {
      msgField.value = msgText;
   }
   else if(mode == 2)
   {
      msgField.value += "\n\n" + msgText;
   }
}
</script>
</head>
<body>
<form name="debug">
<textarea id="display" rows="15" cols="38"></textarea>
<br>
<input name="clear" type="reset" value="Clear Log" />
</form>
</body>
</html>

Then make a Javascript file of the type that you would attach to an html file using the src attribute of the <script> tag. Put the following code in the document and save it as debug.js in the same directory as the dialog.html.

var dialog = null;
function opendebug()
{
   dialog = window.open("debugger.html","debug","height=310,width=425");
}
function closeDebug()
{
   if(dialog)
   {
      dialog.close();
   }
}
window.onload = opendebug;
window.onunload = closeDebug;
function display(msgText,mode)
{
   if(dialog)
   {
      dialog.setField(msgText,mode);
   }
}

Finally, let's make a test document that we can use to test a script. The script on this page simply replaces the text in a paragraph with other text at the click of a button.

<!--path assuming all docs are in the same directory-->
<script src="debug.js" language="Javascript"></script>
<script language="Javascript">
function changeText(pName)
{
   display(pName,2);
   var para = document.getElementById(pName);
   display(para,2);
   if(para.childNodes.length > 0)
   {
      display(para.childNodes[0].nodeValue,2);
      para.childNodes[0].nodeValue = "Boo";
      display(para.childNodes[0].nodeValue,2);
   }
}
</script>
</head>
<body>
<p id="testpara">This is a paragraph for testing
a debugger that appears in a popup window and displays
values that you send it.</p>
<input type="button" value="TEST" onClick="changeText('testpara')" />
</body>
</html>

What you have just created here is a popup log window that can monitor whatever values throughout your script that you wish. An important part of debugging your code is being able to see what's happening. This tool can help.



The screen shot above shows the results for our test document. All it needs to work with any document (such as our test document) is to be attached using these lines (using the full URL this time).

<script
language="Javascript"
src="http://www.mydomain.com/test/debugger.js">
</script>

The way you use the log window is easy. You display values in the log by calling the display() function, which has two arguments. The first argument is the value to display, and the second is the display mode. Sometimes it can be helpful to not just put the variable name in that you wish to monitor, but instead put in something like

display("myVariable is " + myVariable,2)

You could also enter line numbers for reference. When you look at the log, you can then know exactly which value you are looking at and even when it appears in your script.

The mode argument has two values. Mode one overwrites the previous entry.

display(valueToDisplay,1);

Mode two writes all values one after the other separated by a line for readability.

display(valueToDisplay,2);

The log display for our example will look like this.

testpara
[object HTMLParagraphElement]
This is a paragraph for testing
a debugger that appears in a popup window and displays
values that you send it.
Boo

The log window will close when you close the browser window that opened it, and you never have to hit an "OK" button to dismiss it. Once you finish debugging your script, delete or comment out any calls to display, and delete the script tag that attaches debug.js to the document.

You could add other things to this as well. Let your imagination and your debugging needs be your guide.

Conclusion

It never pays to panic when you are working through a script. Everyone makes mistakes, but how you deal with them makes all the difference. Using the tools described in this article should help keep your sanity when debugging complex scripts.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials