Hack 56. Debug JavaScript with Venkman
Sick of alert( )? Trade up to Venkman,
Mozilla's GUI-oriented script-debugging
tool
Before Firefox, there was the Mozilla Application Suite (MAS), and
that suite supported a script-debugging tool for complex web pages
that contain lots of scripts. That tool is called the
JavaScript Debugger, or
Venkman (a project name) for short.
Venkman
is also available for Firefox.
5.14.1. Finding and Installing Venkman
Beware, there's a lot of older and less relevant
information on the Web that describes Venkman. To use the debugger in
Firefox, you need a Venkman XPI bundle that behaves like an
extension. Here's the best way to find it:
Check the Mozilla Update web site (http://update.mozilla.org) for Venkman or for
the JavaScript Debugger under the Developer Tools category. Install
that and ignore the rest of this advice. There might have been some last minute problems in completing the
work required to make the debugger work perfectly with Firefox.
It's a large and complex tool. You can check bug
247507 at Bugzilla (http://bugzilla.mozilla.org) to see the
latest status. If you still have no success, then check these URLs for a
bleeding-edge version:
- http://silver.warwickcompsoc.co.uk/temp/
- http://silver.warwickcompsoc.co.uk/temp/venkman-0.9.84.xpi
After installation, as for all extensions, you must restart Firefox.
When restarting, if a complaint is issued that Venkman and Firefox
are incompatible in versions, then just proceed anyway. When Firefox
is fully started up, open the Extension Manager and locate JavaScript
Debugger in the list. Right-click on it and choose Enable from the
resulting context menu. After a further restart, the debugger should
now appear in the Tools menu and be ready to use.
5.14.2. Experimenting with Venkman
In this hack we'll reuse the HTML code used to test
the DOM Inspector [Hack #53] .
Let's call that page
debug.html.
5.14.2.1 View web page scripts
Let's view the web page through the Venkman lens.
After fully installing Venkman, follow these steps:
Start it from the ToolsJavaScript Debugger menu item. Check that the Loaded Scripts pane is visible in the top left. It
should be selected under ViewShow/HideLoaded
Scripts. Note that in the Loaded Scripts pane, there are lots of scripts
already listed. Venkman tries a little too hard to find scripts to
debug. Ignore these items. You've now completed the initial sanity checks.
Close the debugger window, which shuts down Venkman. Open a new browser window and display the sample page
debug.html in it. From that window, start
Venkman with ToolsJavaScript Debugger. In the new Venkman window, the Loaded Scripts pane should show an
extra line, debug.html, with an H icon next to it.
That's the loaded page successfully detected by
Venkman. Expand the debug.html line item; it shows one
script function named click_handler. Double-click
that name to see the source code appear in the
debugger's Source Code pane, with the function
highlighted.
If many functions were defined in this sample page, the Loaded Script
pane could be used to navigate all around the document by clicking on
the breakdown of functions. This is very useful for pages with
complex scripts or for analyzing the cryptic code used by big sites
like Google.
5.14.2.2 Run web page scripts
These steps continue directly from where the last steps left off.
Let's execute the click_handler() event handler twice, once from the web page and once from
the debugger. To do either, first tell Venkman which web page is
under scrutiny:
Reveal the Open Window pane. By default, it's
stacked underneath the Local Scripts pane. If that's
where it is, click the tab labeled Open Windows to bring it back to
the front. Otherwise, reveal it with
ViewShow/HideOpen Windows. In that pane, drill down into the browser pages listed until you find
the line for debug.html. Right-click
(Command-click) on that debug.html line item and
choose Set as Evaluation Object from the context menu.
Don't accidentally pick the item named
Browser Window. That will add
debug to the scripts in the browser window's chrome,
not to the scripts in the displayed page.
Now run click_handler( ) by hand:
Check that the Interactive Session pane is open, using
ViewShow/HideInteractive Session.
It's the large pane normally at the bottom right
with the one-line text box underneath. In the Interactive Session pane, type click_handler() into the text box. The window displaying the
debug.html page should come to the front showing
the alert that the click_handler() code creates.
Success!
Finally, run the debugger as a full interactive debugger:
Bring the Venkman window to the front again. Click the big red X icon in the top left, so that three dots appear
on it. Venkman is now primed to intercept any scripting activity in
the page under study. Bring the browser window showing debug.html to
the front again. Click on the sole link on the page. Venkman intercepts the start of
scripting and puts itself to the front. The first line of the
click_handler() function has been highlighted as
the current statement in the Source Code pane,
but it hasn't executed yet. The debugger has taken
control of JavaScript processing. Type /step into the text box in the Interactive
Session pane. The click_handler() function goes
forward one statement, which cases the alert to appear again. You
have controlled script execution from the debugger. Success!
Because there's only one statement in the handler
and because alert() is a more complex operation
to handle than a simple JavaScript if statement or
variable assignment, no further /step commands are
possible in this example. Try adding some simple multi-statement
logic to the handler instead of an alert() call
and rerunning this procedure.
5.14.3. See Also
Svend Tofte has written an excellent, but slightly aged, online
tutorial introduction to
Venkman.
It takes the brief exploration in this hack much further. Read it
here:
- http://www.svendtofte.com/code/learning_venkman/
In the tutorial screenshots, if Navigator Window appears, read
instead Browser Window. Those shots are taken with the Mozilla
Application Suite, not Firefox, but otherwise
everything's much the same. Also be cautious of
keyboard shortcuts recommended in the text.
|