mozilla

Revision 651693 of Page Inspector

  • リビジョンの URL スラグ: Tools/Page_Inspector
  • リビジョンのタイトル: Page Inspector
  • リビジョンの ID: 651693
  • 作成日:
  • 作成者: wbamberg
  • 現行リビジョン いいえ
  • コメント

このリビジョンの内容

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

Opening the Inspector

There are two main ways to open the Inspector:

  • without an element selected: choose the "Inspector" option from the "Web Developer" menu or the equivalent keyboard shortcut
  • with an element selected: right-click an element on a web page and select "Inspect Element"

The Inspector will appear at the bottom of the browser window.

Selecting elements

If you invoked the Inspector by clicking "Inspect Element", then an element will already be selected.

Otherwise, as you move your mouse around the page, the element under your mouse is highlighted and an annotation displays its HTML tag, any class or ID attributes, and from Firefox 32 onwards, the element's size. At the same time, its HTML definition is displayed, in context, in the Inspector's left-hand pane:

Clicking on the element selects it. Once an element is selected its markup is highlighted in the HTML pane on the left of the Inspector, and the CSS pane on the right of the Inspector shows its style information:

There are two ways to select a new element: either click on its markup in the HTML pane, or click the "Select element" button, then click on the element in the web page.

From Firefox 32 onwards, the "Select element" button is at the left-hand end of the toolbar:

Before Firefox 32 it's near the right-hand end of the toolbar:

HTML pane

The Inspector is split into two halves. The left-hand half is occupied by the HTML pane:

At the top of the HTML pane there's a toolbar split into two sections:

  • 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 box: search the page for the tag you type. Pressing "Enter" finds the next occurrence.

The rest of the pane shows you the page's HTML as a tree. Just to the left of each node is an arrow: click the arrow to expand the node. If you hold the Alt key while clicking the arrow, it expands the node and all the nodes underneath it.

From Firefox 32 onwards, nodes that are hidden using display:none are shown faded.

Element popup menu

You can perform certain common tasks on a specific node using a popup menu. To activate this menu context-click the element:

The menu gives you the following options:

  • edit the element's HTML
  • copy the inner or outer HTML for the element
  • copy a CSS selector that uniquely selects the element
  • copy image as a data:// URL, if the selected element is an image
  • paste the clipboard contents into the node as its outerHTML (this is new in Firefox 32)
  • delete the element
  • set the :hover, :focus, and :active CSS pseudo-classes

Editing HTML

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

To edit an element's outerHTML, activate the element's popup menu and select "Edit As HTML". You'll see a text box in the HTML pane:

You can add any HTML in here: changing the element's tag, changing existing elements, or adding new ones. Once you click outside the box, the changes are applied to the page.

Examining event listeners

From Firefox 33 you'll see a "ev" icon next to elements that have event listeners bound to them:

Click the icon and you'll see a list of all the event listeners bound to this element:

Each line contains:

  • a pause button: click that to go to the event listener in the Debugger, where you'll be able to set a breakpoint in it
  • the name of the event
  • the name and line number for the listener: click this to see the listener function in the popup
  • an indication of whether the event bubbles and which DOM specification defines it

CSS pane

The right-hand half of the Inspector is occupied by the 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 tabs 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:

The Rules view lists pseudo-elements, and the rules they apply.

From Firefox 32 onwards, the Rules view lists user-agent styles (styles applied by the browser) if the option to do so is checked in the developer tool settings. Note that this setting is independent of the "Browser styles" checkbox in the Computed view.

Rule display

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

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.

User-agent styles are displayed with a darker gray, and the link to the filename and line number contains the prefix (user agent):

At the top-right of each rule the source filename and line number is displayed as a link: clicking it opens the file in the Style Editor.

The Inspector understands CSS source maps. That means that if you are using a CSS preprocessor that has support for source maps, and you've enabled source map support in the Style Editor settings, then the link will take you to the original source, not the generated CSS:

