JavaScript Debugging Script

Here's a quick little script that makes it easy to follow various values around complex JavaScript. You can quickly enable and disable the debugging process during the development process. Now you can avoid using those annoying alert() functions while debugging your code.

Here's a quick little script that makes it easy to follow various values around complex JavaScript. You can quickly enable and disable the debugging process during the development process. Now you can avoid using those annoying alert() functions while debugging your code.

After the page has completely finished loading and debugging is enabled, a nice javascript popup will appear with a line by line view of the values.

The first JavaScript block can be placed in another file such as debug.js and included in all of your pages for ease of use.

Please take a moment to rate this Tip (opens in new window):

http://www.turnkeytools.com/polls/default.asp?POLLID=10000062&DOMAINID=4610

<HTML>
<HEAD>
<script language="JavaScript">

// Global variable for Debugger Content Array
var DebugWindowContents;
// true=run debugger; false=ignore debugger calls;
var DebugOn=true;
// will equal true once the DebugInit has run and DebugOn = true
var DebugStarted=false;


function DebugShowResults()
{

if ((DebugOn!=true) || (DebugStarted==false)) { return; }

var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,";
sOption+="scrollbars=yes,width=550,height=300,left=100,top=25";

var winprint=window.open("","",sOption);
winprint.document.open();
winprint.document.write('<html><body>');
winprint.document.write(DebugWindowContents.join(' '));
winprint.document.write('</body></html>');
winprint.document.close();
winprint.focus();
}

function DebugInit()
{
DebugWindowContents=new Array();
DebugStarted=true;
}

function DebugWrite(sVal)
{
if (DebugOn!=true) { return; }
if (DebugStarted==false) { DebugInit(); }
DebugWindowContents.push(sVal + "<br>");
}

</script>

<script language="JavaScript">

function MainTest()
{
Test1("this is my test 1 value");
Test2("this is my test 2 value");
DebugShowResults();
}

function Test1(sVal)
{
DebugWrite(sVal + " test1 addition");
}

function Test2(sVal)
{
DebugWrite(sVal + " test2 addition");
}

</script>

</HEAD>
<body onload=MainTest();>
Test Page
</body>

</HTML>


Submission Date:  9/23/2005 3:00:36 PM
Submitted By:  Robbe Morris
My Home Page:  http://www.robbemorris.com

By Robbe Morris   Popularity  (512 Views)
Picture
Biography - Robbe Morris
Robbe has been a Microsoft MVP in C# since 2004. He is also the co-founder of NullSkull.com which provides .NET articles, book reviews, software reviews, and software download and purchase advice.  Robbe also loves to scuba dive and go deep sea fishing in the Florida Keys or off the coast of Daytona Beach. Microsoft MVP