Utilisez le panneau Éléments pour examiner 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 pertinents:
Styles:
- Affichez et déboguez les règles CSS appliquées à un élément dans toutes les feuilles de style.
- Identifiez les fichiers CSS non valides, remplacés, inactifs ou d'un autre type qui ne fonctionnent pas comme prévu.
- Modifiez des é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 disponibles dans l'arborescence DOM.
Calculé: répertorie les propriétés résolues appliquées à un élément lors de son rendu par Chrome.
Mise en page: contient des options permettant de modifier les superpositions de type grille et flexbox.
Écouteurs d'événements: répertorie tous les écouteurs d'événements et leurs attributs. Permet de trouver la source des écouteurs d'événements et de filtrer les écouteurs passifs ou bloquants.
Points d'arrêt DOM: répertorie 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 ses propriétés et les propriétés héritées de l'objet.
Accessibilité: liste les éléments portant des libellés ARIA et leurs propriétés. Permet d'activer/de désactiver et d'inspecter une arborescence d'accessibilité (expérimental).
Ouvrir le panneau "Éléments"
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, procédez comme suit:
- Ouvrez les outils de développement.
- Ouvrez le menu 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 panneau en bas de votre fenêtre "Outils de développement".