Javascript Debug Window Script

I found this little snippet of code floating around the Internet and despite its age, it still proves to be quite a handy little guy to have around when you are looking to quickly pop in a debug window in order to test some values against when in the middle of debugging some of that existing code of yours.

The premise for the script is pretty simple. Create a popup window and direct all debug comments into the new “debug” window, meaning that your site display remains clean and tidy but at the same time you’re are getting all the hidden variable values you really care about.

So no more print_r and annoying alerts to break the flow of your web application in other words! :P

// Show the debug window
function showDebug() {
  window.top.debugWindow =
      window.open("",
                  "Debug",
                  "left=0,top=0,width=300,height=700,scrollbars=yes,"
                  +"status=yes,resizable=yes");
  window.top.debugWindow.opener = self;
  // open the document for writing
  window.top.debugWindow.document.open();
  window.top.debugWindow.document.write(
      "
\n");
}
 
// If the debug window exists, then write to it
function debug(text) {
  if (window.top.debugWindow && ! window.top.debugWindow.closed) {
    window.top.debugWindow.document.write(text+"\n");
  }
}
 
// If the debug window exists, then close it
function hideDebug() {
  if (window.top.debugWindow && ! window.top.debugWindow.closed) {
    window.top.debugWindow.close();
    window.top.debugWindow = null;
  }
}
                

To use is pretty simple really. At the start of your page, generate the debug window by calling showDebug(). Then, whenever you want to print something out, simply make use of the debug function, a little like this: debug(“this is a debug message”). Finally, if you are a purist, you may as well close your popup debug window by using hideDebug().

Of course, today’s awesome tools like Firefox’s plugin extraordinaire Firebug and even Internet Explorer’s built in debugger makes debugging Javascript pretty simple, but still, it remains pretty useful when you want to do something yourself and that little something you want to check doesn’t quite fall under the auspices of the existing tools at hand! :)