Komodo JavaScript Debugger

Debugging your first JavaScript

1. Make sure Komodo is listening.

   In Komodo 4, open Edit | Preferences | Debugger | Connection to configure Komodo's debug listener.

2. Make sure Firefox dials the correct number.

   In Firefox, open Tools | Komodo JavaScript Debugger | Options... to configure which host and port Firefox will use to talk to Komodo. This must match the address on which Komodo is listening or, if you are using a debugger proxy, the address on which the proxy is listening for connections.

3. Load the web page to debug.

   This link brings up a sample application that uses JavaScript to draw a gradient of color onto a canvas object.

4. Connect.

   In Firefox, connect to the Komodo debugger by pressing either the Connect to Komodo Debugger button in your toolbar or by selecting Tools | Komodo JavaScript Debugger | Connect to Komodo Debugger

5. Debug.

   Click on a button or link on the page, or refresh the page to step through "top-level" code (which typically initializes global variables).

The JavaScript Debugging Experience

JavaScript debugging using Firefox and Komodo is different in a few important ways from debugging in other languages. As JavaScript programs are generally run and controlled from a browser window, limitations in the browser's JavaScript library (in this case, Mozilla's jsLib) affect how code is handled in the debugging process.

To debug some code, connect Firefox to Komodo (see above), then load the page or trigger the JavaScript event you are interested in.

Note: While debugging, it is advisable to close all JavaScript enabled pages except the one you are currently debugging. AJAX-based applications running in background tabs (e.g. some web-mail sites) may pass data to the debugger creating confusing results.

Static code

Using Komodo's "Mapped URIs", you can link a static source file (e.g. an HTML document with embedded JavaScript or a standalone .js file) to the URL called in Firefox. You can set breakpoints in the code before the debugger starts, and edit the files directly, even on remote systems.

HTML Handlers

If The first line of code to debug is a line of JavaScript in an HTML handler, such as:

<input name="b1" value="Click" onclick="do_something(this.checkbox_2); return false;" >

you will step into this line of HTML when you start a debug session. Due to a limitation in Mozilla, the Komodo debugger has to guess at the actual location of the onclick handler. If the debugger arrow is pointing at line 1 of the code, or looks incorrect, clicking the "magic wand" button in the Debug toolbar shows the internal "Pretty Print" view of the JavaScript code. Normally, a "Step Into" will take you into static code, where you can unset the "Pretty Print" setting to see the actual source.

JavaScript URLs

Some older HTML code uses so-called JavaScript URLs in the href attribute of <a ...> tags. For example, the above code would be written as:

<a href="javascript:do_something(this.checkbox_2);return false;" >

This code will only show up in Pretty Print mode. You can't set breakpoints in JavaScript URL code, but you can set breakpoints in any static code that is invoked from the starting point.

eval'ed code

The JavaScript debugger can step through eval'ed code, but the only way to set a breakpoint in it is by adding a debugger statement to it. Some of the frameworks used currently for AJAX applications bootstrap themselves by loading libraries using a combination of XMLHttpRequest and eval. A better way to debug code that uses a library like Dojo or MochiKit is to download the source code, load it explicitly, and debug the static source. Then you can deploy using the more efficient method of loading code on demand and explicitly compiling it with eval.

Sources of code

The JavaScript debugger works with "http", "chrome", and "file" URIs. It currently does not handle XUL files.