Page Inspector

  • Revision slug: Tools/Page_Inspector
  • Revision title: Page Inspector
  • Revision id: 435901
  • Created:
  • Creator: wbamberg
  • Is current revision? No
  • Comment

Revision Content

Use the Inspector to examine and modify the structure and layout of a page.

Opening the Inspector

To open the Inspector:

  • choose the "Inspector" option from the "Web Developer" menu (which is a submenu in the "Tools" menu on the Mac)
  • press Ctrl-Shift-I (Cmd-Option-I on the Mac OS X and Linux)
  • right-click an element on a web page and select "Inspect Element"

The DevTools Window will appear at the bottom of the browser window, with the Inspector activated.

If you invoked the Inspector by clicking "Inspect Element", then the element will already be selected and the Inspector will look and behave as it does in "Selecting Elements" below.

Otherwise, as you move your mouse around the page, the element under your mouse is highlighted with a dotted border and an annotation displays its HTML tag. At the same time, its HTML definition is displayed, in context, in the Inspector's left-hand pane.

Selecting Elements

Clicking on the element selects it: once it is selected, the Inspector's display is locked on this element, so you can move the mouse around without the Inspector switching to a new element.

The annotation for the element gets a button on the left and a button on the right. The button on the left unselects the element, while the button on the right displays a popup menu for the element.

When the element is selected you'll also see the information about the element's style in the right-hand pane of the Inspector.

Clicking the button on the right side of the annotation displays a popup menu, which gives you options to:

  • copy the inner or outer HTML for the element
  • copy a CSS selector that uniquely selects the element
  • delete the element
  • set the :hover, :focus, and :active CSS pseudo-classes

The main window of the Inspector is split into two halves: the left-hand half displays information about the page's HTML, while the right-hand half displays information about the page's CSS.

 

 

 

HTML pane

The HTML pane shows you the page's HTML as a tree, whose nodes are collapsible. The start and end tags for the selected element are highlighted with a grey background.

You can edit the HTML - tags, attributes, and content - directly in this pane: click the element you want to edit, change it, and press Enter to see the changes reflected immediately.

Context-clicking an element displays the same popup menu as that shown from the element's annotation menu.

Above this pane is a dedicated toolbar split into three sections:

  • Select element: if you click this button, you can then select a different element by mousing around in the browser window.
  • HTML breadcrumbs: this shows the complete hierarchy through the document for the branch containing the selected element. If you click and hold on one of the elements in the bar, a popup menu appears that lets you select one of that element's siblings. Clicking the small arrow icons at the left and right ends of the bar will scroll the bar if it's wider than the available space.
  • Search tags: search the page for the tag you type. Pressing "Enter" finds the next occurrence.

Keyboard shortcuts

There are a number of handy shortcuts you can use while inspecting your page.

Shortcut Description
Moves to the parent of the selected node.
Moves to the first child of the selected node.
Moves to the previous sibling of the selected node.
Moves to the next sibling of the selected node.
ESC Closes the Page Inspector.
Return/Enter Locks and unlocks the currently highlighted element as the selected element to inspect.

Using the Page Inspector with the Web Console

You can, of course, use the Web Console at the same time as the Page Inspector. In fact, you even have a bonus feature! The element that's currently selected in the Page Inspector, if any, can be referenced in JavaScript in the Web Console using the variable $0.

web-console.png

See also

{{ languages( { "ja": "ja/Tools/Page_Inspector"} ) }}

Revision Source

<p>Use the Inspector to examine and modify the structure and layout of a page.</p>
<h2 id="Opening_the_Inspector">Opening the Inspector</h2>
<p>To open the Inspector:</p>
<ul>
  <li>choose the "Inspector" option from the "Web Developer" menu (which is a submenu in the "Tools" menu on the Mac)</li>
  <li>press Ctrl-Shift-I (Cmd-Option-I on the Mac OS X and Linux)</li>
  <li>right-click an element on a web page and select "Inspect Element"</li>
