HTML panel

  • Revision slug: Tools/Page_Inspector/HTML_panel
  • Revision title: HTML panel
  • Revision id: 53417
  • Created:
  • Creator: kdangoor
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

{{ fx_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.

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

Navigating your HTML

You can click on a node in the HTML to select that element for further inspection. Also, if the HTML panel is open while you don't have a selected element, the HTML panel automatically refreshes to show you the HTML for the element the mouse is currently hovering over. This, too, can be a useful tool for searching the code to find problems.

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.

Experimenting with attributes

You can change the value of an HTML attribute by double-clicking the value in the source and entering a new one:

edit-html-attr.png

See also

Revision Source

<p>{{ fx_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>
<div class="note"><strong>Note:</strong> You can toggle the HTML panel on and off by pressing Ctrl-H.</div>
<h2>Navigating your HTML</h2>
<p>You can click on a node in the HTML to select that element for further inspection. Also, if the HTML panel is open while you don't have a selected element, the HTML panel automatically refreshes to show you the HTML for the element the mouse is currently hovering over. This, too, can be a useful tool for searching the code to find problems.</p>
<p><img alt="html-panel.png" class="internal default" src="/@api/deki/files/6073/=html-panel.png" style=""></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>
<h2>Experimenting with attributes</h2>
<p>You can change the value of an HTML attribute by double-clicking the value in the source and entering a new one:</p>
<p><img alt="edit-html-attr.png" class="internal default" src="/@api/deki/files/6080/=edit-html-attr.png" style=""></p>
<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