March 25, 2011, 12:04 p.m.
posted by redcraft
Sick of alert( )? Trade up to Venkman, Mozilla's GUI-oriented script-debugging tool
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:
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:
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.
2.1 View web page scripts
Let's view the web page through the Venkman lens. After fully installing Venkman, follow these steps:
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.
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.
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.
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.
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!
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.