Learning the JavaScript debugger Venkman
a Venkman guide that's slightly more useful then a towel
First, you need to download Mozilla, if you haven't already. Venkman is not a standalone tool. It's integrated into Mozilla, and thus can only be used to debug scripts in Mozilla, or any browser based upon Mozilla (yet another great reason to write stuff that works in Mozilla!) This guide was written using the Venkman version (0.9.75) shipping with Mozilla 1.5 Alpha, but go to www.mozilla.org, and just grab the latest Mozilla release. Note, that you have to get Mozilla, and not Firebird (as of version 0.6.1, Firebird doesn't ship with Venkman, you CAN get Venkman for Firefox, but Mozilla integrates it better). Also note, that Netscape 7.1 ships with Venkman, but I don't know what version, so if you're running this Netscape, I recommend checking out the "If you already have Mozilla" section, just below, to upgrade Venkman.
During installation, just select "Complete" under Setup Type. If you select "Custom", make sure to keep "Debugger" and "DOM inspector" checked (see Figure 1). "Debugger" is obviously Venkman, and "DOM inspector" is another useful tool (that I won't cover here, but maybe another page, another day ... )
Figure 1.
Make sure that Debugger and DOM inspector are both checked.
If you already have an install of Mozilla, and don't want to upgrade, you can simply upgrade Venkman at the Venkman development pages. Thanks to Mozilla's so called XPInstall, installing or upgrading is as simple as clicking a link. I have not tried, but this should work, even for Firebird users.
Now that you've installed Mozilla (hopefully without problems), it's time to fire up Venkman. When you start Mozilla, you'll see Mozilla's start page. While the start page might look different for you, you should still be able to find Venkman, by going Tools -> Web development -> JavaScript debugger, as in figure 2. You might want to note, that the Venkman FAQ has three (3) different ways of starting Venkman, to suit all needs.
Figure 2.
Starting Venkman, through Mozilla's "tools" menu (click for unscaled version).
Note, that when you start Venkman like this, the page (and thus, the script contained in the page) being debugged is the one loaded into Mozilla. Since Mozilla supports tabbed browsing, and multiple documents, you can debug several pages at once (though, to stay sane, I recommend focusing on one thing at a time).
Once Venkman has started up, it should look something like figure 3 (below).
If it looks like some panels are missing, or are in the wrong place,
just type in "/restore-layout factory" into the console
(lower right corner in screenshot), to have it restore back to the default
layout.
Figure 3.
Venkman looks roughly like this, after starting it up (click for unscaled version).
Venkman contains a total of eight windows, offering up information. Sometimes, some of this information is more important then other the information. Here now, is a quick guide to how to configure the layout (which is pretty much by clicking and drag and drop). To see what kinda layouts are possible, I recommend checking out Robert Ginda's collection of screenshots.
At any time, you want to go back to the startup layout,
you can enter "/restore-layout factory" into the console.
Under the "view" menu, you'll also see two options, "Save Default Layout Now" and "Save Default Layout On Exit". If you want Venkman to remember whatever layout you make, for future sessions, remember to have one of these checked, depending on what you want.
Each panel contains the same four elements, which can be seen in figure 4.
Figure 4.
Various window controls, that allow you to configure Venkman's layout.
Making a Window free from Venkman is as simple as clicking the "Undock/dock" button on the panel you want to rip out of the program. It'll become a window on it's own, that you can drag around.
Figure 5.
Undocking a window allows you to make it a lot bigger, and if you
have a dual monitor setup, take full advantage of both screens.
Getting the Window back into Venkman is as simple as clicking the same button again.
If you don't like the way the Windows are laid out, you can simply grab the title bar area, and drag it to where you want it to appear. As you drag a window onto another area, a black bar should appear on the side, where, if you drop the window, the window will appear (the docking button might change to an arrow also, but I don't always see it, the black bar always appears though).
Figure 6.
Dragging a window onto another, a black bar appears, indicating
where the window will appear if dropped here.
I suggest you move some windows around, to get a feel for it. Further, you'll notice that some windows already come as panels (or tabbed pages, whichever you like, I'll call them panels here.) If you want to put two windows on top of each, simply drop the window onto the docking button. It should change to a star, to indicate "drop here, and it'll turn into a panel instead".
Figure 7.
Docking a windows, so that it becomes a panel in the dropped onto window.
You can use the "Close" button, to hide a window. If you want it back, simply go into the "View" menu, and under the sub menu, "Show/Hide", check the window you want back.
Further, between each column/row of windows, there is a divider, with a grabber area, it should look something like in figure 8.
Figure 8.
Between each window area, a divider appears.
Clicking the marked area causes the area that the arrows point at, to be collapsed. Simply dragging it, let's you size the area instead.
The next section will start talking about how to actually use Venkman.