---
title: Visite guidée de l'interface utilisateur
slug: Tools/Page_Inspector/UI_Tour
translation_of: Tools/Page_Inspector/UI_Tour
original_slug: Outils/Inspecteur/UI_Tour
---
<div>{{ToolsSidebar}}</div>

<p>Cet article présente les trois grandes parties de l'interface utilisateur de l'inspecteur, à savoir :</p>

<ul>
 <li>Le bouton de sélection d'éléments</li>
 <li>Le panneau HTML</li>
 <li>Le panneau CSS</li>
</ul>

<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15507/57-inspector-UI.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;">Ce guide est volontairement bref. Des liens vous permettent d'accéder aux pages détaillées expliquant le fonctionnement de l'inspecteur.</p>

<h2 id="Le_bouton_de_sélection_d'éléments">Le bouton de sélection d'éléments</h2>

<p>L'inspecteur donne accès à des informations détaillées à propos de l'élément sélectionné. Ce bouton est l'une des façons de sélectionner un élément pour l'inspecter :</p>

<p><img alt="This is the button in Firefox 57 Inspector you can use to select elements on a web page." src="https://mdn.mozillademos.org/files/15513/57-select-element.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 500px;"></p>

<p>Notez qu'il fait partie de la <a href="/fr/docs/Outils/Outils_boite_à_outils#Barre_d'outils">barre d'outils de la boîte à outils</a>, et qu'il est immédiatement accessible depuis n'importe quel outil, pas seulement depuis l'inspecteur.</p>

<p>Pour savoir comment sélectionner un élément, voir le guide pour <a href="/fr/docs/Outils/Inspecteur/Comment/Sélectionner_un_élément">sélectionner un élément</a>.</p>

<h2 id="Le_panneau_HTML">Le panneau HTML</h2>

<p>L'inspecteur est divisé en deux parties. Celle de gauche est occupée par le panneau HTML:</p>

<p><img alt="These are the tasty new HTML and CSS panes in Firefox 57." src="https://mdn.mozillademos.org/files/15515/57-html-css-pane.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 800px;"></p>

<p>Pour en savoir plus sur la structure du panneau HTML, voir la page "<a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML">Examiner et éditer le code HTML</a>".</p>

<h2 id="Le_panneau_CSS">Le panneau CSS</h2>

<p>La partie droite est occupée par le panneau CSS :</p>

<p><img alt="The rules view within the Inspector." src="https://mdn.mozillademos.org/files/15511/57-rules-view.png" style="display: block; height: 579px; margin-left: auto; margin-right: auto; width: 600px;">Ce panneau CSS est composé de 5 vues :</p>

<ul>
 <li>Règles</li>
 <li>Calculé</li>
 <li>Disposition</li>
 <li>Animations</li>
 <li>Polices</li>
</ul>

<p>Utilisez ces onglets pour passer d'une vue à une autre.</p>

<div class="note">
<p><strong>Note </strong>: Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du <a href="/fr/docs/Tools/Page_Inspector/3-pane_mode">mode à trois panneaux.</a></p>
</div>

<h3 id="La_vue_Règles">La vue "Règles"</h3>

<p>Cette vue liste toutes les règles CSS qui s'appliquent à l'élément sélectionné. Les règles sont ordonnées de la plus précise à la moins précise.</p>

<p>Voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS">Examiner et éditer le CSS</a>" pour plus de détails.</p>

<h3 id="La_vue_Calculé">La vue "Calculé"</h3>

<p>Cette vue liste toutes les règles CSS calculées pour l'élément sélectionné, ainsi qu'une représentation visuelle éditable du modèle de boite.</p>

<p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p>

<p> </p>

<p>Pour en savoir plus sur le modèle de boite, voir "<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examiner et éditer le modèle de boite</a>". Il est a noter qu'avant Firefox 50, le modèle de boite n'apparaissait pas dans cet onglet puisqu'il avait le sien.</p>

<p>Pour plus de détails sur les déclarations CSS de cette vue, voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#Examiner_le_CSS_calculé">Examiner le CSS calculé</a>".</p>

<h3 id="La_vue_Polices">La vue "Polices"</h3>

<p>Cette vue liste toutes les polices présentes dans la page, ainsi que des exemples éditables.</p>

<p> </p>

<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p>

<p>Voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Voir_les_polices">Voir les polices</a>" pour plus de détails.</p>

<h3 id="La_vue_Animations">La vue "Animations"</h3>

<p>Cette vue apporte des détails sur les animations relatives à l'élément sélectionné, ainsi qu'un contrôleur pour les interrompre.</p>

<p> </p>

<p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p>

<p> </p>

<p>Voir "<a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations">Travailler avec les animations</a>" pour plus de détails.</p>