---
title: Inspecteur
slug: Outils/Inspecteur
tags:
  - CSS
  - DOM
  - Développement Web
  - HTML
  - Outils
  - Styles
translation_of: Tools/Page_Inspector
---
<div>{{ToolsSidebar}}</div>

<p>L'inspecteur sert à examiner et modifier l'HTML et le CSS d'une page web.</p>

<p>Il est possible d'examiner des pages ouvertes dans un navigateur Firefox local, ou bien dans des cibles distantes, par exemple un navigateur Firefox pour Android. Voir la page <a href="/fr/docs/Tools/Remote_Debugging">débogage distant </a>pour apprendre comment connecter les outils de développement à une cible distante.</p>

<hr>
<h2 id="Visite_guidée_de_linterface_utilisateur">Visite guidée de l'interface utilisateur</h2>

<p>Pour vous repérer dans l’inspecteur, voici une courte <a href="/fr/docs/Tools/Page_Inspector/UI_Tour">visite guidée de l'interface utilisateur</a>.</p>

<p>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>

<hr>
<h2 id="Comment">Comment ?</h2>

<p>Pour savoir ce qu'il est possible de faire avec l'inspecteur, regardez les guides pratiques suivants :</p>

<div class="twocolumns">
<ul>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Ouvrir l'Inspecteur</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examiner et éditer l'HTML</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examiner et éditer le modèle de boites</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspecter et sélectionner des couleurs</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_fonts">Éditer les polices d'écriture</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualiser les transformations</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Utiliser l'API de l'inspecteur</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Select_an_element">Sélectionner un élément</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examiner et éditer le CSS</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examiner les écouteurs d'évènements</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations">Travailler avec des animations</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Éditer les filtres CSS</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Éditer les formes CSS</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/View_background_images">Voir les images de fond</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Utiliser l'inspecteur depuis la console web</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examiner les grilles CSS</a></li>
 <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Examiner les layout CSS flexbox</a></li>
</ul>
</div>

<hr>
<h2 id="Référence">Référence</h2>

<div class="twocolumns">
<ul>
 <li><a href="/fr/docs/Tools/Page_Inspector/Keyboard_shortcuts">Raccourcis clavier</a></li>
 <li><a href="/fr/docs/Tools/Tools_Toolbox#Inspector">Paramètres</a></li>
</ul>
</div>