Page Inspector

  • Revision slug: Tools/Page_Inspector
  • Revision title: Page Inspector
  • Revision id: 444137
  • 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

There are several ways 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 Toolbox 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.
Tab Moves a cursor to the next tag or attribute.
Return/Enter Places a text cursor in the current the tag or attribute so you can edit it.

CSS pane

The CSS pane shows information about the styles applied to the currently selected element. There are four separate views: "Rules", "Computed", "Fonts", and "Box Model". You can switch between them using the toolbar at the top of the pane:

Rules view

This view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:

It displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.

At the top-right the source filename and line number is displayed: clicking it opens the file in the Style Editor. Rules that are overridden by later rules are crossed out. If you mouse over a declaration, a checkbox appears next to it: you can use this to toggle the rule on or off.

Editing rules

If you click on a declaration you can edit its property or value, and see the results immediately. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace). If you enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears under the declaration.

Any changes you make are temporary: reloading the page will restore the original styling.

Tip: You can use the arrow keys to increase/decrease numeric rules while editing. Up arrow will turn "1px" to 2px, and Shift+up/down will increment by 10. Alt+up/down change values by 0.1, and shift+Page up/down will add or subtract 100 from the value.

Computed view

This view organizes the style of the element by property. It lists all CSS properties which have been applied to this element in alphabetical order: it shows the calculated value that each CSS property has for for the selected element:

Clicking the arrow next to the property name shows the rule that set this value, along with a link to the source filename and line number:

By default, it only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.

Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.

Fonts view

This shows all the fonts in use by the selected element. Note that it shows the font used on your system, which may be different than the fonts specified in the css:

Box model view

This shows a graphical representation of the box model as it's applied to this element:

  • At the top-left is the total space taken by the element on the page.
  • The outside numbers tell you the margin size on each side of the element.
  • The numbers in squares on the borders tell you how wide each side's border is.
  • The next layer in shows the padding size on each side of the element.
  • Finally, in the center, is the size of the element's content.

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.

Developer API

Firefox addons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context:

window.inspector

defined in inspector-panel.js. Attributes and functions:

  • .selection - information about the inspector's selection:
    • .isNode() - returns true if selection is node.
    • .node - returns the actual element from the page
    • .window - the window object of the frame the selection is in.
  • .markDirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload.

Bindable events using on:

markuploaded

Called when the left panel has been refreshed, after page change.

ready

Called on first markuploaded.

pseudoclass

Called after toggle of a pseudoclass.

layout-change

"low-priority change event for things like paint and resize."

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>There are several ways 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">Toolbox</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><em>Select element</em>: if you click this button, you can then select a different element by mousing around in the browser window.</li>
  <li><em>HTML breadcrumbs</em>: 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><em>Search tags</em>: search the page for the tag you type. Pressing "Enter" finds the next occurrence.</li>
</ul>
<h3 id="Keyboard_shortcuts">Keyboard shortcuts</h3>
<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>Tab</td>
      <td>Moves a cursor to the next tag or attribute.</td>
    </tr>
    <tr>
      <td>Return/Enter</td>
      <td>Places a text cursor in the current the tag or attribute so you can edit it.</td>
    </tr>
  </tbody>
</table>
<h2 id="CSS_pane">CSS pane</h2>
<p>The CSS pane shows information about the styles applied to the currently selected element. There are four separate views: "Rules", "Computed", "Fonts", and "Box Model". You can switch between them using the toolbar at the top of the pane:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5463/inspector-css-toolbar-annotated.png" style="width: 867px; height: 419px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h3 id="Rules_view">Rules view</h3>
<p>This view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5467/inspector-css-rules.png" style="width: 867px; height: 386px; display: block; margin-left: auto; margin-right: auto;" />It displays each rule as in a stylesheet, with a list of selectors followed by a list of <code>property:value;</code> declarations.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5659/inspector-css-rules-singlerule-annotated.png" style="width: 544px; height: 206px; display: block; margin-left: auto; margin-right: auto;" />At the top-right the source filename and line number is displayed: clicking it opens the file in the <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>. Rules that are overridden by later rules are crossed out. If you mouse over a declaration, a checkbox appears next to it: you can use this to toggle the rule on or off.</p>
<h4 id="Editing_rules">Editing rules</h4>
<p>If you click on a declaration you can edit its property or value, and see the results immediately. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace). If you enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears under the declaration.</p>
<p>Any changes you make are temporary: reloading the page will restore the original styling.</p>
<p><strong>Tip:</strong> You can use the arrow keys to increase/decrease numeric rules while editing. Up arrow will turn "1px" to 2px, and Shift+up/down will increment by 10. Alt+up/down change values by 0.1, and shift+Page up/down will add or subtract 100 from the value.</p>
<h3 id="Computed_view">Computed view</h3>
<p>This view organizes the style of the element by property. It lists all CSS properties which have been applied to this element in alphabetical order: it shows the calculated value that each CSS property has for for the selected element:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5473/inspector-css-computed.png" style="width: 867px; height: 385px; display: block; margin-left: auto; margin-right: auto;" /></p>
<p>Clicking the arrow next to the property name shows the rule that set this value, along with a link to the source filename and line number:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5665/inspector-css-computed-show-rule.png" style="width: 867px; height: 392px; display: block; margin-left: auto; margin-right: auto;" />By default, it only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.</p>
<p>Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.</p>
<h3 id="Fonts_view">Fonts view</h3>
<p>This shows all the fonts in use by the selected element. Note that it shows the font used on your system, which may be different than the fonts specified in the css:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5469/inspector-css-fonts.png" style="width: 867px; height: 384px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h3 id="Box_model_view">Box model view</h3>
<p>This shows a graphical representation of the <a href="/en-US/docs/Web/CSS/box_model" title="/en-US/docs/Web/CSS/box_model">box model</a> as it's applied to this element:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5667/inspector-css-box-model.png" style="width: 867px; height: 387px; display: block; margin-left: auto; margin-right: auto;" /></p>
<ul>
  <li>At the top-left is the total space taken by the element on the page.</li>
  <li>The outside numbers tell you the margin size on each side of the element.</li>
  <li>The numbers in squares on the borders tell you how wide each side's border is.</li>
  <li>The next layer in shows the padding size on each side of the element.</li>
  <li>Finally, in the center, is the size of the element's content.</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/5671/inspector-css-box-model-annotated.png" style="width: 680px; height: 435px; display: block; margin-left: auto; margin-right: auto;" /></p>
<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="" src="https://mdn.mozillademos.org/files/5461/inspector-console.png" style="width: 867px; height: 253px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h2 id="Developer_API">Developer API</h2>
<p>Firefox addons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context:</p>
<h3 id="window.inspector">window.inspector</h3>
<p>defined in <a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a>. Attributes and functions:</p>
<ul>
  <li>.selection - information about the inspector's selection:
    <ul>
      <li>.isNode() - returns true if selection is node.</li>
      <li>.node - returns the actual element from the page</li>
      <li>.window - the window object of the frame the selection is in.</li>
    </ul>
  </li>
  <li>.markDirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload.</li>
</ul>
<p>Bindable events using on:</p>
<h4 id="markuploaded">markuploaded</h4>
<p>Called when the left panel has been refreshed, after page change.</p>
<h4 id="ready">ready</h4>
<p>Called on first markuploaded.</p>
<h4 id="pseudoclass">pseudoclass</h4>
<p>Called after toggle of a pseudoclass.</p>
<h4 id="layout-change">layout-change</h4>
<p>"low-priority change event for things like paint and resize."</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