Layout debugger

  • Revision slug: Layout_Debugger
  • Revision title: Layout debugger
  • Revision id: 90310
  • Created:
  • Creator: Ehsan
  • Is current revision? No
  • Comment 35 words added

Revision Content

  • The Layout Debugger was written by David Baron as a replacement for the viewer.exe. Due to Ehsans work it's now available in any decent (aka debug) trunk build.. The tool provides access to some advanced debugging facilities that might be usefull for the folks who diagnose and fix layout bugs. These are also the people who usually build debug builds.

    Layout debugger with shown toggle menu

  • It can show:
    • 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

To start it launch firefox with the -layoutdebug at the command line.  If you are on 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.

Onscreen Information

Common display options and when they are useful

 

Visual debugging
for box size errors
visual_debug.png
Event debugging
for problems with links not working
event_debug.png
Reflow Statistics
when you have missing reflows
reflow_stats.png

Paint and Invalidate Information

Paint Dumping
   1 PAINT      widget=02F0FD14  id=000A0318 rect=587,0    15,343
   2 PAINT      widget=03083564  id=00070330 rect=  0,0   587,343
Shows the painted widget (pointer) and its rectangle.
Invalidate Dumping
  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
Shows the widget and the region that are marked for the next painting.
Paint + Invalidate Dumping
Both should be used together when tracing invalidate - paint issues.
 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

 

Event Information

Event Dumping
 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
Shows the handled events.
Motion Event Dumping
 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
Displays additional mouse motion events.
Crossing Events Dumping
This works only for gtk builds
  

Webshells and Content

Dump Webshells
02EBC3D4 '' parent=00000000 <
  035756EC '' parent=02EBC3D4 <

  >
>
Dump Content
        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> 
Shows the content tree - use the more convenient Firebug/Inspector.

Debug Frame construction

Dump Frames
TableCell(td)(1)@036D4034 next=036D41C4 {24,0,4956,288}[state=00000014] [content=03695298] [sc=036D3F78]<
  Block(td)(1)@036D40A8 {24,24,4908,240} [state=00c00014] sc=036D40FC(i=1,b=0)<
    line 036D4194: count=1 state=inline,clean,prevmargin clean,not impacted,not wrapped,nobr[0x1000] mew=516 {0,0,1380,240} <

      Text(0)@036D4154[0,19,T]  {0,6,1380,228} [state=40000034] sc=036D4128<
          "This is column one."
      >
    >
  >
>
displayed parameters
frame TableCell(td)
frames address @036D4034
next sibling next=036D41C4
box parameter {24,0,4956,288}
frame state [state=00000014]
corresponding content node [content=03695298]
style context [sc=036D3F78]

Revision Source

<ul> <li>The Layout Debugger was written by David Baron as a replacement for the viewer.exe. Due to <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=534694">Ehsans work</a> it's now available in any decent (aka debug) trunk build.. The tool provides access to some advanced debugging facilities that might be usefull for the folks who diagnose and fix layout bugs. These are also the people who usually build debug builds. <p><a href="/@api/deki/files/4405/=layoutdebugMain.png" title="Layout debugger with shown toggle menu"><img alt="Layout debugger with shown toggle menu" class="internal default" src="/@api/deki/files/4405/=layoutdebugMain.png"></a></p> </li> <li>It can show: <ul style="margin-top:10px"> <li>box dimensions of blocks without a border</li> <li>the targets of mouse events</li> <li>flashes for every paint</li> <li>how many times a frame has been reflown</li> <li>frame and view information</li> </ul> </li>
</ul>
<p>To start it launch firefox with the <code>-layoutdebug</code> at the command line.  If you are on 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.</p>
<h2>Onscreen Information</h2>
<p>Common display options and when they are useful</p>
<p> </p>
<dl> <dt>Visual debugging</dt> <dd>for box size errors</dd> <dd><a href="/@api/deki/files/4404/=visual_debug.png" title="/@api/deki/files/4404/=visual_debug.png"><img alt="visual_debug.png" class="internal default" src="/@api/deki/files/4407/=visual_debug.png"></a></dd> <dd> </dd><dt>Event debugging</dt> <dd>for problems with links not working</dd> <dd><a href="/@api/deki/files/4407/=event_debug.png" title="/@api/deki/files/4407/=event_debug.png"><img alt="event_debug.png" class="internal default" src="/@api/deki/files/4404/=event_debug.png"></a></dd> <dt>Reflow Statistics</dt> <dd>when you have missing reflows</dd> <dd><a href="/@api/deki/files/4407/=visual_debug.png" title="Reflow Stats"><img alt="reflow_stats.png" class="internal default" src="/@api/deki/files/4406/=reflow_stats.png"></a></dd>
</dl>
<h3>Paint and Invalidate Information</h3>
<dl> <dt>Paint Dumping</dt> <dd> <pre>   1 PAINT      widget=02F0FD14  id=000A0318 rect=587,0    15,343
   2 PAINT      widget=03083564  id=00070330 rect=  0,0   587,343</pre> Shows the painted widget (pointer) and its rectangle.</dd> <dt>Invalidate Dumping</dt> <dd> <pre>  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</pre> Shows the widget and the region that are marked for the next painting.</dd> <dt>Paint + Invalidate Dumping</dt> <dd>Both should be used together when tracing invalidate - paint issues. <pre> 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
