Debugging JavaScript Komodo IDE only

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:

• JavaScript in an HTML element: When JavaScript is used within an HTML element, the Komodo JavaScript Debugger currently returns a code object without the HTML context. For example:

  <p><a onclick="javascript:alert('This is an alert!');">Click me.</a><p>
  

  If this construct were on line 200 of an HTML file, the debugger would not open the HTML file at line 200, but automatically display the following in Pretty Print mode:

  function onclick(event) {
  javascript:
     alert("This is an alert!");
  }
  

• eval(): As JavaScript does not have a 'use' statement to pull in modules, eval() is often used to dynamically load JavaScript code (common in various JavaScript web toolkits). When stepping through the contents of an eval() it will often be helpful to switch to Pretty Print mode.

  In the following example the string being evaluated is actually JavaScript code defined in the code variable.

  <script language="javascript" type="text/javascript">
    var code = "var i = 1; \n" +
    "var j = 2; \n" +
    "alert('i + j = ' + (i + j)); \n";
  
    function runIt() {
       eval(code);
       }
  
    runIt();
  </script>
  

  When stepping through this code in normal mode, Komodo will spend several extra steps on the eval(code) line without jumping up to the embedded code in the var code section. In more complex JavaScript, or in eval() instances that call external files or dynamically generated code, this would be quite uninformative.

  In Pretty Print mode, the code objects are returned individually, each in a new editor tab, as you step through the code. When the eval(code) line is encountered, a new tab will open up displaying the embedded JavaScript from the var code section.

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:

• Host: This is set to 127.0.0.1 (localhost) by default and should not normally need to be changed. If Firefox is running on a different host, or if you are using a DBGP Proxy, set the appropriate IP address here.
• Port: This should be set to the same value that is set in Komodo's Debugger preferences. This port setting can also be checked by clicking Debug | Listener Status.
• Use Proxy: Select this option if you are connecting to Komodo via a DBGP Proxy.
• Proxy Key: If Use Proxy is selected, this should be set to the same value configured in Komodo's Debugger preferences.

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.