JavaScript Debug Log

Date: Monday, 18 Dec 2006 14:08
By Bret Taylor, December 3, 2006

Even with the most advanced debugging tools, every program requires a little “printf debugging”: run your program, print out state as it executes, and visually verify that everything is working properly. Unfortunately, there is no built in console to print debug messages to in JavaScript, forcing many JavaScript programmers to revert to calling alert() in their code. alert is completely infeasible for a function that gets called a lot, as it halts execution until you click an OK button. This recipe creates a simple debug log window that does not halt execution:


function log(message) {
if (!log.window_ log.window_.closed) {
var win = window.open("", null, "width=400,height=200," +
"scrollbars=yes,resizable=yes,status=no," +
"location=no,menubar=no,toolbar=no");
if (!win) return;
var doc = win.document;
doc.write("<html><head><title>Debug Log</title></head>" +
"<body></body></html>");
doc.close();
log.window_ = win;
}
var logLine = log.window_.document.createElement("div");
logLine.appendChild(log.window_.document.createTextNode(message));
log.window_.document.body.appendChild(logLine);
}

To print log messages, you just call log() within your code:


for (var i = 0; i < 10; i++) {
log("This is log message #" + i);
}

When you push your code to production, you can just replace the definition of log with an empty function so your users will not see your debug messages.

See the example