</pre> </dd>
</dl>
<p> </p>
<h3>Event Information</h3>
<dl> <dt>Event Dumping</dt> <dd> <pre> 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</pre> Shows the handled events.</dd> <dt>Motion Event Dumping</dt> <dd> <pre> 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</pre> Displays additional mouse motion events.</dd> <dt>Crossing Events Dumping</dt> <dd>This works only for gtk builds <pre>  </pre> </dd>
</dl>
<h3 class="center">Webshells and Content</h3>
<dl> <dt>Dump Webshells</dt> <dd> <pre>02EBC3D4 '' parent=00000000 &lt;
  035756EC '' parent=02EBC3D4 &lt;

  &gt;
&gt;</pre> </dd> <dt>Dump Content</dt> <dd> <pre>        tr@03696298 refcount=2&lt;
          Text@036962F0 refcount=1&lt;\n\n&gt;

          td@03695298 refcount=3&lt;
            Text@036952F0 refcount=2&lt;This is column one.&gt;
          &gt;
          Text@036953D8 refcount=1&lt;\n\n&gt;
          td@03695468 refcount=3&lt;
            Text@036954C0 refcount=2&lt;This is column two.&gt;

          &gt;
          Text@03693A80 refcount=1&lt;\n\n&gt;
        &gt;&lt;/dd&gt; </pre> Shows the content tree - use the more convenient Firebug/Inspector.</dd>
</dl>
<h3>Debug Frame construction</h3>
<dl> <dt>Dump Frames</dt> <dd> <pre style="width:980px; overflow:hidden;">TableCell(td)(1)@036D4034 next=036D41C4 {24,0,4956,288}[state=00000014] [content=03695298] [sc=036D3F78]&lt;
  Block(td)(1)@036D40A8 {24,24,4908,240} [state=00c00014] sc=036D40FC(i=1,b=0)&lt;
    line 036D4194: count=1 state=inline,clean,prevmargin clean,not impacted,not wrapped,nobr[0x1000] mew=516 {0,0,1380,240} &lt;

      Text(0)@036D4154[0,19,T]  {0,6,1380,228} [state=40000034] sc=036D4128&lt;
          "This is column one."
      &gt;
    &gt;
  &gt;
&gt;</pre> <table cellspacing="3"> <caption style="margin-top:-2em">displayed parameters</caption> <tbody> <tr> <td>frame</td> <td><code>TableCell(td)</code></td> </tr> <tr> <td>frames address</td> <td><code>@036D4034</code></td> </tr> <tr> <td>next sibling</td> <td><code>next=036D41C4</code></td> </tr> <tr> <td>box parameter</td> <td><code>{24,0,4956,288}</code></td> </tr> <tr> <td>frame state</td> <td><code>[state=00000014]</code></td> </tr> <tr> <td>corresponding content node</td> <td><code>[content=03695298]</code></td> </tr> <tr> <td>style context</td> <td><code>[sc=036D3F78]</code></td> </tr> </tbody> </table> </dd>
</dl>
Revert to this revision