You've successfully installed the Komodo JavaScript Debugger extension for Firefox (version 0.1.0.278227). This extension provides the browser-side support for debugging JavaScript code with Komodo. You'll need a running copy of Komodo 4.0 for the IDE-side of debugging.
Debugging your first JavaScript
- Make sure Komodo is listening.
In Komodo 4, open Edit | Preferences | Debugger | Connection to configure Komodo's debug listener.
- 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.
- 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.
- 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
- 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).
Note: The Komodo debugger may behave unpredictably with some versions of the FireBug extension enabled. If you use Firebug and experience problems, such as Firefox freezing or failing to debug:
- Disable FireBug,
- Restart Firefox,
- Restart the Komodo debugger.
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.