# Inspecteur de code web Il est possible d'examiner des pages ouvertes dans la plupart des navigateurs local (Chrome, Mozilla, Opera, Brave, Safari...), ou bien dans des cibles distantes, par exemple un navigateur Firefox pour Android. Voir la page [débogage distant ](https://developer.mozilla.org/fr/docs/Tools/Remote_Debugging)pour apprendre comment connecter les outils de développement à une cible distante. ### Visite guidée de l'interface utilisateur Pour vous repérer dans l’inspecteur, voici une courte [visite guidée de l'interface utilisateur](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/UI_Tour). Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du [mode à trois panneaux.](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/3-pane_mode) ### Comment ? Pour savoir ce qu'il est possible de faire avec l'inspecteur, regardez les guides pratiques suivants : * [Ouvrir l'Inspecteur](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Open_the_Inspector) * [Examiner et éditer l'HTML](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML) * [Examiner et éditer le modèle de boites](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model) * [Inspecter et sélectionner des couleurs](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors) * [Éditer les polices d'écriture](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Edit_fonts) * [Visualiser les transformations](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Visualize_transforms) * [Utiliser l'API de l'inspecteur](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API) * [Sélectionner un élément](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Select_an_element) * [Examiner et éditer le CSS](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS) * [Examiner les écouteurs d'évènements](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Examine_event_listeners) * [Travailler avec des animations](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations) * [Éditer les filtres CSS](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters) * [Éditer les formes CSS](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes) * [Voir les images de fond](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/View_background_images) * [Utiliser l'inspecteur depuis la console web](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console) * [Examiner les grilles CSS](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) * [Examiner les layout CSS flexbox](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts) Il y a deux façons principales d’ouvrir l'inspecteur sous Mozilla : * **Sans élément sélectionné** : cliquer sur l'option "Inspecteur" du menu "Développement", ou bien utiliser le [raccourci clavier](https://developer.mozilla.org/fr/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools) correspondant (Ctrl + Maj + C) * **Avec un élément sélectionné** : faire un clic droit sur un élément et sélectionner "Examiner l'élément" L'inspecteur s’ouvrira alors dans votre navigateur : ![The all-new Inspector in Firefox 57 DevTools.](https://mdn.mozillademos.org/files/16386/pageInspector.png) Il est également possible de le faire apparaitre à gauche : ![](https://mdn.mozillademos.org/files/16390/inspector_leftSide.png) Ou à droite : ![](https://mdn.mozillademos.org/files/16391/inspector_rightSide.png) Ou dans une fenêtre séparée : ![](https://mdn.mozillademos.org/files/16392/inspector_sideXside.png) La [visite guidée de l'interface utilisateur](https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/UI_Tour) peut vous aider à vous repérer dans l'inspecteur. **Metadata** * **Dernière modification :** 3 avr. 2019, [par des contributeurs MDN](https://wiki.developer.mozilla.org/fr/docs/Outils/Inspecteur/Comment/Ouvrir_l_Inspecteur$history) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.bluekeys.org/guide/web/inspecteur-de-code-web.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.