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 contient également les onglets suivants, qui contiennent des outils pertinents:
Styles:
- Afficher et déboguer les règles CSS appliquées à un élément à partir de toutes les feuilles de style
- Recherchez les CSS non valides, ignoré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 Box.
- Accédez aux options de modification du conteneur à l'aide des badges de l'arborescence DOM.
Calculé: liste les propriétés résolues appliquées à un élément telles qu'elles sont affichées par Chrome.
Mise en page: contient des options permettant de modifier les superpositions de grille et de 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 DOM ajoutés depuis le 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 pour inspecter et trier les propriétés propres et héritées de l'objet.
Accessibilité: liste les éléments qui comportent des libellés ARIA et leurs propriétés. Permet d'activer et d'inspecter une arborescence d'accessibilité (expérimental).
Ouvrir le panneau "Elements"
Par défaut, lorsque vous ouvrez les outils pour les développeurs, 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 Elements (Éléments) :
- Accédez aux outils de développement.
- Ouvrez le menu Command (Commande) en appuyant sur :
- macOS: Command+Maj+P
- Windows, Linux et ChromeOS: Ctrl+Maj+P
- Commencez à saisir
Elements, sélectionnez Afficher les éléments, puis appuyez sur Entrée. DevTools affiche le panneau Éléments dans le volet en bas de la fenêtre DevTools.