Debugging JavaScript: Beyond Alerts | 2 | WebReference

Debugging JavaScript: Beyond Alerts | 2


[prev]

Debugging JavaScript: Beyond Alerts [con't]

The $inspect() function calls $type() to determine the data type of the object being inspected. JavaScript does have the excellent typeof() function, but it is lacking in some areas. The $type() function makes use of typeof() but supplements it with additional functionality:

Right now, we still have to pay special attention to DOM nodes, Arrays, Function arguments, and collections, although some of these have been earmarked to be added to the typeof() function in a future JavaScript release.

I also included a couple of formatting functions for adding indentations. These are really quite superfluous to the debugging, but are included here for completeness:

Here's a test object and function that displays the object details at the bottom of the page. I find that printing debugging information in the page or console eminently preferable to a constant barrage of alerts.



The code above outputs the following in Internet Explorer 6:

While not overly detailed, being able to show an object's internal attributes helped me get to the bottom of a few tricky bugs!

 

Your First Debugging Tool: The Browser

The next weapon in your arsenal of debugging tools is none other than the browser! While most of us think of the browser as nothing more than a means of viewing Web pages, today's latest browsers come equipped with some fairly sophisticated debugging functionality.

In development mode, you have to configure your browser differently that the average person because browsers aren't normally set up to throw up an error message every time one occurs. For instance, in Internet Explorer, you might see an exclamation icon in the lower left-hand corner of the browser. In Mozilla-based browsers (Firefox, Opera), the only visible sign of an error is the effects of the script not working properly:

Figure 1

To see the error, double-click the icon:

Figure 2

On the Error dialog, you'll see that there's a checkbox to always display the dialog when errors are encountered. If you check it, you'll save yourself the hassle of having to double-click the icon, but be forewarned, you'll likely find yourself besieged by alert boxes if you keep this setting while surfing the Web.

The same setting is found on the Advanced tab of the Internet Options dialog, along with a checkbox to "disable script debugging". It is set by default, and is used to launch the Microsoft Script Debugger (MSD), if installed. We'll be getting to the MSD in a later article:

Figure 3

 

In other browsers, such as Firefox and Opera, you have to launch the Error Console to see errors. It can usually be found under the Tools menu:

Figure 4



Error Consoles are more feature-rich than simple error messages as they more closely resemble a debugger. In addition to error messages, the console can also display warnings and information messages. You can even evaluate JavaScript statements. This saves you from having to build a whole page to test a single statement of JavaScript or isolate a line of code that you suspect may be incorrect. Here's how it works: to verify for syntactical correctness, enter the code in the textbox, press the Evaluate button and watch for an error to appear in the message window; no message means that your code is free of runtime errors! For testing logic errors, you can intersperse alert boxes at any point in the code to display the value of simple variables:

Figure 5

Figure 6


JavaScript errors appear in the main window of the Console along with the offending line number and file path. The file path is actually a link that goes directly to the error in the "Document Source" window. No guesswork required!

Figure 7



Debugging Using Firefox's Address Bar

Firefox offers an extra feature in that the address bar can operate as a mini JavaScript debugger! Try it out: open the default Firefox homepage (any Web page that contains a form will work) and type the following in the Address Bar: javascript:alert(document.forms[0].elements[1].value). An alert box will appear with the value of the first form element in the page:

Figure 8

 

That concludes our look at JavaScript tracing and debugging. From here, we'll be evaluating the merits of some of the more popular free and professional grade JavaScript debugging software. Those of you who create more than basic scripts, I think that you'll find that these products have a lot to offer.

Rob Gravelle combined his love of programming and music to become a software guru and accomplished guitar player. He created systems that are used by Canada Border Services, CSIS and other Intelligence-related organizations. As a software consultant, Rob has developed Web applications for many businesses and recently created a MooTools version of PHPFreechat for ViziMetrics. Musically, Rob recently embarked on a solo music career, after playing with Ivory Knight since 2000. That band was rated as one Canada's top bands by Brave Words magazine (issue #92) and released two CDs. Rob's latest, entitled KNIGHTFALL, was a collaboration between himself, the former Ivory Knight vocalist, and legendary guitarist/producer, Jeff Waters of Annihilator fame. Rob is available for short-term software projects and recording session work. to inquire, but note that, due to the volume of emails received, he cannot respond to every email. Potential jobs and praise receive highest priority!

Original: May 21, 2009


[prev]