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).
- If you have not already done so, download and install the Firefox browser for your
operating system / platform.
- In Komodo, on the Edit menu, click Preferences
- In the Preferences dialog box under Languages, click
JavaScript.
- Click Install/Upgrade 'Komodo JavaScript Debugger' Firefox
extension.
- 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 the Properties button in the new Komodo
JavaScript Debugger toolbar or,
- Click Tools | Komodo JavaScript Debugger |
Configure
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....
To begin a JavaScript debugging session:
- Click Debug | Listen for Debugger Connections in Komodo if it is not already selected.
- Open the web page or local file you wish to debug in Firefox.
- In Firefox, click Enable/Disable in the Komodo JavaScript Debugger toolbar or
click Tools | Komodo JavaScript Debugger |
Enable Debugging.
- 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.
|