Utilisez le volet Éléments > Propriétés pour parcourir et filtrer les propriétés des objets DOM.
Ouvrir le volet "Propriétés"
Pour ouvrir le volet Properties (Propriétés), procédez comme suit:
- Accédez aux 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.
Détecter les propriétés
Le volet Properties (Propriétés) trie et affiche les propres propriétés de l'objet en premier, en caractères gras.
Rechercher l'origine d'une propriété héritée
Le volet Properties (Propriétés) évalue les accesseurs sur les éléments intégrés et les affiche sur l'objet en tant qu'hérités et dans une police normale.
Pour trouver l'origine d'une propriété héritée, développez un objet, puis sa [[Prototype]], sa [[Prototype]] imbriquée, etc.
Dans cet exemple, vous pouvez tracer l'origine de la propriété size héritée en localisant la propriété d'origine (en gras) sur la chaîne du prototype avec le getter correspondant.
De plus, les propriétés spécifiques aux prototypes ne sont affichées 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 texte Filtrer.
Afficher toutes les propriétés
Par défaut, le volet 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
Le volet É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 (
) sont des objets {} ou des tableaux [].
Pour en savoir plus sur l'inspection d'objets JavaScript, consultez Inspecter les propriétés des objets.
Propriétés correspondant aux nœuds DOM
Les propriétés qui correspondent aux nœuds DOM sont des liens. Cliquez sur un lien pour sélectionner le nœud approprié dans l'arborescence DOM.
Propriétés propriétaires 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 dans la police standard sont héritées de la chaîne de prototype. Pour vous les présenter, les outils de développement évaluent les accesseurs pertinents sur les éléments HTML intégrés.
DevTools trie d'abord ses propres propriétés pour les rendre plus faciles à repérer.
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 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 identifiées par un élément f ().
Pour en savoir plus sur les fonctions, consultez la section Inspecter les fonctions via la console.