Read more about CSS source map support in the Style Editor documentation.

Color samples

You'll see a color sample appear next to color values:

Color picker

If you click on the color sample, you'll see a color picker popup, enabling you to change the color:

From Firefox 31 onwards the color picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new color for the element from the page:

background-image preview

You'll see a preview of images specified using background-image if you hover over the rule:

transform visualisation

If you hover over a transform property in the Rules view, you get a tooltip which visualises the transformation it performs:

font-family tooltip

If you hover over a font-family property in the Rules view, you get a tooltip with a sample of that font:

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.

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.

Adding rules

From Firefox 33 onwards, you can add new rules in the Rules view. Just right-click to show the context menu and select "Add rule". This will add a new CSS rule whose selector matches the currently selected node.

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:

The text in the font view is "Abc" by default but this is actually a text area and can be freely edited.

Box model view

This shows a graphical representation of the box model as it's applied to this element. While the mouse is in the box model view, grid lines and the box model for the element in the page are displayed:The box model view contains a number of annotations:

  • The top-left shows the size taken up by the element in the page (content + padding)
  • The center shows the size of the content
  • the top-right shows the value of its position property
  • the individual values for padding, border, and margin are where you would expect

From Firefox 31, if you click one of the numbers in the box model view, you can edit that value and see the results live in the page.

Using the Page Inspector with the Web Console

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.

If you hover over that element in the Web Console output, it's highlighted on screen:

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

Keyboard shortcuts

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}

Global shortcuts

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

このリビジョンのソースコード

<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 two main ways to open the Inspector:</p>
<ul>
 <li><em>without an element selected</em>: choose the "Inspector" option from the "Web Developer" menu or the equivalent <a href="/en-US/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcut</a></li>
 <li><em>with an element selected</em>: right-click an element on a web page and select "Inspect Element"</li>
</ul>
<p>The Inspector will appear at the bottom of the browser window.</p>
<h2 id="Selecting_elements">Selecting elements</h2>
<p>If you invoked the Inspector by clicking "Inspect Element", then an element will already be selected.</p>
<p>Otherwise, as you move your mouse around the page, the element under your mouse is highlighted and an annotation displays its HTML tag, any class or ID attributes, and from Firefox 32 onwards, the element's size. 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/8311/inspector-open.png" style="display: block; margin-left: auto; margin-right: auto;" />Clicking on the element selects it. Once an element is selected its markup is highlighted in the <a href="/en-US/docs/Tools/Page_Inspector#HTML_pane_2">HTML pane</a> on the left of the Inspector, and the <a href="/en-US/docs/Tools/Page_Inspector#CSS_pane">CSS pane</a> on the right of the Inspector shows its style information:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8313/inspector-selected.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>There are two ways to select a new element: either click on its markup in the HTML pane, or click the "Select element" button, then click on the element in the web page.</p>
<p>From Firefox 32 onwards, the "Select element" button is at the left-hand end of the toolbar:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8315/inspector-select-element-fx32.png" style="display: block; margin-left: auto; margin-right: auto;" />Before Firefox 32 it's near the right-hand end of the toolbar:<img alt="" src="https://mdn.mozillademos.org/files/8317/inspector-select-element-fx31.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p><iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/y2LcsxE2pR0/?feature=player_detailpage" width="640"></iframe></p>
<h2 id="HTML_pane_2"><a name="HTML_pane">HTML pane</a></h2>
<p>The Inspector is split into two halves. The left-hand half is occupied by the HTML pane:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8303/inspector-overview-html.png" style="width: 976px; height: 884px; display: block; margin-left: auto; margin-right: auto;" /></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8299/inspector-html-pane.png" style="width: 1050px; height: 464px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h3 id="Navigating_the_HTML">Navigating the HTML</h3>
<p>At the top of the HTML pane there's a toolbar split into two sections:</p>
<ul>
 <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 box</em>: search the page for the tag you type. Pressing "Enter" finds the next occurrence.</li>
