Examiner et modifier le code HTML

Il est possible d'examiner et d'éditer le code HTML d'une page grâce au panneau HTML.

Fil d'Ariane HTML

En bas du panneau HTML, se trouve un fil d'Ariane (« Breadcrumbs » en Anglais). Ce fil affiche l'a hiérarchie complète de l'élément sélectionné dans la page :

Survoler un élément du fil mettra celui-ci en surbrillance dans la page.

Le fil possède ses propres raccourcis clavier.

Menu contextuel de l'élément

Recherche

Le champ de recherche de l'inspecteur de page correspond à toutes les balises du document actuel et de tous les cadres.

Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier Ctrl + F, ou Cmd + F sous Mac. Il existe trois types de recherches qui sont effectuées automatiquement en fonction de ce que vous saisissez : une recherche en texte intégral, une recherche par sélecteur CSS et une recherche XPath.

La recherche en texte intégral sera toujours exécutée, indépendamment de ce que vous saisissez. Cela vous permet de trouver les sélecteurs CSS et les expressions XPath se trouvant dans le texte.

Vous pouvez rechercher des éléments en saisissant un sélecteur CSS.

Au fur et à mesure que vous tapez, une fenêtre contextuelle d'autocomplétion affiche tous les attributs de classe ou d'ID qui correspondent au terme de recherche actuel :

Appuyez sur Haut et Bas pour faire défiler les suggestions, Tab pour choisir la suggestion actuelle, puis Entrer pour sélectionner le premier nœud avec cet attribut.

Pour faire défiler les correspondances, appuyez sur Entrer. Vous pouvez revenir en arrière en utilisant Maj + Entrer.

Il est également possible d'effectuer une recherche via XPaths. Cela vous permet de rechercher des éléments spécifiques sans le conflit des mots correspondants dans le texte. Par exemple, //a correspond à tous les éléments <a> mais pas à la lettre « a » dans le contenu du texte. En outre, il permet d'effectuer des recherches plus avancées, comme la recherche d'éléments commençant par un texte spécifique, par exemple.

Correspondance d'une recherche d'inspecteur utilisant une expression XPath

Arbre HTML

Le reste du panneau affiche le HTML de la page sous forme d'arbre (cette interface est également appelée Markup View). À la gauche de chaque nœud se trouve une flèche, cliquer sur celle-ci développera le nœud. Appuyer sur la touche Alt développera tous les nœuds inclus dans l'élément.

Le nouvel inspecteur HTML de Firefox 57

Survoler un élément dans l'arbre mettra celui-ci en surbrillance dans la page.

Les nœuds qui ne sont pas visibles sont affichés de façon délavée/désaturée. Cela peut se produire pour différentes raisons comme l'utilisation de display: none ou que l'élément n'a pas de dimensions.

Une ellipse est affichée entre la balise ouvrante et la balise fermante d'un élément lorsque le nœud est réduit s'il a un contenu plus important. Les enfants sont alors indiqués dans l'arbre par cette icône :

Des marqueurs (« badges ») sont affichés à droite de certains nœuds. Le tableau ci-dessous explique la signification de chaque badge :

event L'élément a un ou plusieurs écouteurs d'événements qui lui sont attachés. Cliquer sur le marqueur ouvre une infobulle listant les écouteurs d'événements et permet pour chaque écouteur de passer à la ligne de code JavaScript dans le Debugger où l'écouteur est défini.
scroll L'élément est un conteneur de défilement (en-US), c'est-à-dire qu'il a soit overflow: scroll appliqué, soit overflow: auto et un contenu suffisant pour provoquer un débordement avec défilement.

Si la préférence devtools.overflow.debugging.enabled est définie sur true, le basculement du badge scroll mettra en évidence tous les éléments causant le débordement, et ces nœuds afficheront en plus le badge overflow.
overflow L'élément provoque un débordement avec défilement dans un conteneur de défilement (en-US) (soit le nœud actuel ou un nœud parent — le nœud affecté affichera le badge scroll).

