Debugging JavaScript: Beyond Alerts
By
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:
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:
