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

View-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 > 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 la 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 les 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 vous pouvez 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.

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 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 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. Insérer et afficher 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.

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.

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 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 notifications toast, 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 pop-up à côté de l&#39;élément avec un attribut pop-up.

  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.