</ul>
<p>The rest of the pane shows you the page's HTML as a tree. Just to the left of each node is an arrow: click the arrow to expand the node. If you hold the Alt key while clicking the arrow, it expands the node and all the nodes underneath it.</p>
<p>From Firefox 32 onwards, nodes that are hidden using <a href="/en-US/docs/Web/CSS/display">display:none</a> are shown faded.</p>
<h3 id="Element_popup_menu_2"><a name="Element_popup_menu">Element popup menu</a></h3>
<p>You can perform certain common tasks on a specific node using a popup menu. To activate this menu context-click the element:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7911/inspector-popup-menu.png" style="width: 605px; height: 380px; display: block; margin-left: auto; margin-right: auto;" />The menu gives you the following options:</p>
<ul>
 <li><a href="#Editing_HTML">edit the element's HTML</a></li>
 <li>copy the inner or outer HTML for the element</li>
 <li>copy a CSS selector that uniquely selects the element</li>
 <li>copy image as a data:// URL, if the selected element is an image</li>
 <li>paste the clipboard contents into the node as its <a href="/en-US/docs/Web/API/element.outerHTML">outerHTML</a> (this is new in Firefox 32)</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>
<h3 id="Editing_HTML_2"><a name="Editing_HTML">Editing HTML</a></h3>
<p>You can edit the HTML - tags, attributes, and content - directly in the HTML pane: double-click the text you want to edit, change it, and press Enter to see the changes reflected immediately.</p>
<p>To edit an element's <a href="/en-US/docs/Web/API/Element.outerHTML">outerHTML</a>, activate the element's popup menu and select "Edit As HTML". You'll see a text box in the HTML pane:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7451/inspector-editHTML.png" style="width: 540px; height: 269px; display: block; margin-left: auto; margin-right: auto;" />You can add any HTML in here: changing the element's tag, changing existing elements, or adding new ones. Once you click outside the box, the changes are applied to the page.</p>
<h3 id="Examining_event_listeners">Examining event listeners</h3>
<p>From Firefox 33 you'll see a "ev" icon next to elements that have event listeners bound to them:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8319/inspector-events-icon.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>Click the icon and you'll see a list of all the event listeners bound to this element:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8321/inspector-events-popup.png" style="width: 747px; height: 173px; display: block; margin-left: auto; margin-right: auto;" />Each line contains:</p>
<ul>
 <li>a pause button: click that to go to the event listener in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>, where you'll be able to set a breakpoint in it</li>
 <li>the name of the event</li>
 <li>the name and line number for the listener: click this to see the listener function in the popup</li>
 <li>an indication of whether the event bubbles and which DOM specification defines it</li>
</ul>
<h2 id="CSS_pane">CSS pane</h2>
<p>The right-hand half of the Inspector is occupied by the CSS pane:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8309/inspector-overview-css.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8301/inspector-css-pane.png" style="width: 718px; height: 472px; display: block; margin-left: auto; margin-right: auto;" /></p>
<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 tabs at the top of the pane.</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/7453/inspector-HTML-pane.png" style="display: block; margin-left: auto; margin-right: auto;" />The Rules view lists <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, and the rules they apply.</p>
<p>From Firefox 32 onwards, the Rules view lists <a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a> (styles applied by the browser) if the option to do so is checked in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">developer tool settings</a>. Note that this setting is independent of the "Browser styles" checkbox in the <a href="/en-US/docs/Tools/Page_Inspector#Computed_view">Computed view</a>.</p>
<h4 id="Rule_display">Rule display</h4>
<p>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;" />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>
<p>User-agent styles are displayed with a darker gray, and the link to the filename and line number contains the prefix <code>(user agent)</code>:<br />
 <img alt="" src="https://mdn.mozillademos.org/files/7909/inspector-rules-view-ua-style.png" style="width: 342px; height: 121px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h4 id="Link_to_CSS_file">Link to CSS file</h4>
