Team LiB
Previous Section Next Section

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:

  1. 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.

  2. 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.

  3. 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:

  1. Start it from the ToolsJavaScript Debugger menu item.

  2. Check that the Loaded Scripts pane is visible in the top left. It should be selected under ViewShow/HideLoaded Scripts.

  3. 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.

  4. You've now completed the initial sanity checks. Close the debugger window, which shuts down Venkman.

  5. Open a new browser window and display the sample page debug.html in it. From that window, start Venkman with ToolsJavaScript Debugger.

  6. 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.

  7. 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:

  1. 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.

  2. 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:

  1. 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.

  2. 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:

  1. Bring the Venkman window to the front again.

  2. 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.

  3. Bring the browser window showing debug.html to the front again.

  4. 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.

  5. 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.

    Team LiB
    Previous Section Next Section