</ul>
<p>The <a href="/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">DevTools Window</a> will appear at the bottom of the browser window, with the Inspector activated.</p>
<p>If you invoked the Inspector by clicking "Inspect Element", then the element will already be selected and the Inspector will look and behave as it does in <a href="#Selecting-Elements" title="#Selecting-Elements">"Selecting Elements"</a> below.</p>
<p>Otherwise, as you move your mouse around the page, the element under your mouse is highlighted with a dotted border and an annotation displays its HTML tag. At the same time, its HTML definition is displayed, in context, in the Inspector's left-hand pane.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5323/inspector-no-element-selected.png" style="width: 915px; height: 958px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h2 id="Selecting_Elements"><a name="Selecting-Elements">Selecting Elements</a></h2>
<p>Clicking on the element selects it: once it is selected, the Inspector's display is locked on this element, so you can move the mouse around without the Inspector switching to a new element.</p>
<p>The annotation for the element gets a button on the left and a button on the right. The button on the left unselects the element, while the button on the right displays a popup menu for the element.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5457/inspector-element-selected-annotated.png" style="width: 933px; height: 1106px; display: block; margin-left: auto; margin-right: auto;" />When the element is selected you'll also see the information about the element's style in the right-hand pane of the Inspector.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5451/inspector-element-selected-context-menu-cropped.png" style="width: 449px; height: 324px; float: right;" /></p>
<p>Clicking the button on the right side of the annotation displays a <a name="element-popup">popup menu</a>, which gives you options to:</p>
<ul>
  <li>copy the inner or outer HTML for the element</li>
  <li>copy a CSS selector that uniquely selects the element</li>
  <li>delete the element</li>
  <li>set the <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover">:hover</a>, <a href="/en-US/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a>, and <a href="/en-US/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a> CSS pseudo-classes</li>
</ul>
<p>The main window of the Inspector is split into two halves: the left-hand half displays information about the page's HTML, while the right-hand half displays information about the page's CSS.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 id="HTML_pane">HTML pane</h2>
<p><img alt="" src="https://mdn.mozillademos.org/files/5459/inspector-html-toolbar-annotated.png" style="width: 938px; height: 443px; float: right;" />The HTML pane shows you the page's HTML as a tree, whose nodes are collapsible. The start and end tags for the selected element are highlighted with a grey background.</p>
<p>You can edit the HTML - tags, attributes, and content - directly in this pane: click the element you want to edit, change it, and press Enter to see the changes reflected immediately.</p>
<p>Context-clicking an element displays the same popup menu as <a href="#element-popup" title="#element-popup">that shown from the element's annotation menu</a>.</p>
<p>Above this pane is a dedicated toolbar split into three sections:</p>
<ul>
  <li>Select element: if you click this button, you can then select a different element by mousing around in the browser window.</li>
  <li>HTML breadcrumbs: this shows the complete hierarchy through the document for the branch containing the selected element. If you click and hold on one of the elements in the bar, a popup menu appears that lets you select one of that element's siblings. Clicking the small arrow icons at the left and right ends of the bar will scroll the bar if it's wider than the available space.</li>
  <li>Search tags: search the page for the tag you type. Pressing "Enter" finds the next occurrence.</li>
</ul>
<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>
<p>There are a number of handy shortcuts you can use while inspecting your page.</p>
<table class="standard-table" style="width: auto;">
  <tbody>
    <tr>
      <td class="header">Shortcut</td>
      <td class="header">Description</td>
    </tr>
    <tr>
      <td>←</td>
      <td>Moves to the parent of the selected node.</td>
    </tr>
    <tr>
      <td>→</td>
      <td>Moves to the first child of the selected node.</td>
    </tr>
    <tr>
      <td>↑</td>
      <td>Moves to the previous sibling of the selected node.</td>
    </tr>
    <tr>
      <td>↓</td>
      <td>Moves to the next sibling of the selected node.</td>
    </tr>
    <tr>
      <td>ESC</td>
      <td>Closes the Page Inspector.</td>
    </tr>
    <tr>
      <td>Return/Enter</td>
      <td>Locks and unlocks the currently highlighted element as the selected element to inspect.</td>
    </tr>
  </tbody>
</table>
<h2 id="Using_the_Page_Inspector_with_the_Web_Console">Using the Page Inspector with the Web Console</h2>
<p>You can, of course, use the Web Console at the same time as the Page Inspector. In fact, you even have a bonus feature! The element that's currently selected in the Page Inspector, if any, can be referenced in JavaScript in the Web Console using the variable <code>$0</code>.</p>
<p><img alt="web-console.png" class="internal default" src="/@api/deki/files/6078/=web-console.png" /></p>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en/Tools" title="Tools">Tools</a></li>
  <li><a href="/en/Tools/Web_Console" title="Using the Web Console">Using the Web Console</a></li>
  <li><a href="/en/Tools/Scratchpad" title="Scratchpad">Scratchpad</a></li>
</ul>
<p>{{ languages( { "ja": "ja/Tools/Page_Inspector"} ) }}</p>
Revert to this revision