<p>At the top-right of each rule the source filename and line number is displayed as a link: 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>.</p>
<p>The Inspector understands CSS source maps. That means that if you are using a CSS preprocessor that has support for source maps, and you've enabled source map support in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, then the link will take you to the original source, not the generated CSS:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6947/inspector-css-sourcemap-detail.png" style="width: 390px; height: 133px; display: block; margin-left: auto; margin-right: auto;" /></p>
<p>Read more about CSS source map support in the <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Style Editor documentation</a>.</p>
<h4 id="Color_samples">Color samples</h4>
<p>You'll see a color sample appear next to color values:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="width: 487px; height: 158px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h4 id="Color_picker">Color picker</h4>
<p>If you click on the color sample, you'll see a color picker popup, enabling you to change the color:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="width: 835px; height: 320px; display: block; margin-left: auto; margin-right: auto;" /></p>
<p>From Firefox 31 onwards the color picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new color for the element from the page:</p>
<p><iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/0Zx1TN21QOo/?feature=player_detailpage" width="640"></iframe></p>
<h4 id="background-image_preview">background-image preview</h4>
<p>You'll see a preview of images specified using <a href="/en-US/docs/Web/CSS/background-image">background-image</a> if you hover over the rule:</p>
<h4 id="transform_visualisation"><img alt="" src="https://mdn.mozillademos.org/files/7457/inspector-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;" />transform visualisation</h4>
<p>If you hover over a <a href="/en-US/docs/Web/CSS/transform"><code>transform</code></a> property in the Rules view, you get a tooltip which visualises the transformation it performs:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7133/transform-tooltip.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<h4 id="font-family_tooltip">font-family tooltip</h4>
<p>If you hover over a <a href="/en-US/docs/Web/CSS/font-family"><code>font-family</code></a> property in the Rules view, you get a tooltip with a sample of that font:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7385/font-family-tooltip.png" style="width: 359px; height: 248px; display: block; margin-left: auto; margin-right: auto;" /></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>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>
<h4>Adding rules</h4>
<p>From Firefox 33 onwards, you can add new rules in the Rules view. Just right-click to show the context menu and select "Add rule". This will add a new CSS rule whose selector matches the currently selected node.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8357/inspector-add-rule.png" style="width: 459px; height: 235px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h3>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/7443/inspector-computed-view.png" style="display: block; margin-left: auto; margin-right: auto;" />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/7445/inspector-computed-view-open.png" style="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/7449/inspector-fonts-view.png" style="display: block; margin-left: auto; margin-right: auto;" />The text in the font view is "Abc" by default but this is actually a text area and can be freely edited.</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. While the mouse is in the box model view, grid lines and the box model for the element in the page are displayed:<img alt="" src="https://mdn.mozillademos.org/files/7439/inspector-box-model-view.png" style="display: block; margin-left: auto; margin-right: auto;" />The box model view contains a number of annotations:</p>
<ul>
 <li>The top-left shows the size taken up by the element in the page (content + padding)</li>
 <li>The center shows the size of the content</li>
 <li>the top-right shows the value of its <a href="/en-US/docs/Web/CSS/position_value"><code>position</code></a> property</li>
 <li>the individual values for padding, border, and margin are where you would expect</li>
</ul>
<p>From Firefox 31, if you click one of the numbers in the box model view, you can edit that value and see the results live in the page.</p>
<h2 id="Using_the_Page_Inspector_with_the_Web_Console">Using the Page Inspector with the Web Console</h2>
<p>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="display: block; margin-left: auto; margin-right: auto;" />If you hover over that element in the Web Console output, it's highlighted on screen:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7469/inspector-web-console.png" style="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="Keyboard_shortcuts">Keyboard shortcuts</h2>
<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p>
<h3 id="Global_shortcuts">Global shortcuts</h3>
<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
このリビジョンへ戻す