Inspecteur

  • Raccourci de la révision : Outils/inspecteur
  • Titre de la révision : Inspecteur
  • ID de la révision : 436299
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Utilisez l'Inspecteur pour examiner et modifier la structure et la mise en page d'une page web.

Ouvrir l'Inspecteur

Il y a différents moyens d'ouvrir l'Inspecteur.

  • Choisissez l'option "Inspecteur" depuis le menu "Développeur Web" (qui est un sous-menu de "Outils" sur Mac OS X)
  • Appuyez sur Ctrl-Shift-I (Cmd-Option-I sur Mac OS X et Linux)
  • Faites un clic droit sur un élément de la page web et choisissez "Examiner l'élément"

Le panneau des outils pour développeur apparaitra au bas de la fenêtre du navigateur, avec l'Inspecteur activé.

Si vous avez déclenché l'Inspecteur en cliquant "Examiner l'élément", alors l'élément sera automatiquement sélectionné et l'Inspecteur se comportera comme dans la section "Sélectionner des éléments".

Sinon, à mesure que vous déplacez votre souris sur la page, l'élément sous votre souris sera mis en évidence par une bordure pointillée, et une étiquette affichant la balise HTML. Au même moment, sa définition sur la page apparaitra dans son contexte, dans le panneau de gauche de l'Inspecteur.

The Page Inspector toolbar

The toolbar the Page Inspector adds to the bottom of the browser window looks like this:

page-inspector-toolbar-diagram.png

There are five control areas in the Page Inspector's toolbar:

Close button
The "X" icon at the left end of the toolbar is the close button; clicking it closes the Page Inspector. Pressing the escape key while the document is focused has the same effect.
Inspect (Ctrl-I)

The Inspect button locks and unlocks the toolbar to reflect the currently highlighted element. If you click this while locked on a specific element, the element is deselected and you can select a new one by mousing around in the browser window. Clicking it while no element is currently selected will select the element currently pointed at by the mouse.

Breadcrumbs: element hierarchy (arrow keys)
The majority of the toolbar is occupied by the breadcrumbs bar. This bar shows the hierarchy of all the nested elements, with its parent elements to the left and child elements to the right. Each element's element and CSS style and/or class is shown. If the information is cut off, mousing over the element's entry in the toolbar presents a tooltip with the complete description. 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; you can also use the arrow keys to navigate the element hierarchy bar.
3D View button (Ctrl-W) {{ fx_minversion_inline("11.0") }}
Toggles the 3D view on and off. This button is only available if your system supports WebGL, but if available, clicking it lets you view the DOM hierarchy of your page as a 3D representation. If you don't see the 3D button, it is possible that your graphics driver needs to be updated. See the blocklisted drivers page for more information.
HTML button (Ctrl-H)
The HTML button toggles on and off the HTML panel, which provides a view at the HTML that created the selected element.
Style button (Ctrl-S)
The Style button toggles on and off the Style panel, which shows the CSS responsible for styling the selected element.

Raccourcis clavier

Il y a de nombreux raccourcis clavier pratiques que vous pouvez utiliser lorsque vous inspectez une page.

Raccourci 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.
Entré/Retour chariot 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

Source de la révision

<p>Utilisez l'Inspecteur pour examiner et modifier la structure et la mise en page d'une page web.</p>
<h2>Ouvrir l'Inspecteur</h2>
<p>Il y a différents moyens d'ouvrir l'Inspecteur.</p>
<ul>
  <li>Choisissez l'option "Inspecteur" depuis le menu "Développeur Web" (qui est un sous-menu de "Outils" sur Mac OS X)</li>
  <li>Appuyez sur Ctrl-Shift-I (Cmd-Option-I sur Mac OS X et Linux)</li>
  <li>Faites un clic droit sur un élément de la page web et choisissez "Examiner l'élément"</li>
</ul>
<p>Le panneau des outils pour développeur apparaitra au bas de la fenêtre du navigateur, avec l'Inspecteur activé.</p>
<p>Si vous avez déclenché l'Inspecteur en cliquant "Examiner l'élément", alors l'élément sera automatiquement sélectionné et l'Inspecteur se comportera comme dans la section "Sélectionner des éléments".</p>
<p>Sinon, à mesure que vous déplacez votre souris sur la page, l'élément sous votre souris sera mis en évidence par une bordure pointillée, et une étiquette affichant la balise HTML. Au même moment, sa définition sur la page apparaitra dans son contexte, dans le panneau de gauche de l'Inspecteur.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5475/inspecteur-ouvert.png" style="width: 1019px; height: 784px;" /></p>
<h2 id="The_Page_Inspector_toolbar">The Page Inspector toolbar</h2>
<p>The toolbar the Page Inspector adds to the bottom of the browser window looks like this:</p>
<p><img alt="page-inspector-toolbar-diagram.png" class="internal default" src="/@api/deki/files/6072/=page-inspector-toolbar-diagram.png" style="" /></p>
<p>There are five control areas in the Page Inspector's toolbar:</p>
<dl>
  <dt>
    Close button</dt>
  <dd>
    The "X" icon at the left end of the toolbar is the close button; clicking it closes the Page Inspector. Pressing the escape key while the document is focused has the same effect.</dd>
  <dt>
    Inspect (Ctrl-I)</dt>
  <dd>
    <p>The Inspect button locks and unlocks the toolbar to reflect the currently highlighted element. If you click this while locked on a specific element, the element is deselected and you can select a new one by mousing around in the browser window. Clicking it while no element is currently selected will select the element currently pointed at by the mouse.</p>
  </dd>
</dl>
<dl>
  <dt>
    Breadcrumbs: element hierarchy (arrow keys)</dt>
  <dd>
    The majority of the toolbar is occupied by the breadcrumbs bar. This bar shows the hierarchy of all the nested elements, with its parent elements to the left and child elements to the right. Each element's element and CSS style and/or class is shown. If the information is cut off, mousing over the element's entry in the toolbar presents a tooltip with the complete description. 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; you can also use the arrow keys to navigate the element hierarchy bar.</dd>
  <dt>
    3D View button (Ctrl-W) {{ fx_minversion_inline("11.0") }}</dt>
  <dd>
    Toggles the <a href="/en/Tools/Page_Inspector/3D_view" title="en/Tools/Page_Inspector/3D_view">3D view</a> on and off. This button is only available if your system supports WebGL, but if available, clicking it lets you view the DOM hierarchy of your page as a 3D representation. If you don't see the 3D button, it is possible that your graphics driver needs to be updated. See the <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a> for more information.</dd>
  <dt>
    HTML button (Ctrl-H)</dt>
  <dd>
    The HTML button toggles on and off the <a href="/en/Tools/Page_Inspector/HTML_panel" title="en/Tools/Page_Inspector/HTML panel">HTML panel</a>, which provides a view at the HTML that created the selected element.</dd>
  <dt>
    Style button (Ctrl-S)</dt>
  <dd>
    The Style button toggles on and off the <a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a>, which shows the CSS responsible for styling the selected element.</dd>
</dl>
<h2 id="Raccourcis_clavier">Raccourcis clavier</h2>
<p>Il y a de nombreux raccourcis clavier pratiques que vous pouvez utiliser lorsque vous inspectez une page.</p>
<table class="standard-table" style="width: auto;">
  <tbody>
    <tr>
      <td class="header">Raccourci</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>Entré/Retour chariot</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>
Revenir à cette révision