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.
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.
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).
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....
To begin a JavaScript debugging session:
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.