Note :

Le badge overflow est introduit dans Firefox 83. Dans les versions antérieures, il peut être activé en utilisant la préférence devtools.overflow.debugging.enabled définie sur true.

grid L'élément est un conteneur de grille, c-à-d. qu'on lui a appliqué display: grid. En cliquant sur le marqueur, on active le surligneur de grille.
flex L'élément est un conteneur flexible, c-à-d. qu'on lui a appliqué display: flex. En cliquant sur le marqueur, vous activez le surligneur de flexbox.
inline-grid L'élément est un conteneur de grille en ligne, c-a-d. qu'il a display: inline-grid ou display: inline grid qui lui est appliqué. En cliquant sur le marqueur, vous activez le surligneur de grille.
inline-flex L'élément est un conteneur inline flex, c'est-à-dire qu'il a display: inline-flex ou display: inline flex qui lui est appliqué. En cliquant sur le marqueur, vous activez le surligneur de flexbox.
personnalisé... L'élément est un élément personnalisé. En cliquant sur le marqueur, on passe à la ligne de code JavaScript dans le débogueur où l'élément personnalisé a été défini.

Note :

Il existe des raccourcis clavier utiles qui peuvent être utilisés dans l'arborescence HTML — voir la liste des raccourcis clavier du volet HTML.

::before et ::after

Vous pouvez inspecter les pseudo-éléments ajoutés à l'aide de ::before et ::after :

Définition d'un élément personnalisé

Lorsque vous ouvrez l'inspecteur sur une page qui comprend des éléments personnalisés, vous pouvez afficher la définition de la classe de l'élément personnalisé dans le débogueur :

  1. Inspecter l'élément
  2. Cliquez sur le mot personnalisé.

La source de la classe de l'élément sera affichée dans le débogueur.

Nœuds de texte avec espaces blancs uniquement

Les développeurs Web n'écrivent pas tout leur code sur une seule ligne de texte. Ils utilisent des espaces blancs tels que des espaces, des retours ou des tabulations entre leurs éléments HTML, car cela rend le balisage plus lisible.

Habituellement, cet espace blanc semble n'avoir aucun effet et aucune sortie visuelle, mais en fait, lorsqu'un navigateur analyse le HTML, il génère automatiquement des nœuds de texte anonymes pour les éléments qui ne sont pas contenus dans un nœud. Cela inclut l'espace blanc (qui est après tout un type de texte).

Si ces nœuds de texte générés automatiquement sont des éléments en ligne et les boîtes en ligne, les navigateurs leur donneront une largeur et une hauteur non nulles. Vous trouverez alors des écarts étranges entre les éléments, même si vous n'avez pas défini de marge ou de padding sur eux.

Depuis Firefox 52, l'inspecteur affiche ces nœuds d'espacement, ce qui vous permet de voir d'où viennent les lacunes de votre balisage. Les nœuds d'espace blanc sont représentés par un point : et vous obtenez une info-bulle explicative lorsque vous les survolez :

Pour voir cela en action, voyez la démo à l'adresse suivante https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

Racines fantômes

Les racines fantômes présentes dans le DOM sont exposées dans la page HTML de la même manière que le DOM régulier. La racine fantôme est signifiée par un nœud nommé #shadow-root — vous pouvez cliquer sur sa flèche d'expansion pour voir le contenu complet du DOM fantôme, puis manipuler les nœuds contenus de la même manière que les autres parties du DOM de la page (bien qu'avec un jeu de fonctionnalités limité — vous ne pouvez pas, par exemple, glisser-déposer ou supprimer les nœuds du DOM fantôme).

Une vue d'une racine fantôme affichée à l'intérieur de l'arbre DOM dans les DevTools de Firefox

