Basculez entre différentes superpositions et accélérez la navigation dans l'arborescence DOM grâce à cette documentation de référence complète sur les badges dans le panneau Éléments.
Afficher ou masquer les badges
Pour afficher ou masquer les badges:
- Accédez aux Outils de développement.
- Effectuez un clic droit sur un élément dans l'arborescence DOM, puis sélectionnez Paramètres du badge.
- Cochez ou décochez les cases à côté des badges choisis.
Le panneau Éléments affiche les badges sélectionnés à côté des éléments appropriés dans l'arborescence DOM. Chaque badge est décrit dans les sections suivantes.
Grille
Un élément HTML est un conteneur de grille si sa propriété CSS display est définie sur grid ou inline-grid. Ces éléments sont associés à des badges grid qui permettent d'activer ou de désactiver les superpositions correspondantes.
Activez ou désactivez la superposition sur l'aperçu suivant:
- Inspectez l'élément dans l'aperçu.
- Dans l'arborescence DOM, cliquez sur le badge
gridà côté de l'élément et observez la superposition.
La superposition affiche les colonnes, les lignes, leurs nombres et les écarts.
Pour savoir comment déboguer la mise en page sous forme de grille, consultez Inspecter la grille CSS.
Sous-grille
Une sous-grille est une grille imbriquée qui utilise les mêmes pistes que sa grille parente. Un élément est un conteneur de sous-grille si l'une de ses propriétés grid-template-columns ou grid-template-rows est définie sur subgrid (ou les deux). Ces éléments sont associés à des badges subgrid qui permettent d'activer ou de désactiver les superpositions correspondantes.
Activez ou désactivez la superposition sur l'aperçu suivant:
- Inspectez l'élément dans l'aperçu.
- Dans l'arborescence DOM, cliquez sur le badge
subgridà côté de l'élément et observez la superposition.
La superposition affiche les colonnes, les lignes, leurs nombres et les écarts d'une sous-grille.
Flex
Un élément HTML est un conteneur flexible si sa propriété CSS display est définie sur flex ou inline-flex. Ces éléments sont associés à des badges flex qui permettent d'activer ou de désactiver les superpositions correspondantes.
Activez ou désactivez la superposition sur l'aperçu suivant:
- Inspectez l'élément dans l'aperçu.
- Dans l'arborescence DOM, cliquez sur le badge
flexà côté de l'élément et observez la superposition.
La superposition affiche les positions des éléments enfants.
Pour savoir comment déboguer les mises en page Flex, consultez Inspecter et déboguer l'environnement flexible CSS.
Annonce
Les outils de développement peuvent détecter certains cadres publicitaires et y ajouter des tags. Ces cadres sont accompagnés de ad badges.
Découvrez une annonce dans l'aperçu suivant:
- Inspectez l'élément dans l'aperçu.
- Dans l'arborescence DOM, recherchez un élément accompagné du badge
ad.
Le badge ad n'est pas cliquable, mais vous pouvez utiliser l'onglet Affichage pour mettre en surbrillance les cadres d'annonce en rouge.
Faire défiler l'écran
Un élément HTML est un conteneur de défilement si sa propriété CSS overflow est définie sur scroll ou auto lorsque le contenu est suffisant pour provoquer un débordement. Les conteneurs de défilement peuvent avoir des propriétés CSS qui configurent les points d'ancrage. Ces éléments sont associés à des badges scroll-snap qui permettent d'activer ou de désactiver les superpositions correspondantes.
Activez ou désactivez la superposition sur l'aperçu suivant:
- Inspectez l'élément dans l'aperçu.
- Dans l'arborescence DOM, cliquez sur le badge
scroll-snapà côté de l'élément. - Faites défiler l'élément vers la droite et observez la superposition.
La superposition affiche les positions des éléments et les points d'ancrage.
Conteneur
Un élément HTML est un conteneur s'il possède la propriété CSS container-type. Ces éléments sont associés à des badges container qui permettent d'activer ou de désactiver les superpositions correspondantes.
Activez ou désactivez la superposition sur l'aperçu suivant:
- Inspectez l'élément dans l'aperçu.
- Dans l'arborescence DOM, cliquez sur le badge
containerà côté de l'élément. - Essayez de redimensionner l'élément en faisant glisser son coin inférieur droit. Observez alors la mise en page et la superposition.
La superposition affiche les positions des éléments enfants.
Pour savoir comment déboguer les requêtes de conteneur, consultez Inspecter et déboguer des requêtes de conteneur CSS.
Encoche
L'élément HTML <slot> est un espace réservé que vous pouvez remplir avec votre propre contenu. Avec l'élément <template>, <slot> vous permet de créer des arborescences DOM distinctes et de les présenter ensemble. Les éléments du contenu des emplacements sont associés à 
slot badges qui font office de liens vers les emplacements correspondants.
Découvrez le badge 
slot dans l'aperçu suivant:
- Inspectez l'élément dans l'aperçu.
- Dans l'arborescence DOM, cliquez sur le badge
slotà côté de l'élément pour localiser l'emplacement correspondant.
- Pour revenir au contenu de l'emplacement, cliquez sur le badge
reveal.
Couche supérieure
Ce badge vous aide à comprendre le concept de couche supérieure et à le visualiser. La couche supérieure affiche le contenu au-dessus de tous les autres calques, quel que soit le z-index. Lorsque vous ouvrez un élément <dialog> à l'aide de la méthode .showModal(), le navigateur le place dans la couche supérieure.
Pour vous aider à visualiser les éléments de la couche supérieure, le panneau Éléments ajoute un conteneur #top-layer à l'arborescence DOM après la balise de fermeture </html>.
Les éléments du calque supérieur sont associés à 
top-layer (N) badges, où N correspond au numéro d'index de l'élément. Les badges sont des liens vers les éléments correspondants dans le conteneur #top-layer.
Découvrez le badge 
top-layer (N) dans l'aperçu suivant:
- Dans l'aperçu, cliquez sur Ouvrir la boîte de dialogue.
- Inspectez la boîte de dialogue.
- Dans l'arborescence DOM, cliquez sur le badge
top-layer (1)à côté de l'élément<dialog>. Le panneau Éléments vous redirige vers l'élément correspondant dans le conteneur#top-layeraprès la balise de fermeture</html>.
- Revenez à l'élément
<dialog>en cliquant sur le badge
revealà côté de l'élément ou de son::backdrop.
Multimédia
Le badge media est désactivé par défaut. Lorsqu'elle est activée, elle s'affiche à côté des éléments <audio> et <video>. Cliquez sur ce badge pour ouvrir le panneau Médias et déboguer vos contenus multimédias.
Pour en savoir plus, consultez Déboguer les lecteurs multimédias avec le panneau "Contenus multimédias".