Documentation de référence sur les badges

Sofia Emelianova
Sofia Emelianova
GitHub

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 Elements (Éléments).

Afficher ou masquer les badges

Pour afficher ou masquer certains badges :

  1. Ouvrez les 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 Badge settings (Paramètres des badges).

Menu "Paramètres des badges".

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

Afficher la source

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

Badge &quot;Afficher la source&quot;.

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

  1. Dans Chrome, effectuez un clic droit sur une page, puis sélectionnez Inspect (Inspecter).
  2. Dans le panneau Elements (Éléments), cliquez sur le badge view-source à côté de la balise <html>.
  3. Inspectez la 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.

Superposition de grille

La superposition affiche les colonnes, les lignes, leurs numéros et les espaces.

Pour savoir comment déboguer une mise en page en 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 (ou les deux) est définie 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.

Superposition de sous-grille.

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.

Superposition Flex

La superposition affiche les positions des éléments enfants.

Pour savoir comment déboguer des mises en page flexibles, consultez Inspecter et déboguer Flexbox CSS.

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.

Badge publicitaire.

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 :

Info-bulle du badge publicitaire.

  • 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 (Rendu) 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.

Badge de défilement sur un nœud d&#39;arborescence DOM.

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.

Superposition scroll-snap.

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.

Superposition du conteneur.

La superposition affiche les positions des éléments enfants.

Pour savoir comment déboguer des 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. 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 slot qui servent de liens vers les encoches correspondantes.

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

  1. Inspectez l'élément dans l'aperçu.
  2. Dans l'arborescence DOM, cliquez sur le badge slot à côté de l'élément pour localiser l'encoche correspondante. Attribuez et révélez des badges.
  3. Pour revenir au contenu de l'encoche, cliquez sur le badge reveal.

Calque du haut

Ce badge vous aide à comprendre le concept de calque du haut et à le visualiser. Le calque du haut 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 du haut.

Pour vous aider à visualiser les éléments du calque du haut, le panneau Elements (Éléments) ajoute un conteneur #top-layer à l'arborescence DOM après la balise de fermeture </html>.

Les éléments du calque du haut sont accompagnés de badges top-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 top-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 top-layer (1) badge à côté de l'élément <dialog>. Le panneau Elements (Éléments) vous redirige vers l'élément correspondant dans le conteneur #top-layer après la balise de fermeture </html>. Conteneur et badge de la couche supérieure.
  4. Pour revenir à l'élément <dialog>, cliquez sur le badge reveal à côté de l'élément ou de son ::backdrop.

Contenus multimédias

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 (Contenus multimédias) et déboguer vos contenus multimédias.

Le badge média est activé dans les paramètres des badges et s&#39;affiche à côté de l&#39;élément vidéo.

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

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 Elements (Éléments) affiche le badge top-layer.

    Badge popover à côté de l&#39;élément avec un attribut popover.

  4. Suivez les étapes de la section Calque du haut.

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 de 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>.

    Badge de style de départ à côté de l&#39;élément avec la règle @starting-style.

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

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