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 :
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.