Documentation de référence sur les badges

Activez ou désactivez différentes superpositions et accélérez la navigation dans l'arborescence DOM grâce à cette référence complète des badges dans le panneau Éléments.

Afficher ou masquer des badges

Pour afficher ou masquer certains badges :

1. Accédez aux outils de développement.
2. Effectuez un clic droit sur un élément de l'arborescence DOM, puis cochez un ou plusieurs badges dans le sous-menu Paramètres des badges.

Le panneau Éléments affiche les badges sélectionnés à côté des éléments correspondants dans l'arborescence DOM. Les sections suivantes expliquent chaque badge.

Afficher le code source

Le badge view-source se trouve à côté de la balise <html> à la racine de la page HTML. Cliquez dessus pour afficher le code source de votre page dans le panneau Sources.

Ce badge fournit un workflow alternatif à l'option Afficher le code source de la page dans le menu contextuel (clic droit) de la page Chrome :

1. Dans Chrome, effectuez un clic droit sur une page > Inspecter.
2. Dans le panneau Éléments, cliquez sur le badge view-source à côté de la balise <html>.
3. Inspectez le code source de la page dans le panneau Sources.

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 accompagnés de badges grid qui activent ou désactivent les superpositions correspondantes.

Activez ou désactivez la superposition dans l'aperçu suivant :

1. Inspectez l'élément dans l'aperçu.
2. 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 numéros et les espaces.

Pour savoir comment déboguer la mise en page de la 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 ou les deux propriétés grid-template-columns et grid-template-rows sont définies sur subgrid. Ces éléments sont accompagnés de badges subgrid qui activent ou désactivent les superpositions correspondantes.

Activez ou désactivez la superposition dans l'aperçu suivant :

1. Inspectez l'élément dans l'aperçu.
2. 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 numéros et les espaces 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 accompagnés de badges flex qui activent ou désactivent les superpositions correspondantes.

Activez ou désactivez la superposition dans l'aperçu suivant :

1. Inspectez l'élément dans l'aperçu.
2. 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 flexibles, consultez Inspecter et déboguer la mise en page flexible CSS.

Annonce

Les outils de développement peuvent détecter certains cadres d'annonces et les baliser. Ces cadres sont accompagnés de badges ad.

Découvrez une annonce dans l'aperçu suivant :

1. Inspectez l'élément dans l'aperçu.
2. Dans l'arborescence DOM, recherchez un élément accompagné du badge ad.

Le badge ad n'est pas cliquable, mais si vous le survolez, une info-bulle s'affiche pour vous indiquer pourquoi l'élément a été identifié comme une annonce, par exemple :

• Script ancestry (Ascendance du script) : scripts impliqués dans la création de l'élément.
• Règles de la liste de filtres : règle spécifique d'une liste de filtres (par exemple, EasyList) qui correspond à l'élément ou à la ressource qu'il a chargée.

Vous pouvez également utiliser l'onglet Rendering (Affichage) pour mettre en surbrillance les cadres d'annonces en rouge.

Faire défiler

Un élément HTML est un conteneur de défilement si sa propriété CSS overflow est définie sur scroll ou auto lorsqu'il y a suffisamment de contenu pour provoquer un dépassement. Ces éléments sont accompagnés de badges scroll.

Scroll-snap

Les conteneurs de défilement peuvent avoir des propriétés CSS qui configurent des points d'ancrage. Ces éléments sont accompagnés de badges scroll-snap qui activent ou désactivent les superpositions correspondantes.

Activez ou désactivez la superposition dans l'aperçu suivant :

1. Inspectez l'élément dans l'aperçu.
2. Dans l'arborescence DOM, cliquez sur le badge scroll-snap à côté de l'élément.
3. Essayez de faire 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 accompagnés de badges container qui activent ou désactivent les superpositions correspondantes.

Activez ou désactivez la superposition dans l'aperçu suivant :

1. Inspectez l'élément dans l'aperçu.
2. Dans l'arborescence DOM, cliquez sur le badge container à côté de l'élément.
3. Essayez de redimensionner l'élément en faisant glisser son angle inférieur droit et observez le changement de 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 les requêtes de conteneur CSS.

Encoche

