MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 442061 of Inspecteur

  • Raccourci de la révision : Outils/inspecteur
  • Titre de la révision : Inspecteur
  • ID de la révision : 442061
  • Créé :
  • Créateur : Delapouite
  • 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".

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

Sélectionner des éléments

Cliquez sur l'élément pour le sélectionner. Une fois l'élément sélectionné l'Inspecteur verrouille son affichage sur l'élément vous permettant d'utilliser votre souris sans risquer de changer votre sélection.

L'étiquette pour l'élément acquiert alors deux boutons. Le bouton sur la gauche permet de déselectionner l'élément pour en choisir un autre, le bouton sur la droite affiche un menu d'action dédié à l'élément.

Raccourcis clavier

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

Raccourci Description
Se déplacer sur le parent du nœud sélectionné.
Se déplacer sur le premier enfand du nœud sélectionné.
Se déplacer sur le nœud précédent (de même niveau ou parent).
Se déplacer sur le nœud suivant (de même niveau ou parent).
TAB Déplace le curseur sur le nœud ou l'attribut suivant.
Entré/Retour chariot Place un curseur texte sur le nœud ou l'attribut sélectionné pour que vous puissiez le modifier.

Utiliser la Console Web avec l'Inspecteur

Vous pouvez bien entendu, utiliser la Console Web en même temps que l'Inspecteur. Il y a même un gros avantage ! L'élément que vous avez actuellement de sélectionné dans l'Inspecteur, est utilisable en JavaScript dans le Console Web en utilisant $0.

Voir également

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 id="Ouvrir_l'Inspecteur">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>A 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="S.C3.A9lectionner_des_.C3.A9l.C3.A9ments">Sélectionner des éléments</h2>
<p>Cliquez sur l'élément pour le sélectionner. Une fois l'élément sélectionné l'Inspecteur verrouille son affichage sur l'élément vous permettant d'utilliser votre souris sans risquer de changer votre sélection.</p>
<p>L'étiquette pour l'élément acquiert alors deux boutons. Le bouton sur la gauche permet de déselectionner l'élément pour en choisir un autre, le bouton sur la droite affiche un menu d'action dédié à l'élément.</p>
<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>Se déplacer sur le parent du nœud sélectionné.</td>
    </tr>
    <tr>
      <td>→</td>
      <td>Se déplacer sur le premier enfand du nœud sélectionné.</td>
    </tr>
    <tr>
      <td>↑</td>
      <td>Se déplacer sur le nœud précédent (de même niveau ou parent).</td>
    </tr>
    <tr>
      <td>↓</td>
      <td>Se déplacer sur le nœud suivant (de même niveau ou parent).</td>
    </tr>
    <tr>
      <td>TAB</td>
      <td>Déplace le curseur sur le nœud ou l'attribut suivant.</td>
    </tr>
    <tr>
      <td>Entré/Retour chariot</td>
      <td>Place un curseur texte sur le nœud ou l'attribut sélectionné pour que vous puissiez le modifier.</td>
    </tr>
  </tbody>
</table>
<h2 id="Utiliser_la_Console_Web_avec_l'Inspecteur">Utiliser la Console Web avec l'Inspecteur</h2>
<p>Vous pouvez bien entendu, utiliser la Console Web en même temps que l'Inspecteur. Il y a même un gros avantage ! L'élément que vous avez actuellement de sélectionné dans l'Inspecteur, est utilisable en JavaScript dans le Console Web en utilisant <code>$0</code>.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5479/inspecteur-console-reference.png" style="width: 906px; height: 252px;" /></p>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li><a href="/fr/docs/Outils" title="Tools">Outils pour développeurs</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