$inspect() function calls
have the excellent
typeof() function, but it is lacking in some areas. The
$type() function makes use of
typeof() but supplements it with additional
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
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:
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:
To see the error, double-click the icon:
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:
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:
Debugging Using Firefox's Address Bar
Firefox offers an extra feature in that the address bar can
homepage (any Web page that contains a form will work) and type the following
in the Address Bar:
An alert box will appear with the value of the first form element in the page:
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