| home / programming / javascript / venkman / 2 |   [previous] |
|
|
|
Now that you can step through your JavaScript code bit by bit, you can set breakpoints in order to halt the execution on or before a particular function is reached. You can do this by setting breakpoints within your JavaScript code.
Freeze the execution of code on your page by hitting the Stop button in Venkman, and then reload your page so that you can actively step through your code. When you're on a line containing relevant code, you should see a small horizontal line appear beside the lines containing the scope of a particular function in the Source Code window. Click once on one of these small horizontal lines and you should see a white letter B appear against a red background, indicating that you have successfully added a breakpoint.
You can step over this code and try executing the rest of the JavaScript on the page, but if you have selected a function contained within an unfinished loop, you'll find yourself back where you started. If not, try re-running the Web page and you'll find that it will stop executing at the breakpoint you have just set. You have just set a "hard" breakpoint, which stops JavaScript dead at the point you indicated. In Venkman, you'll also notice a reference to your breakpoint appears in the Breakpoints window, and that a small red dot is now visible alongside the name of your function in the Loaded Scripts window. All this is just to let you know exactly at which function and where you can find the breakpoint in your page's code. If you continue to step through your JavaScript and want to return to your breakpoint, just double-click on the reference to it in the Breakpoints window and it will immediately return to that point in your code. If you want to drop a breakpoint while still wanting to step through another part of your code on the page, right-click on the breakpoint reference in the Breakpoints window and select Clear Breakpoint.
If ahead of time, you know you want to inspect a section of code and also want Venkman to halt at that same point, you can directly insert the word debugger; from a Web page editor into that pertinent section of code. Essentially, this offers the same function as a hard breakpoint, and Venkman will automatically halt the execution at that point in your JavaScript code. If you using this function, be aware that browsers other than Mozilla might fail when they hit this keyword, so ensure that you remove any instances of it after you've successfully debugged your code, and before you promote your page to your Web server.
Another part of Venkman we haven't investigated yet is the Local Variables window. Once you've isolated a part of your code that you suspect is of causing problems, you can change the value of the variable to see if that provides a solution. In the Local Variables window you'll see the name for the variable and its current value. If it reads void, that's because the Venkman hasn't reached it in its code execution as yet, and it has yet to be assigned a value. When the particular line containing the code is executed the variable is fully declared, and its corresponding value will be displayed. Right-click the variable you want to alter in the Local Variables window and select Change Value. A prompt appears, allowing you to change the value for that variable. Change it, click OK and the rest of the code will execute on your Web page. If this solves your problem, the rest of your page will execute the way you intended. Note that Venkman does not actually change the source code on your Web page - if you have found your problem and managed to fix it using Venkman, you still need to use a Web editor to actually change the affected code - when variables are changed in Venkman their effects are executed virtually, and allow you to see the effect without actually having altered your source in any way.
You now have the basic information necessary to begin some effective debugging of your JavaScript code in Venkman. Use breakpoints to halt the execution of code where you think things may be going wrong, and change the values of variables to see how this affects code execution.
So if you have some particular "ghost-busting" to do in your JavaScript code, call upon Mozilla's Venkman. It may not be able to scare away any non-JavaScript spooks in your code - like the character Dr. Venkman did on the streets of Manhattan with his particle gun in Ghostbusters - but it will help you track down and snare your JavaScript gremlins.
Compiled by Keith Schengili-Roberts
| home / programming / javascript / venkman / 2 | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: October 31, 2003
URL: URL: http://webreference.com/programming/javascript/venkman/2