Si un DOM fantôme contient un élément « slotted » (un élément avec un attribut slot après avoir été inséré à l'intérieur d'un élément <slot> — voir l'utilisation des templates et des slots pour une explication de leur utilisation), l'élément « slotté » sera affiché à l'intérieur de l'élément <slot> correspondant, avec un lien « reveal » à côté. En cliquant sur le lien « reveal », l'élément avec l'attribut slot sera mis en évidence tel qu'il existe en dehors du DOM fantôme.

Une vue d'une racine fantôme affichée à l'intérieur de l'arbre DOM dans les DevTools de Firefox

C'est très utile lorsque vous avez un élément <slot> et que vous ne pouvez pas trouver la source de son contenu.

Note :

L'inspection Shadow DOM a été implémentée dans Firefox 61, mais était cachée derrière le préfixe dom.webcomponents.shadowdom.enabled jusqu'à Firefox 63. Elle est maintenant activée par défaut.

Vous pouvez effectuer certaines tâches courantes sur un nœud spécifique à l'aide d'un menu contextuel. Pour activer ce menu, cliquez contextuellement sur l'élément. Le menu contient les éléments suivants — cliquez sur les liens pour trouver la description de chaque commande dans la liste de Référence du menu contextuel :

* Ces options n'apparaissent que dans certains contextes, par exemple l'option "Ouvrir le fichier dans l'éditeur de style" n'apparaît que lorsque vous cliquez contextuellement sur le haut d'un lien vers un fichier CSS.

Référence du menu contextuel

Modifier comme HTML Modifie le HTML de l'élément.
(Copier) L'intérieur du HTML Copie le code HTML interne de l'élément.
(Copier) L'extérieur du HTML

Copie le HTML externe de l'élément.

Appuyer sur Ctrl + C (ou Cmd + C sur un Mac) effectue également cette action.

(Copier) Sélecteur unique/Sélecteur CSS Copie un sélecteur CSS qui sélectionne l'élément de manière unique.
(Copier) Le chemin CSS Copie un sélecteur CSS qui représente le chemin d'accès complet à l'élément.
(Copier) L'image en tant que Data-URL Copie l'image sous forme d'URL data://, si l'élément sélectionné est une image.
(Copier) L'attribut Copie l'attribut de l'élément.
Afficher les propriétés DOM Ouvre la Console Web et entre la commande de console « inspect($0) » pour inspecter l'élément actuellement sélectionné.
Ouvrir dans la console Affecte le nœud actuellement sélectionné à une variable nommée temp0 (ou temp1 si temp0 est déjà pris, et ainsi de suite), puis ouvre la Console Web, vous permettant d'interagir avec ce nœud en utilisant la ligne de commande de la console.
Tout développer Dans l'arborescence, développe l'élément actuel et tous les éléments qui se trouvent sous lui. Cela équivaut à maintenir la touche Alt et à cliquer sur le triangle de divulgation à côté d'un élément.
Tout réduire Dans l'arborescence, réduise l'élément actuel. Cela équivaut à cliquer sur la flèche de divulgation située à côté d'un élément qui a été développé.
(Coller) L'intérieur du HTML Colle le contenu du presse-papiers dans le nœud en tant que son innerHTML.
(Coller) L'extérieur du HTML Colle le contenu du presse-papiers dans le nœud en tant que son outerHTML.
(Coller) Avant Colle le contenu du presse-papiers dans le document situé immédiatement avant ce nœud.
(Coller) Après Colle le contenu du presse-papiers dans le document immédiatement après ce nœud.
(Coller) Le premier nœud enfant Colle le contenu du presse-papiers dans le document en tant que premier enfant de ce nœud.
(Coller) Le dernier nœud enfant Colle le contenu du presse-papiers dans le document en tant que dernier enfant de ce nœud.
Faire défiler la vue jusqu'au nœud

Fait défiler la page Web pour que le nœud sélectionné soit visible.

À partir de Firefox 44, l'appui sur le raccourci clavier S permet également de faire défiler le nœud sélectionné en vue.

Prendre une capture du nœud Prend une capture d'écran du nœud sélectionné, enregistrée dans votre répertoire de téléchargement. Voir Prendre des captures d'écran.
Créer un nouveau nœud Crée un nouvel élément <div> ; vide comme dernier enfant de l'élément actuellement sélectionné. Voir Inserting new nodes.
Dupliquer le nœud Crée une copie de cet élément, et insérez la copie immédiatement après cet élément.
Supprimer le nœud Supprime l'élément du DOM.
(Attribut) Ajouter un attribut Ajoute un attribut à l'élément.
(Attribut) Éditer l'attribut (uniquement lorsqu'il est invoqué sur un attribut) Modifie l'attribut.
(Attribut) Supprimer l'attribut (uniquement lorsqu'il est invoqué sur un attribut) Supprime l'attribut.
Ouvrir le lien dans un nouvel onglet (uniquement lorsqu'il est invoqué sur un lien, tel qu'un attribut href) Ouvre l'élément lié dans un nouvel onglet.
Ouvrir le fichier dans le débogueur (uniquement lorsqu'il est invoqué sur un lien vers une source JS) Ouvre la source liée dans le débogueur.
Ouvrir le fichier dans l'éditeur de style (uniquement lorsqu'il est invoqué sur un lien vers une source CSS) Ouvre la source liée dans l'éditeur de style.
Copier l'adresse du lien (uniquement lorsqu'il est invoqué sur une URL) Copie l'URL.
(Changer de pseudo-classe) hover Définit la pseudo-classe CSS :hover.
(Changer de pseudo-classe) active Définit la pseudo-classe CSS :active.
(Changer de pseudo-classe) focus Définit la pseudo-classe CSS :focus.
(Changer de pseudo-classe) focus-visible Définit la pseudo-classe CSS :focus-visible.
(Changer de pseudo-classe) focus-within Définit la pseudo-classe CSS :focus-within.
(Changer de pseudo-classe) visited Définit la pseudo-classe CSS :visited.

