Utilisez le panneau Éléments pour inspecter et modifier les éléments DOM.
Présentation
Le panneau Éléments fournit une interface robuste pour inspecter et manipuler le DOM. Vous pouvez utiliser l'arborescence DOM, qui ressemble à un document HTML, pour sélectionner des nœuds DOM spécifiques et les modifier avec d'autres outils.
Le panneau Éléments comporte également les onglets suivants, qui contiennent des outils utiles :
Styles :
- Affichez et déboguez les règles CSS appliquées à un élément à partir de toutes les feuilles de style.
- Identifiez les CSS non valides, remplacés, inactifs ou autres qui ne fonctionnent pas comme prévu.
- Modifiez les éléments en ajoutant une déclaration, en appliquant une classe et en interagissant avec le modèle de boîte.
- Accédez aux options de modification des conteneurs avec les badges disponibles dans l'arborescence DOM.
Calculé : liste les propriétés résolues appliquées à un élément tel qu'il est affiché par Chrome.
Mise en page : contient des options permettant de modifier les calques grille et flexbox.
Écouteurs d'événements : liste tous les écouteurs d'événements et leurs attributs. Vous permet de trouver la source des écouteurs d'événements et de filtrer les écouteurs passifs ou bloquants.
Points d'arrêt DOM : liste les points d'arrêt de modification du DOM ajoutés à partir du panneau "Éléments" et vous permet de les activer, de les désactiver, de les supprimer ou de les afficher.
Propriétés : sélectionnez un nœud DOM à inspecter et triez les propriétés propres et héritées de l'objet.
Accessibilité : liste les éléments qui ont des libellés ARIA et leurs propriétés. Permet d'activer et d'inspecter une arborescence d'accessibilité (fonctionnalité expérimentale).
Ouvrir le panneau "Elements"
Par défaut, lorsque vous ouvrez les outils de développement, le panneau "Éléments" s'ouvre. Vous pouvez également inspecter un nœud n'importe où sur la page pour ouvrir automatiquement le panneau Éléments.
Pour ouvrir manuellement le panneau Éléments :
- Ouvrez les outils pour les développeurs.
- Ouvrez le menu Command (Commande) en appuyant sur :
- macOS : Commande+Maj+P
- Windows, Linux, ChromeOS : Ctrl+Maj+P
- Commencez à saisir
Elements, sélectionnez Afficher les éléments, puis appuyez sur Entrée. Les outils de développement affichent le panneau Éléments dans le Tiroir en bas de la fenêtre des outils de développement.