Debug the JavaScript

Because your JavaScript file is loaded at runtime, it can be tricky for some JavaScript debuggers to display the location of the currently executing line of code in your file. For example, Visual Studio pretty much chokes on dynamically-loaded script files. Fortunately there are some alternatives, and while none is perfect, each one listed here should let you debug your code with a high degree of success.

Firebug

This Firefox add-on is probably the most popular free JavaScript debugging tool out there, but unfortunately there are a couple drawbacks that keep it from being perfect. Firebug 1.3 and earlier don't do a very good job at showing dynamically-loading script files or breaking on lines of code in those files. While Firebug 1.4 (compatible with Firefox 3.5) does a pretty good job, the Console is buggy and will sometimes need to be disabled in order to get it to execute certain JavaScript code (hopefully this will be fixed very soon).

Safari 4

The version of WebKit on which Safari 4 is based has an OK JavaScript debugger (yes, even the Windows version). The console is nice in that it shows a tree of a logged object's properties (like in Firebug), and it's generally very fast, although I've had it freeze up on me quite a bit on both the Windows and Mac versions.

Opera Dragonfly

To use this debugger, you need to download and install Opera 9 or 10 beta, then install the Debug menu here. Dragonfly does a good job at breaking on lines of code in dynamically-loaded script files, but its console isn't great (for instance, it doesn't show a tree of a logged object's properties like Firebug or Safari's debugger) and it's quite a bit slower than Firebug.

Debugging techniques

There are a couple debugging techniques you can use while developing your Custom UI Model JavaScript. Depending on the debugger you choose, you'll have varying levels of success.

The "debugger" keyword. This does just what it sounds like: place the word "debugger" anywhere in your JavaScript file followed by a semi-colon, and your JavaScript debugger will break on that line. You just need to be extra careful about checking in a file with a debugger statement in it. Fortunately JSLint will catch it, and you should be running JSLint on your code before you check it in anyway.

BBUI.console. Since browsers implement the window.console object differently (IE7 doesn’t implement it at all; Opera only implements a couple of functions like log(), Firebug and WebKit implement them all), I've created a singleton object called BBUI.console that abstracts out calls to the browser's console. All you'll probably ever need is log() (which writes a string to the console) and dir() (which shows a tree of the object's properties in the console in Firebug and Safari; this does nothing in Opera), but the rest are there just in case.