Éditer le code HTML

Il est possible d'éditer les éléments HTML directement dans le panneau HTML. Il suffit de double cliquer sur le texte voulu, de le modifier puis d'appuyer sur Entrée. Les modifications sont immédiatement effectives.

Pour éditer le outerHTML, il faut ouvrir le menu contextuel et sélectionner "Modifier comme HTML". Une boite apparaîtra alors dans le panneau HTML :

Modifier le HTML directement dans le panneau Inspecteur dans Firefox 57

Vous pouvez y ajouter n'importe quel HTML : changer la balise de l'élément, modifier les éléments existants ou en ajouter de nouveaux. Dès que vous cliquez en dehors de la boîte, les modifications sont appliquées à la page.

Lorsque vous modifiez du HTML, le menu contextuel que vous voyez est le menu normal pour travailler avec du texte modifiable :

Copier coller

Il est possible d'utiliser le menu contextuel pour copier des nœuds dans l'arbre HTML.

Glisser déposer

Il est possible de modifier l'HTML en déplaçant les nœuds dans l'arbre HTML. Il suffit de rester cliqué sur un élément et de le glisser vers le haut ou vers le bas. Lorsque le clic est relâché, l'élément sera inséré à la position voulue.

Vous pouvez annuler le glisser-déposer en appuyant sur la touche Echap.

Insérer de nouveaux nœuds

Il y a une icône "+" en haut du panneau :

Cliquer sur cette icône insère une balise <div> dans le document en tant que dernier enfant de l'élément sélectionné. Il est alors possible de modifier le contenu et le style du nœud, exactement comme n'importe quel autre élément.

L'option "Créer un nouveau nœud" dans le menu contextuel fait la même chose.

Il est à noter que le bouton est désactivé si l'élément sélection est tel qu'ajouter un dernier enfant n'aurait aucun effet (par exemple un <html> ou un <iframe>). Cependant, il est actif dans moments ou il n'est pas valide d'insérer un élément <div>, (<style> ou <link> par exemple). Dans ces cas, l'élément ajouté est un texte.