debug javascript

home | software | javascripts | debug javascript

Unlike programming languages that have console output or IDE debug traces, Javascript can be complex to debug. The Firebug utility in Firefox is helpful, though sometimes not enough. Filling your code with 'alert(...)' methods interrupts the program's execution and can be unusable in repetitive loops.

To enable debug output, place this in your page:

Alternatively, call this method from elsewhere in your Javascript code.

Other methods you can call are:

• writeDebug(message) - writes the object's string value as a line
• writeEval("a.b.c") - writes the result of executing the specified statement (must be a globally eval-able statement)
• writeDebugObject(obj) - enumerates all properties of an object and writes each on its own line
• clearDebug() - clears the contents of the div (can also be called by the user clicking the 'clear' link)

the code

debug.js - right-click and choose save as

// Script written by Drew Noakes -- http://drewnoakes.com // 4 Dec 2006 // the div element used for debug output. created in enableDebug. var debugDiv; // call this function from a script within the document for which to enable debug output function enableDebug() { document.write("<div id='debugContent' style='display:block; position:absolute; top:7px; right:7px; padding:10px; width:300px; background:#ccc; color:white; border:solid 1px black;'></div>"); debugDiv = document.getElementById("debugContent"); writeClearLink(); } // writes the string passed to it to the page function writeDebug(message) { if (debugDiv) debugDiv.innerHTML += message + "<br\/>"; } // writes the value of some code expression. // eg: writeEval("document.location"); // writes "document.location = http://drewnoakes.com" function writeEval(code) { writeDebug(code + " = " + eval(code)); } // writes all of the properties of the object passed to it function writeDebugObject(object) { for (property in object) writeDebug(property); } // clears the debug output. called either manually or by the user clicking the 'clear' link in the debug div. function clearDebug() { if (debugDiv) { debugDiv.innerHTML = ""; writeClearLink(); } } // writes a link in the debug div that clears debug output function writeClearLink() { writeDebug("<a href='#' onclick='clearDebug(); return false;'>clear</a>"); }