667
edits
Changes
no edit summary
[[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. [http://developer.mozilla.org/en/docs/Using_Breakpoints_in_Venkman 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
== Resources ==
* [http://cs.senecac.on.ca/~david.humphrey/writing/debugging-firefox.html Debugging using Visual Studio.NET 2005]
* [http://developer.mozilla.org/en/docs/Debugging_Mozilla_on_Windows_FAQ Debugging Mozilla on Windows FAQ]
* [http://developer.mozilla.org/en/docs/Debugging_on_Mac_OS_X Debugging on Mac OS X]
* [http://www.svendtofte.com/code/learning_venkman/ Venkman Tutorial]
== 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. [http://developer.mozilla.org/en/docs/Using_Breakpoints_in_Venkman 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
== Resources ==
* [http://cs.senecac.on.ca/~david.humphrey/writing/debugging-firefox.html Debugging using Visual Studio.NET 2005]
* [http://developer.mozilla.org/en/docs/Debugging_Mozilla_on_Windows_FAQ Debugging Mozilla on Windows FAQ]
* [http://developer.mozilla.org/en/docs/Debugging_on_Mac_OS_X Debugging on Mac OS X]
* [http://www.svendtofte.com/code/learning_venkman/ Venkman Tutorial]