Debugging JavaScript: Beyond Alerts

Business Systems Analyst - Clearing - SQL Server - ASP - VB (IL)
Next Step Systems
US-IL-Chicago

There was a time when debugging JavaScript required a liberal sprinkling of alert messages. Sometimes, just figuring out which line caused the error was an ordeal. Not so anymore. As JavaScript became more and more object oriented and grew in scope, a simple alert box no longer sufficed. Ajax, in particular, created a major impediment to debugging scripts, as its asynchronous nature introduced a multi-threading aspect to the language. One try at debugging a chat application that uses periodic polling will attest to that fact! As part of multi-tiered applications, scripts can be written, debugged, and even tested using frameworks' built-in functionality or by specialized software. In today's article, we'll begin examining some of the latest ways of debugging your JavaScript code.

The Trouble with Alerts

There are a few reasons that alerts are often inadequate for debugging purposes:

In Ajax applications, code will not always execute in the same sequence
The order of server responses do not always match up with the Ajax calls because there are many factors that can affect the speed of the response. What's worse, polling apps can keep alert dialogs piling up on top of each other faster than you can read them!
It's not possible to cut and paste text
There's no easy way to save the content of an alert dialog, so once you close a dialog, the debug message is lost. The only way to hang on to them for later is to make screen captures or write them down.
They only work with simple variables
It's easy enough to print out a string or number using an alert, but more complex objects such as hashes, classes, and JSON arrays can be a challenge to decipher. If the phrase "[Object object]" rings any bells, you know exactly what I am talking about.

Tracing Script Execution

In application development, tracing is a specialized use of event logging to record information about a program's execution. Whereas event logging can be used by system administrators or technical support personnel to diagnose common problems with software, tracing is more commonly confined to programmers for debugging or diagnostic purposes.

To better display object and class attributes, industrious developers have taken the time to write some useful tracing functions. One such instance was written by Eric Wendelin and later expanded by Luke Smith. Here is the result of their labors, as presented at ajaxian.com:

(function () {

YOUR_NAMESPACE.getStackTrace = (function () {

var mode;
try {(0)()} catch (e) {
    mode = e.stack ? 'Firefox' : window.opera ? 'Opera' : 'Other';
}

switch (mode) {
    case 'Firefox' : return function () {
        try {(0)()} catch (e) {
            return e.stack.replace(/^.*?\n/,'').
                           replace(/(?:\n@:0)?\s+$/m,'').
                           replace(/^\(/gm,'{anonymous}(').
                           split("\n");
        }
    };

case 'Opera' : return function () {
        try {(0)()} catch (e) {
            var lines = e.message.split("\n"),
                ANON = '{anonymous}',
                lineRE = /Line\s+(\d+).*?in\s+(http\S+)(?:.*?in\s+function\s+(\S+))?/i,
                i,j,len;

for (i=4,j=0,len=lines.length; i<len; i+=2) {
 if (lineRE.test(lines[i])) {
 lines[j++] = (RegExp.$3 ?
 RegExp.$3 + '()@' + RegExp.$2 + RegExp.$1 :
 ANON + RegExp.$2 + ':' + RegExp.$1) +
 ' -- ' + lines[i+1].replace(/^\s+/,'');
 }
 }

lines.splice(j,lines.length-j);
            return lines;
        }
    };

default : return function () {
        var curr  = arguments.callee.caller,
            FUNC  = 'function', ANON = "{anonymous}",
            fnRE  = /function\s*([\w\-$]+)?\s*\(/i,
            stack = [],j=0,
            fn,args,i;

while (curr) {
            fn    = fnRE.test(curr.toString()) ? RegExp.$1 || ANON : ANON;
            args  = stack.slice.call(curr.arguments);
            i     = args.length;

while (i--) {
                switch (typeof args[i]) {
                    case 'string'  : args[i] = '"'+args[i].replace(/"/g,'\\"')+'"'; break;
                    case 'function': args[i] = FUNC; break;
                }
            }

stack[j++] = fn + '(' + args.join() + ')';
            curr = curr.caller;
        }

return stack;
    };
}

})();

To use the code to your page, be sure to change the YOUR_NAMESPACE to your app's namespace or remove it if you don't have one and you're certain that there is no preexisting getStrackTrace() function - and that includes within any libraries that are utilized by your page. If you're not sure, you can always try calling the function before adding the code and confirm that the browser does not recognize it.

I have tried my own hand at writing debugging utilities. I borrowed liberally from functions that are included with the Prototype and Mootools frameworks. The functions are predicated on the fact that JavaScript, like Java, also provides some degree of Class Reflection. However, some objects, such as Arrays and Functions, require some fairly inventive coding to identify and/or expound:

window.$inspect = function(obj, indent)
{
    if (typeof indent == 'undefined') indent = 0;

if ( $type(obj) )
    {
        var value, props = '';

for (var prop in obj)
        {
            switch ($type(obj[prop]))
            {
                case 'function':
                    value = prop;

if (obj[prop].name)
                    {
                        value += ': function ' + obj[prop].name;
                    }
                    else
                    {
                        var name = /\W*function\s+([\w\$]+)\(/.exec(obj[prop]);

value += ': ' + (name ? 'function ' + name[1] : 'anonymous function');
                    }

value += ' ' + space(indent + 1) + 'arguments: ' + space(indent + 2);

if (obj[prop].length)
                    {
                        var args = /$([^$]*)\)/.exec(obj[prop]);
                        value += '[' + (args ? args[1] : '') + ']';
                    }
                    else
                    {
                        value += 'no arguments';
                    }
                    break;

case 'array':
 value = prop + '(array): ' + $inspect(obj[prop], indent + 1);
 break;

case 'object':
 value = prop + '(object): ' + $inspect(obj[prop], indent + 1);
 break;

default:
                    value = prop + '('+$type(obj[prop])+'): ' + String(obj[prop]);
                    break;
            }

props += space(indent) + value + ' ';
 }

return props;
    }
    else
    {
        return String(obj);
    }
}

[next]

Search Engine Optimization: Selecting and Embedding Keywords
Are Google's Language Translation Web Services Ready for Prime Time?
Installing and Using Meeplace, the Business Review CMS

IBM DB2 10 for z/OS: Justifying the Upgrade
Living La Vida Colo: Choosing the Right Colocation Facility
FTC Concerns over Social Media Privacy Linger

Debugging JavaScript: Beyond Alerts

The Trouble with Alerts

Tracing Script Execution

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos