MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 53412 of HTML panel

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

Revision Content

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