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.
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. |
/ 21 
