Utilisez le panneau Éléments pour examiner et modifier les éléments DOM.
Présentation
Le panneau Éléments offre une interface efficace 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 à l'aide d'autres outils.
Le panneau Éléments comporte également les onglets suivants, qui contiennent les outils pertinents:
Styles:
- Affichez et déboguez les règles CSS appliquées à un élément de toutes les feuilles de style.
- Identifiez tous les fichiers CSS non valides, remplacés, inactifs ou de tout autre élément CSS 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 de l'arborescence DOM.
Calculé: liste les propriétés résolues appliquées à un élément lorsqu'elles sont affichées par Chrome.
Layout (Mise en page) : contient des options permettant de modifier les superpositions de la grid et de la 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 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.
Properties (Propriétés) : sélectionnez un nœud DOM pour inspecter et trier les propriétés propriétaires et héritées de l'objet.
Accessibilité: répertorie les éléments comportant 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 "Elements"
Par défaut, le panneau "Elements" s'ouvre lorsque vous ouvrez les outils de développement. 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:
- Accédez aux outils de développement.
- Ouvrez le menu Commande en appuyant sur les touches suivantes :
- macOS: Cmd+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 la fenêtre "Outils de développement".