Note: See the May 2008 update at the bottom of this article.
alert("You are here") around the code to find out what’s going on. The problems with this approach are that you can’t easily switch them on and off without going through and commenting out individual calls; the fact that you get a dialog box up which needs to be accepted by the user can affect time-sensitive code, so you might not be able to debug it using this method; and finally it’s difficult to compare values from one
alert to the next since the text just comes up in a dialog box.
Here we present three functions that allow you to put debug calls in your code and switch them on and off as needed. The debug calls go to a debug window, the advantage of this is that you can treat it just like a log file, you can save it away, you can compare the results of calls in a loop for example, and you can output time-sensitive information (though obviously writing to the window is going to have a small performance hit on your code).
The first function
showDebug() opens a new window (if you are using a pop-up blocker such as the excellent Google Toolbar you’ll need to allow pop-ups for the site while debugging). Rather than using a variable, we’ve used a property of
window.top. The nice thing about this is that you don’t have to worry that your variable is going to clash with another one and you don’t have to worry about scope (whether the variable is declared in a frame or in the parent). By using
window.top, wherever you call the code from, it will access the same value so the code works fine in pages with or without frames.
The parameters to
window.open([URL] [, name] [, features] [, replace]) are:
- The URL to display in the window. We leave this as
we are going to write into the window ourselves.
- This is name of the window and can be used as the value of the
<A href=...links. The name doesn’t really matter here because we’re
going to access the window directly.
- This is a string of comma separated features that control what the window will be like, you can set the position and the size, say whether it’s resizable, whether it has a menu bar etc. For full information on how this works for Internet Explorer, have a look at the documentation on the MSDN website.
- This specifies if when a new URL is loaded into the same window, it replaces the entry in the window’s history list or not. Since it’s optional and not relevant, we don’t specify it in our call.
View Source anyway).
The next function
debug actually writes a debug message to the debug window. First we check to see if there is a window and that it’s not closed. If it is there and open, we simply call
document.write and write in whatever text we’re called with followed by a carriage return so that it’s easy to read.
To use it in your code, simply add
debug("The value of my variable is "+var) or whatever you need to print out.
We could do all sorts of other things. For example we could get the current time and put a timestamp, we could append
<BR> at the end of each line so that the debug messages appear on different lines, or we could implement some concept of leve of debug by passing in an extra parameter. We’re sure you get the idea!
Finally, the last function
hideDebug simply closes the window and sets
window.top.debugWindow to null so that we don’t try and write debug messages to it after this call.
There are two ways of using this code: you can either just put a call to
showDebug at the beginning of your code and then simply comment it out when you don’t want the debug, or you can have a debug button on your page somewhere that switches on and off the debug as necessary. Obviously even if you don’t call
showDebug, there’s still going to be a performance hit for every call to
debug since it will call the function and then inside the function will notice there’s nothing to do and return. You can improve this slightly by calling it as follows:
But unless the performance of your script is unacceptable to the user, we’d recommend using it in the simplest form to make the code as readable as possible.
We’ve tested the code with Microsoft’s Internet Explorer, Mozilla Firefox and Opera (see the note on the demo page).
I wrote this a long, long time ago and fortunately the word has moved on. There are now a number of different options:
console.log(2, "some text", variable). You can even pass a printf style format string.
Finally, if you are using Opera, then you can