Documentation de référence sur les badges

Sofia Emelianova
Sofia Emelianova

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

Afficher ou masquer les badges

Pour afficher ou masquer les badges:

  1. Ouvrez les outils de développement.
  2. Effectuez un clic droit sur un élément dans l'arborescence DOM, puis sélectionnez Paramètres du badge. Paramètres du badge.
  3. Cochez ou décochez les cases correspondant aux badges sélectionnés.

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

Grille

Un élément HTML est un conteneur de grille si sa propriété CSS display est définie sur grid ou inline-grid. Un badge grid s'affiche à côté de ces éléments pour activer ou désactiver 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 chiffres 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 au moins l'une de ses propriétés grid-template-columns, grid-template-rows est définie sur subgrid. Un badge subgrid s'affiche à côté de ces éléments pour activer ou désactiver 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 nombres et les intervalles vides 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. Un badge flex s'affiche à côté de ces éléments pour activer ou désactiver 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 Flexbox, consultez Inspecter et déboguer les mises en page flexible CSS.

Les outils de développement peuvent détecter certains frames publicitaires et y ajouter des tags. Le badge ad figure à côté de ces images.

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 d'annonce.

Le badge ad n'est pas cliquable, mais vous pouvez utiliser l'onglet Rendu pour mettre en surbrillance les frames publicitaires en rouge.

Glisser-déposer

Un élément HTML est un conteneur de défilement si sa propriété CSS overflow est définie sur scroll, ou sur auto lorsque le contenu est suffisant pour provoquer un dépassement. Les conteneurs de défilement peuvent avoir des propriétés CSS qui configurent les points d'ancrage. Un badge scroll-snap s'affiche à côté de ces éléments pour activer ou désactiver 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. Faites défiler l'élément vers la droite et observez la superposition.

Superposition d'ancrage.

La superposition affiche la position 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. Un badge container s'affiche à côté de ces éléments pour activer ou désactiver 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 coin inférieur droit, et observez le changement de mise en page et la superposition.

Superposition de 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. Avec l'élément <template>, <slot> vous permet de créer des arborescences DOM distinctes et de les présenter ensemble. Le badge Emplacement.slot apparaît à côté des éléments de contenu des emplacements. Ils servent de liens vers les emplacements correspondants.

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

  1. Inspectez l'élément dans l'aperçu.
  2. Dans l'arborescence DOM, cliquez sur le badge Emplacement.slot à côté de l'élément pour localiser l'emplacement correspondant. Positionnez et découvrez des badges.
  3. Revenez au contenu de l'emplacement en cliquant sur le badge Révélez.reveal.

Couche supérieure

Ce badge vous aide à comprendre le concept de couche supérieure et à la visualiser. La couche supérieure affiche le contenu au-dessus de tous les autres calques, quels que soient les 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 de la couche supérieure sont accompagnés d'un badge Associer en haut à droite de l&#39;écran des contacts.top-layer (N), où N correspond au numéro d'index de l'élément. Les badges sont des liens vers les éléments correspondants du conteneur #top-layer.

Découvrez le badge Associer en haut à droite de l&#39;écran des contacts.top-layer (N) dans l'aperçu suivant:

  1. Dans l'aperçu, cliquez sur Ouvrir la boîte de dialogue.
  2. Inspectez la boîte de dialogue.
  3. Dans l'arborescence DOM, cliquez sur le badge Associer en haut à droite de l&#39;écran des contacts.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-layer, après la balise de fermeture </html>. Conteneur de la couche supérieure et badge
  4. Revenez à l'élément <dialog> en cliquant sur le badge Révélez.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 Multimédia et déboguer votre contenu multimédia.

Badge multimédia activé dans les paramètres du badge et affiché à côté de l&#39;élément vidéo.

Pour en savoir plus, consultez Déboguer les lecteurs multimédias avec le panneau multimédia.