--- title: Inspecteur slug: Tools/Page_Inspector tags: - CSS - DOM - Développement Web - HTML - Outils - Styles translation_of: Tools/Page_Inspector original_slug: Outils/Inspecteur --- <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>