Utilisez l'onglet Éléments > Propriétés pour parcourir et filtrer les propriétés des objets DOM.
Ouvrir l'onglet "Propriétés"
Pour ouvrir l'onglet Propriétés, procédez comme suit:
- Ouvrez les outils de développement. Par défaut, le panneau Éléments s'ouvre.
- Dans l'arborescence DOM, sélectionnez un nœud.
- Ouvrez l'onglet Propriétés. Si l'onglet ne s'affiche pas, cliquez sur Plus , puis sélectionnez-le dans le menu déroulant.
Propriétés Spot
L'onglet Propriétés trie et affiche les propres propriétés de l'objet en premier, en caractères gras.
Trouver l'origine d'une propriété héritée
L'onglet Propriétés évalue les accesseurs sur les éléments intégrés et les affiche sur l'objet en tant que hérités et en police standard.
Pour trouver l'origine d'une propriété héritée, développez un objet, puis son [[Prototype]], puis l'[[Prototype]] imbriquée, et ainsi de suite.
Dans cet exemple, vous pouvez retracer l'origine de la propriété size héritée en localisant la propriété propre d'origine (en gras) sur la chaîne de prototypes, ainsi que le getter correspondant.
De plus, les propriétés spécifiques aux prototypes ne s'affichent que sur les prototypes, et non sur les objets. Cela facilite le diagnostic des objets.
Propriétés de filtrage
Pour trouver rapidement une propriété, commencez à saisir son nom ou sa valeur dans la zone de saisie Filtrer.
Afficher toutes les propriétés
Par défaut, l'onglet Propriétés n'affiche pas les propriétés avec des valeurs null et undefined.
Pour afficher toutes les propriétés, cochez la case Tout afficher.
Comprendre les propriétés
L'onglet Éléments > Propriétés affiche diverses propriétés.
Propriétés simples
Les propriétés simples sont des paires de <name>: <value>.
Objets et tableaux
Les propriétés réductibles () correspondent aux objets {} ou aux tableaux [].
Pour en savoir plus sur l'inspection des objets JavaScript, consultez Inspecter les propriétés d'objet.
Propriétés correspondant à des nœuds DOM
Les propriétés qui correspondent à des nœuds DOM sont des liens. Cliquez sur un lien pour sélectionner le nœud concerné dans l'arborescence DOM.
Propriétés propres et héritées
Les propriétés en gras appartiennent à l'objet. Elles sont définies directement sur l'objet.
Les propriétés en police normale sont héritées de la chaîne de prototypes. Pour vous les afficher, DevTools évalue les accésseurs pertinents sur les éléments HTML intégrés.
DevTools trie d'abord ses propres propriétés pour les repérer plus facilement.
Propriétés énumérables et non énumérables
Les propriétés énumérables sont de couleur vive. Les propriétés non énumérables sont ignorées.
Vous pouvez itérer sur les propriétés énumérables à l'aide de la boucle for … in ou de la méthode Object.keys().
Méthodes
Les méthodes sont marquées d'un f ().
Pour en savoir plus sur les fonctions, consultez Inspecter les fonctions dans la console.