Debugging JavaScript Komodo IDE only

Tutorial

Komodo can debug local or remote JavaScript programs. Unlike other dynamic language debugging, Komodo uses uses the Firefox browser as its JavaScript runtime environment. JavaScript enabled pages are loaded, viewed and controlled in Firefox, and the debugging information is passed to Komodo via the Komodo JavaScript Debugger extension.

The instructions below describe how JavaScript debugging works in Komodo, and how to configure Komodo and Firefox for debugging. For general information about using the Komodo debugger, see Komodo Debugger Functions.

Understanding JavaScript Debugging

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.

Pretty Print

In certain situations, the JavaScript library returns compiled code objects rather than the original JavaScript source. Komodo is unable to display meaningful information without decompiling and visually reformatting the code object first. This view of the code object is called Pretty Print.

The Pretty Print Debug toolbar button and menu option allows for manual toggling of this view. This option is important in two cases:

When debugging these JavaScript constructs, you may find that the line numbers displayed in the Call Stack are wrong, sometimes even specifying a line number beyond the last line of the file. This is a side-effect of the JavaScript library constraints mentioned earlier, and an indicator that you should switch to Pretty Print mode (if Komodo has not done this automatically).

Configuring the JavaScript Debugger

  1. If you have not already done so, download and install the Firefox browser for your operating system / platform.
  2. In Komodo, on the Edit menu, click Preferences
  3. In the Preferences dialog box under Languages, click JavaScript.
  4. Click Install/Upgrade 'Komodo JavaScript Debugger' Firefox extension.
  5. Follow the steps in the Firefox Software Installation dialog box to install jslib.xpi and komodo_javascript_debugger.xpi.

Alternatively, launch Firefox and navigate to the /lib/support/modules/ subdirectory of your Komodo installation and open the xpi files.

Once these extensions have been installed, the Komodo JavaScript Debugger extension must be configured to communicate with Komodo. In Firefox, click Tools | Komodo JavaScript Debugger | Options.

The following configuration options are available:

When debugging JavaScript, Komodo attempts to fetch the code from the URI used in the browser unless otherwise specified. If you want to actually edit the file while debugging, you will need to map the URI to a local or remote filesystem directory. Specify these mappings in Mapped URIs under File | Preferences....

Debugging JavaScript

To begin a JavaScript debugging session:

  1. Click Debug | Listen for Debugger Connections in Komodo if it is not already selected.
  2. Open the web page or local file you wish to debug in Firefox.
  3. In Firefox, click Connect to Komodo Debugger in the Komodo JavaScript Debugger toolbar or click Tools | Komodo JavaScript Debugger | Connect to Komodo Debugger.
  4. In Firefox, click or mouse over a JavaScript control or, if your page contains one, wait for a JavaScript timer event.

At this point the New Remote Debugger Connection dialog box may appear asking if you want to accept the debugger session. Click Yes to open the program in a new editor tab. Select "Don't ask me again." to automatically accept all remote debugging sessions in future.

Breakpoints can now be set and the program can be interactively debugged in Komodo. See Komodo Debugger Functions for full instructions on using Komodo's debugging functionality.