This article is in need of a technical review.
The Layout Debugger was written by David Baron as a replacement for the old
viewer.exe. It's now available in any debug trunk build. The tool provides access to some advanced debugging facilities that can be useful when diagnosing and fixing layout bugs.
The Layout Debugger can show you:
- Box dimensions of blocks without a border.
- The targets of mouse events.
- Flashes for every paint.
- How many times a frame has been reflown.
- Frame and view information.
Using the Layout Debugger
To start the Layout Debugger, launch Firefox with the
-layoutdebug command line option. If you're using a debug build with
--enable-tests (which is the default for debug builds), you can also choose the Layout Debugger menu item from the Tools menu.
This section covers common display options and when they are useful.
This is useful for spotting box size errors.
Helps track down problems with links that aren't working, for example.
For identifying and solving problems related to missing reflows.
Paint and invalidate information
These options provide useful information about the process of painting and invalidating content.
Dumps pointers to the widgets that are being painted, as well as their IDs and rectangles.
1 PAINT widget=02F0FD14 id=000A0318 rect=587,0 15,343 2 PAINT widget=03083564 id=00070330 rect= 0,0 587,343
As content is invalidated (that is, marked to be redrawn next time painting occurs), the corresponding widgets' pointers, IDs, and regions are dumped.
49 Invalidate widget=03083564 id=00070330 rect= 0,0 587,343 sync=no 50 Invalidate widget=02F0FD14 id=000A0318 rect= 0,0 602,343 sync=no
Paint + invalidate dumping
You should usually use both paint and invalidate dumping at the same time when tracking invalidate and/or paint issues, since they're closely related.
100 Invalidate widget=02F0FD14 id=000A0318 rect=587,15 15,313 sync=no 101 Invalidate widget=02F0FD14 id=000A0318 rect=587,0 15,343 sync=no 102 PAINT widget=02F0FD14 id=000A0318 rect=587,0 15,343
These options provide useful information about events, which can help debug assorted event related problems.
Dumps information about events as they get handled.
740 NS_LOSTFOCUS widget=02EE042C name=something id=000802E8 pos=0,0 741 NS_GOTFOCUS widget=03583E34 name=something id=00080330 pos=0,0 742 UNKNOWN: 108 widget=03583E34 name=something id=00080330 pos=0,0
Motion event dumping
Dumps additional mouse movement events.
845 NS_MOUSE_MOVE widget=03079A4C name=something id=007D046A pos=22,69 846 NS_MOUSE_MOVE widget=03079A4C name=something id=007D046A pos=2,67
Crossing events dumping
This works only for gtk builds.
Webshells and content
Options that provide information about webshells and content.
Dumps information about webshells.
02EBC3D4 '' parent=00000000 < 035756EC '' parent=02EBC3D4 < > >
tr@03696298 refcount=2< Text@036962F0 refcount=1<\n\n> td@03695298 refcount=3< Text@036952F0 refcount=2<This is column one.> > Text@036953D8 refcount=1<\n\n> td@03695468 refcount=3< Text@036954C0 refcount=2<This is column two.> > Text@03693A80 refcount=1<\n\n> ></dd>
Debug frame construction
Options that provide information about frame construction.
Provides a dump of the frames that comprise the content.
|Parameter||Value in the above example|
|corresponding content node||