Le visionneur de propriétés DOM permet d'inspecter les propriétés {{Glossary("DOM")}} en tant qu'arbre extensible. Cet arbre commence à partir de l'objet {{domxref("window")}} de la page actuelle ou de l'iframe sélectionné.
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".
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 macOS). 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".
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.
Si le DOM change, il est possible d'appuyer sur le bouton "Actualiser" actualisera l'affichage :
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.