View source for Dive into Mozilla Debugging Mozilla Lab

[[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 Visual Studio.NET 2005 ===

* In VS.NET, click '''File > Open > Project/Solution....'''  Navigate to your debug-built firefox.exe, perhaps in '''mozilla/objdir/dist/bin'''.  This will create a '''Solution File (.sln)''' in the same directory as firefox.exe.

* Now right-click firefox.exe in '''Solution Explorer''' and add '''MOZ_NO_REMOTE=1''' to the list of '''Environment variables'''.

*  Open a source file ('''File > Open > File...'''), for example, '''mozilla/widget/src/windows/nsWindow.cpp''', and set a breakpoint.  You do this by clicking to the left of the line numbers--you should see a '''red circle'''.  For example, you could set a breakpoint on the [http://lxr.mozilla.org/seamonkey/source/widget/src/windows/nsWindow.cpp#5253 mouse scrollwheel code] at '''line 5261''' to see when it gets executed and how it works:

 4289 PRBool nsWindow::ProcessMessage(UINT msg, WPARAM wParam, LPARAM lParam, LRESULT *aRetValue)
 4290 {
 ...
 5253       // Handle both flavors of mouse wheel events.
 5254 #ifndef WINCE
 5255       if (msg == WM_MOUSEWHEEL || msg == WM_MOUSEHWHEEL) {
 5256         static int iDeltaPerLine, iDeltaPerChar;
 5257         static ULONG ulScrollLines, ulScrollChars = 1;
 5258         static int currentVDelta, currentHDelta;
 5259         static HWND currentWindow = 0;
 5260 
 5261         '''PRBool isVertical = msg == WM_MOUSEWHEEL;'''  <-- breakpoint here
 ...

* Now run Firefox from within VS.NET by pressing '''F5''' or by clicking '''Debug > Start Debugging'''.

* Try rolling the mouse scrollwheel once the browser is fully loaded.

* When you get dropped into the debugger, you can advance line-by-line using '''F11'''.  VS.NET will automatically load the other source files it needs to show you what's happening. Notice the '''Call Stack''' window, which will help orient you as you learn the program's flow. Also, notice how you can inspect variables at run-time using the '''Autos''' window.

=== 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]