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 mouse scrollwheel code at line 5256 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;  <-- breakpoint here
5257         static ULONG ulScrollLines, ulScrollChars = 1;
5258         static int currentVDelta, currentHDelta;
5259         static HWND currentWindow = 0;
5260 
5261         PRBool isVertical = msg == WM_MOUSEWHEEL;
...

• 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. 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

• Debugging using Visual Studio.NET 2005
• Debugging Mozilla on Windows FAQ
• Debugging on Mac OS X
• Venkman Tutorial