Layout debugger

  • Revision slug: Layout_Debugger
  • Revision title: Layout debugger
  • Revision id: 90315
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment clean up; 239 words added, 83 words removed

Revision Content

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.

Layout debugger with shown toggle menu

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.

Onscreen information

This section covers common display options and when they are useful.

Visual debugging

This is useful for spotting box size errors.

visual_debug.png

Event debugging

Helps track down problems with links that aren't working, for example.

event_debug.png

Reflow Statistics

For identifying and solving problems related to missing reflows.

reflow_stats.png

Paint and invalidate information

These options provide useful information about the process of painting and invalidating content.

Paint dumping

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

Invalidate dumping

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

 

Event information

These options provide useful information about events, which can help debug assorted event related problems.

Event dumping

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.

Note: Need content here.
  

Webshells and content

Options that provide information about webshells and content.

Dump webshells

Dumps information about webshells.

Note: This could use more details.
02EBC3D4 '' parent=00000000 <
  035756EC '' parent=02EBC3D4 <

  >
>

Dump content

This dumps the content tree; however, you'll find that Firebug and DOM Inspector are much better debugging tools for this task.

        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.

Dump frames

Provides a dump of the frames that comprise the content.

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."
      >
    >
  >
>
Parameter Value in the above example
frame TableCell(td)
frame's 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

<p>The Layout Debugger was written by David Baron as a replacement for the old <code>viewer.exe</code>. 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.</p>
<p>The Layout Debugger can show you:</p>
<ul> <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>
<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>
<h2 id="Using_the_Layout_Debugger">Using the Layout Debugger</h2>
<p>To start the Layout Debugger, launch Firefox with the <code>-layoutdebug</code> command line option.  If you're using a debug build with <code>--enable-tests</code> (which is the default for debug builds), you can also choose the Layout Debugger menu item from the Tools menu.</p>
<h3 id="Onscreen_information">Onscreen information</h3>
<p>This section covers common display options and when they are useful.</p>
<h4 id="Visual_debugging">Visual debugging</h4>
<p>This is useful for spotting box size errors.</p>
<p><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></p>
<dl><span id="1302243065525S" style="display: none;"> </span></dl> <h4 id="Event_debugging">Event debugging</h4> <p>Helps track down problems with links that aren't working, for example.</p> <p><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></p> <h4 id="Reflow_Statistics">Reflow Statistics</h4> <p>For identifying and solving problems related to missing reflows.</p> <p><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><span id="1302243085725E" style="display: none;"> </span></p> <h3 id="Paint_and_invalidate_information">Paint and invalidate information</h3> <p>These options provide useful information about the process of painting and invalidating content.</p> <h4 id="Paint_dumping">Paint dumping</h4> <p>Dumps pointers to the widgets that are being painted, as well as their IDs and rectangles.</p> <pre>   1 PAINT      widget=02F0FD14  id=000A0318 rect=587,0    15,343
   2 PAINT      widget=03083564  id=00070330 rect=  0,0   587,343</pre> <h4 id="Invalidate_dumping">Invalidate dumping</h4> <p>As content is invalidated (that is, marked to be redrawn next time painting occurs), the corresponding widgets' pointers, IDs, and regions are dumped.</p> <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> <h4 id="Paint_+_invalidate_dumping">Paint + invalidate dumping</h4> <p>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.</p> <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> <p> </p> <h3 id="Event_information">Event information</h3> <p>These options provide useful information about events, which can help debug assorted event related problems.</p> <h4 id="Event_dumping">Event dumping</h4> <p>Dumps information about events as they get handled.</p> <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> <h4 id="Motion_event_dumping">Motion event dumping</h4> <p>Dumps additional mouse movement events.</p> <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> <h4 id="Crossing_events_dumping">Crossing events dumping</h4> <p>This works only for gtk builds.</p> <div class="note"><strong>Note:</strong> Need content here.</div> <pre>  </pre> <h3 id="Webshells_and_content">Webshells and content</h3> <p>Options that provide information about webshells and content.</p> <h4 id="Dump_webshells">Dump webshells</h4> <p>Dumps information about webshells.</p> <div class="note"><strong>Note:</strong> This could use more details.</div> <pre>02EBC3D4 '' parent=00000000 &lt;
  035756EC '' parent=02EBC3D4 &lt;

  &gt;
&gt;</pre> <h4 id="Dump_content">Dump content</h4> <p>This dumps the content tree; however, you'll find that <a class=" link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a> and <a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a> are much better debugging tools for this task.</p> <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> <h3 id="Debug_frame_construction">Debug frame construction</h3> <p>Options that provide information about frame construction.</p> <h4 id="Dump_frames">Dump frames</h4> <p>Provides a dump of the frames that comprise the content.</p> <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 class="standard-table"> <tbody>  <tr> <td class="header">Parameter</td> <td class="header">Value in the above example</td> </tr> <tr> <td>frame</td> <td><code>TableCell(td)</code></td> </tr> <tr> <td>frame's 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>
Revert to this revision