mozilla

Revision 53413 of HTML panel

  • Revision slug: Tools/Page_Inspector/HTML_panel
  • Revision title: HTML panel
  • Revision id: 53413
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 6 words added

Revision Content

{{ gecko_minversion_header("10.0") }}

The Page Inspector's HTML panel lets you look at the HTML representation of the element you've currently selected in the Page Inspector, as well as the surrounding HTML, so you can see the context in which the element occurs. This can be helpful for debugging your site, or for learning how a particular layout is achieved.

html-panel.png

While the HTML panel is visible, a resizer widget is available at the right end of the Page Inspector toolbar, so you can adjust how much of the HTML you can see at once.

You can click on a node in the HTML to select that element for further inspection.

Note: You can toggle the HTML panel on and off by pressing Ctrl-H.

See also

Revision Source

<p>{{ gecko_minversion_header("10.0") }}</p>
<p>The Page Inspector's HTML panel lets you look at the HTML representation of the element you've currently selected in the Page Inspector, as well as the surrounding HTML, so you can see the context in which the element occurs. This can be helpful for debugging your site, or for learning how a particular layout is achieved.</p>
<p><img alt="html-panel.png" class="internal default" src="/@api/deki/files/6073/=html-panel.png"></p>
<p>While the HTML panel is visible, a resizer widget is available at the right end of the Page Inspector toolbar, so you can adjust how much of the HTML you can see at once.</p>
<p>You can click on a node in the HTML to select that element for further inspection.</p>
<div class="note"><strong>Note:</strong> You can toggle the HTML panel on and off by pressing Ctrl-H.</div>
<h2>See also</h2>
<ul> <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li> <li><a href="/en/Tools" title="Tools">Tools</a></li>
</ul>
Revert to this revision