Visionneur de propriétés DOM

Le visionneur de propriétés DOM est une des nouveautés de Firefox 48. Cet outil est désactivé par défaut. Pour l'utiliser, il faut l'activer dans les options des outils de développement.

Le visionneur de propriétés DOM permet d'inspecter les propriétés DOM en tant qu'arbre extensible. Cet arbre commence à partir de l'objet window de la page actuelle ou de l'iframe sélectionné.

Activer le visionneur de propriétés DOM

Cet outil n'est pas activé par défaut. Pour l'activer, il faut ouvrir les options des outils de développement et cocher la case "DOM" dans la catégorie "Outils de développement par défaut".

Ouvrir le visionneur de propriétés DOM

Une fois l'outil activé, il est possible de l'ouvrir en sélectionnant l'onglet "DOM" depuis le menu développement du menu de Firefox (ou du menu Outils sous Mac OS X).  Il est également possible d'utiliser le raccourci clavier Ctrl + Maj + W.

La Boite à outils apparaitra en bas du navigateur avec le visionneur de propriétés DOM activé. L'onglet s'appelle juste "DOM".

L'interface du visionneur de propriétés DOM

Arbre DOM

Les différentes propriétés du DOM sont affichées sous la forme d'un arbre extensible. La partie gauche affiche le nom des propriétés, tandis que la partie droite leur valeur. La valeur n'affiche au maximum que trois propriétés d'un objet ou trois propriétés d'un tableau. Si une propriété a plus de trois éléments, une annotation "...more" est ajoutée à la fin. Si une propriété n'est pas éditable, une icône de cadenas est ajoutée.

Actualiser l'affichage

Si le DOM change, il est possible d'appuyer sur le bouton "Actualiser" actualisera l'affichage :

Button to update the DOM Inspector display

Filtrage

Il y a un barre de recherche dans la barre d'outils :

Cela filtre l'arbre pour n'afficher que les éléments qui correspondent à la recherche. Les éléments qui correspondent sont les éléments dont le nom est contenu dans la recherche. La correspondance est sensible à la case.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : maximelore
 Dernière mise à jour par : maximelore,