| home / programming / javascript / venkman / 1 |   [previous] |
|
|
|
A good example of a page containing JavaScript is the page you are currently reading on the WebReference Web site, which is loaded with all sorts of interesting JavaScript code. If you aren’t reading this page in either Mozilla or Netscape, do so and launch Venkman in the one of the ways described above.
What you should see is a window containing 5 different panels and a toolbar with some large icons on top. On the left side you’ll see panels titled “Loaded Scripts”, “Local Variables” and “Breakpoints”, and on the right side you will see “Source Code” and “Interactive Session”. The Loaded Scripts area displays all of the JavaScript functions Venkman can identify, as well as the source files that can contain JavaScript – including HTML, separate JavaScript (.js), XML or Extensible User Interface Language (XUL) files that may be referenced. The Local Variables section will show detail about the variables available to the program and Breakpoints displays the name given to any place in the program where you want to halt the action of your code during debugging mode. The Source Code view shows all of the HTML and JavaScript contained on the page, and the Interactive Session area should display some introductory text about the debugger. It’s worth noting that these are not all of the panels available in Venkman, but the default panels are good for a basic introduction to some of the program’s features. All of these panels can be moved and resized – click on the square in the upper-left of each panel and it will appear separately from the rest of the display, or click on the “X” in their upper-right corner to get rid of a particular panel.
When loading up this page in Venkman, you should see a listing of various code elements appear in the Loaded Scripts section. Click on a couple of them and you should now see the associated code for them appear in the Source Code window. Notice that the Source Code window now displays two tabs, one for each of the two scripts you just clicked on, making it easy for you to shuttle between scripts that may interact with each other. If you scroll the text, you will also notice that the lines are numbered and the text is color-coded. If you click on the right-pointing arrow in the Loaded Script section it will expose the JavaScript function associated with it, and the line numbers they start on in the master file. Beside the highlighted line in the Source Code window you should also see a dark gray section to the left of the line code numbers with a “-” symbol in it. Click here once and you set a breakpoint in the code: a white “B” appears against a red background and the name of the function appears in the Breakpoints panel. This sets where you can interrupt the code when it runs in order to isolate problems you may be experiencing with a particular section of code.
The above example is of Venkman with a page loaded.
The other section worth a closer look is the Interactive Session area. Below the introductory section you will see a field where you can enter text. This section is an interactive JavaScript console, with Venkman-specific commands beginning with “/”. To test this out, try entering the following on separate lines:
a = 2
b = 3
a+b
The result should be “5”.
By now you should be getting a sense of how things are going, and how you may
be able to make use of Venkman to debug your JavaScript code. In the next article,
we’ll look into this in more detail.
Compiled by Keith Schengili-Roberts
| home / programming / javascript / venkman / 1 | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: August 12, 2003
URL: URL: http://webreference.com/programming/javascript/venkman/1
