Revision 18857 of Page Inspector

  • Revision slug: Tools/Page_Inspector
  • Revision title: Page Inspector
  • Revision id: 18857
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 175 words added, 2 words removed

Revision Content

{{ gecko_minversion_header("10.0") }}

Firefox 10 introduces the new Page Inspector, a handy tool that you can use to examine the structure and layout of a page. Choose the "Inspect" option from the "Web Developer" menu (which is a submenu in the "Tools" menu on the Mac), or press Ctrl-Shift-I (Cmd-Option-I) on the Mac. Once the Page Inspector is active, you can then click on the element you want to examine.

While you're mousing around the page, the inspector will show you information about the element you're currently pointing at; all other elements are dimmed slightly to make the targeted element stand out. Click an element to "lock" this display so you can look at it in more detail. You can also directly choose an element without first invoking the Page Inspector by right clicking on it and choosing "Inspect Element" from the context menu.

inspect-select.png

In this image, you can see the user is pointing at the BrowserID "Sign in" button near the top of the page. The rest of the page is dimmed. A popup box indicates that the element is an HTML {{ HTMLElement("a") }} (anchor) element with the class "browserid-signin". At the bottom of the page is the Page Inspector toolbar, which we'll look at in more detail in the next section.

Until you click on an element (unless you right-clicked an element and selected "Inspect Element" directly), as you mouse around, this display automatically updates with information about the element currently under your cursor. Once you click an element, the display locks so you can look at the information in detail.

The Page Inspector toolbar

 

Revision Source

<p>{{ gecko_minversion_header("10.0") }}</p>
<p>Firefox 10 introduces the new Page Inspector, a handy tool that you can use to examine the structure and layout of a page. Choose the "Inspect" option from the "Web Developer" menu (which is a submenu in the "Tools" menu on the Mac), or press Ctrl-Shift-I (Cmd-Option-I) on the Mac. Once the Page Inspector is active, you can then click on the element you want to examine.</p>
<p>While you're mousing around the page, the inspector will show you information about the element you're currently pointing at; all other elements are dimmed slightly to make the targeted element stand out. Click an element to "lock" this display so you can look at it in more detail. You can also directly choose an element without first invoking the Page Inspector by right clicking on it and choosing "Inspect Element" from the context menu.</p>
<p><img alt="inspect-select.png" class="internal default" src="/@api/deki/files/6070/=inspect-select.png" style=""></p>
<p>In this image, you can see the user is pointing at the BrowserID "Sign in" button near the top of the page. The rest of the page is dimmed. A popup box indicates that the element is an HTML {{ HTMLElement("a") }} (anchor) element with the class "browserid-signin". At the bottom of the page is the Page Inspector toolbar, which we'll look at in more detail in the next section.</p>
<p>Until you click on an element (unless you right-clicked an element and selected "Inspect Element" directly), as you mouse around, this display automatically updates with information about the element currently under your cursor. Once you click an element, the display locks so you can look at the information in detail.</p>
<h2>The Page Inspector toolbar</h2>
<p> </p>
<ul> <li><a href="/en/Tools/Inspector/Style_panel" title="en/Tools/Inspector/Style panel">Style panel</a></li>
</ul>
Revert to this revision