Dive into Mozilla Debugging Mozilla Lab
Revision as of 19:42, 28 February 2007 by David.humphrey (talk | contribs)
Dive into Mozilla > Dive into Mozilla Day 4 > Debugging Mozilla Lab
Overview
This lab is designed to give you first-hand experience using C++ and JavaScript debugging tools, as well as introduce you to other important development tools necessary for debugging Mozilla applications and code.
Instructions
C++ with VS.NET
JavaScript with Venkman
- Download and install the Venkman JavaScript debugger: https://addons.mozilla.org/firefox/216/. You could also build it from source in your tree (it's an extension just like FirstXpcom):
$ cd mozilla/objdir $ ../build/autoconf/make-makefile extensions/venkman $ cd extensions/venkman $ make
- Run your browser (i.e., restart if you install as an add-on, or run your build) and you'll have a new option in your Tools menu: JavaScript Debugger
- By default, Mozilla's JavaScript files are not visible. Venkman is set to debug the current web application instead. We need to add these manually:
Debug > Exclude Browser Files (uncheck)
- Look at the scripts in the Loaded Scripts panel. You'll see .js, .xml, .xul, etc. files, since these can all contain JavaScript. Look for browser.js (i.e., chrome://browser/content/browser.js) and you'll find many of the functions driving the UI for Firefox.
- Expand browser.js, you'll see blue boxes that represent functions (NOTE: __toplevel__ denotes code not defined within a function).
- In browser.js, locate the BookmarkThisTab() function. Set a breakpoint, by left-clicking in the gray margin to the left of the line numbers. You should see a red 'B'. NOTE: all lines that can have a breakpoint set (a so-called hard break point) will have a '-' (i.e., dash) in the margin as an indicator. Also note that you can turn a breakpoint off by clicking again (it will turn to 'F' for "Future Breakpoint" -- used for __toplevel__ code -- then disappear). The debugger will stop before it executes the line breakpointed.
- Now, back in the browser, open a tab (CTRL+T) and right-click so you can select "Bookmark This Tab..." You should end-up back in the debugger at your breakpoint.
- You can execute the code line-by-line using the "Step Into" command (F11) and stop debugging (i.e., go back to normal execution) using "Continue" (F5). You may also want to scroll ahead and set more breakpoints and then use Continue (F5) to jump to them (NOTE: all code in between is executed normally, saving you from having to step through it manually).
- While you're stopped in the debugger, notice the Call Stack and Local Variables panels, which give important information about the runtime environment of your code.
- You probably want to turn on more fields for the Local Variables panel. Do this by clicking the drop-down in the upper-right corner of the panel and select "Type."
- NOTE: you can use the following code in your JavaScript to automatically have Venkman drop you into the debugger (don't leave this in production code, though):
debugger;
For an example of this, see:
http://lxr.mozilla.org/seamonkey/source/calendar/providers/wcap/calWcapCalendar.js#128