L'élément HTML <slot> est un espace réservé que vous pouvez remplir avec votre propre contenu. Associé à l'élément <template>, <slot> vous permet de créer des arborescences DOM distinctes et de les présenter ensemble. Les éléments de contenu d'encoche sont accompagnés de badges ink_selectionslot qui servent de liens vers les encoches correspondantes.

Découvrez le ink_selectionslot badge dans l'aperçu suivant :

1. Inspectez l'élément dans l'aperçu.
2. Dans l'arborescence DOM, cliquez sur le badge ink_selectionslot à côté de l'élément pour localiser l'encoche correspondante.
3. Pour revenir au contenu de l'encoche, cliquez sur le badge ink_selectionreveal.

Calque du haut

Ce badge vous aide à comprendre le concept de calque supérieur et à le visualiser. Le calque supérieur affiche le contenu au-dessus de tous les autres calques, quel que soit le z-index. Lorsque vous ouvrez un <dialog> élément à l'aide de la .showModal() méthode, le navigateur le place dans le calque supérieur.

Pour vous aider à visualiser les éléments du calque supérieur, 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 accompagnés de badges ink_selectiontop-layer (N), où N est le 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 ink_selectiontop-layer (N) dans l'aperçu suivant :

1. Dans l'aperçu, cliquez sur Open dialog (Ouvrir la boîte de dialogue).
2. Inspectez la boîte de dialogue.
3. Dans l'arborescence DOM, cliquez sur le ink_selectiontop-layer (1) badge à côté de l'élément <dialog>. Le panneau Éléments vous redirige vers l'élément correspondant dans le conteneur #top-layer après la balise de fermeture </html>.
4. Pour revenir à l'élément <dialog>, cliquez sur le badge ink_selectionreveal à côté de l'élément ou de son ::backdrop.

Multimédia

Le badge media est désactivé par défaut. Lorsqu'il est activé, il s'affiche à côté des éléments <audio> et <video>. Cliquez sur ce badge pour ouvrir le panneau Media (Multimédia) et déboguer votre contenu multimédia.

Pour en savoir plus, consultez Déboguer les lecteurs multimédias avec le panneau "Media" (Multimédia).

Pop-over

Un pop-over est un élément doté d'un attribut popover. Il est utile pour un large éventail de modèles interactifs, y compris les info-bulles, les alertes, les toasts, etc. Ces éléments sont accompagnés de badges popover.

Ce badge active ou désactive un top-layer badge à côté, qui renvoie aux éléments correspondants dans le #top-layer conteneur.

Découvrez le badge popover dans l'aperçu suivant :

1. Dans l'aperçu, cliquez sur TOGGLE POPOVER (Activer/Désactiver le pop-over).
2. Inspectez le pop-over qui s'affiche.

3. Dans l'arborescence DOM, cliquez sur le popover badge à côté de l'élément <div popover>. Le panneau Éléments affiche le badge top-layer.

   

4. Suivez les étapes de la section Calque supérieur.

Pour en savoir plus, consultez également https://web.dev/learn/css/popover-and-dialog.

Starting-style

La@starting-style règle définit les styles initiaux d'un élément avant qu'il ne soit affiché sur la page. Cela est nécessaire pour les éléments qui s'animent à partir de display: none, car ils ont besoin d'un état à partir duquel s'animer. Ces éléments sont accompagnés de badges starting-style.

Ce badge active ou désactive les styles dans la règle @starting-style, ce qui vous permet de voir l'animation en action.

Découvrez le badge starting-style dans l'aperçu suivant :

1. Dans l'aperçu, cliquez sur OPEN POPOVER (Ouvrir le pop-over).
2. Inspectez le pop-over qui s'affiche.

3. Dans l'arborescence DOM, activez ou désactivez le starting-style badge à côté de l'élément <div popover>.

   

4. Observez l'animation en action et les styles appliqués dans l'onglet Éléments > Styles.

Pour en savoir plus, consultez également Animer des pop-overs.

Custom-element

Les éléments HTML personnalisés identifiés par des noms de balises avec des traits d'union ou des attributs is="..." pour les éléments intégrés personnalisés sont accompagnés de badges custom-element dans l'arborescence DOM.

Cliquez sur le badge pour accéder au code correspondant dans le panneau Sources.