FAQ de l'Inspecteur DOM

Comment faire pour inspecter une page/fenêtre web ?

Le menu "File" permet différentes manières d'inspecter un document :

Inspect Content Document

Inspecte un contenu non privilégié présent dans l'onglet choisi.

Inspect Chrome Document

Inspecte une application chrome. Cela inclut les fenêtres XUL ouvertes.

Inspect a URL

Cela sélectionne simplement la barre d'adresse de l'Inspecteur DOM. Cette barre d'adresse permet d'inspecter les documents qui peuvent être accédés via une URL. Inspecter une URL a pour effet de charger le document de correspondant à cette URL dans le panneau "Browser". Cela peut inclure des documents chrome. Il n'est cependant pas recommandé d'inspecter des documents XUL directement via URL, car certains comportements du document peuvent dépendre du fait que le document doit être contenu dans un autre document XUL. À la place, il est recommandé de charger le document XUL normalement (en utilisant des commandes ou en ouvrant des fenêtres dans l'application utilisée), puis de trouver et de l'inspecter grâce au menu "Inspect Chrome Document".

Pourquoi certains nœuds dans le panneau "DOM nodes" apparaissent en rouge ?

Ces nœuds sont des nœuds à contenu anonyme. Cela veut dire qu'ils ne sont pas dans le DOM généré par le document d’origine.

Comment faire pour cacher ces nœuds anonymes ?

Il est possible de cacher les nœuds anonymes dans l'inspecteur en décochant l'option "Show Anonymous Content" dans le menu menu "View".

Il y beaucoup de nœuds #text vides que je ne vois pas dans le document d'origine. Que sont-ils, pourquoi sont ils là et comment s'en débarrasser ?

Ces nœuds sont actuellement les sauts de ligne et l'espacement entre les éléments. Une longue discussion sur pourquoi ces nœuds sont présent est disponible dans le bug 26179.

En revanche, il est possible de cacher ces nœuds d'espaces dans l'inspecteur en décochant l'option "Show Whitespace Nodes" dans le menu "View". Il est à noter que certains nœuds de texte vide ne seront pas cachés. Ces nœuds ont en effet une propriété CSS white-space qui empêche l'agent utilisateur de réduire les séquences d'espaces, et ne sont donc pas cachés.

Il est parfois difficile de trouver un nœud en particulier dans l'arbre DOM. Existe-t-il une manière plus rapide pour le trouver et naviguer dans l'arbre ?

Bien sûr. Il est possible d'effectuer une recherche basée sur le nom du nœud, sur son id, ou même sur un attribut/paire de valeur. Pour effectuer une recherche il faut cliquer sur "Find Nodes..." dans le menu "Edit" (ou utiliser le raccourci Ctrl+f). Une fenêtre dans laquelle il est possible de rentrer les critères de la recherche apparaitra alors. La recherche de l'Inspecteur DOM utilise les RegExps JavaScript pour trouver les nœuds et fera de la correspondance partielle automatiquement. Ainsi, faire une recherche avec l'expression "tab" retournera des résultats pour tabpanel et tabbox en plus de tab. pour limiter la recherche, il est possible d'utiliser les marqueurs de début (^) et de fin ($) de chaîne de caractère. Ainsi, rechercher "^tab$" retournera uniquement les nœuds dont les noms sont exactement "tab".

Il est également possible dans le cas d'un manque total d'information sur le noeud, d'essayer de le sélectionner en cliquant dessus. Pour cela, il faut trouver le nœud dans la page puis le sélectionner grâce au bouton "inspect by clickling" de la barre d'outils. Le menu "Edit" inclut également une option "Select Element by Click".

Comment inspecter les pseudo-classes et les pseudo-éléments dans la vue des règles CSS ?

L'Inspecteur DOM permet de forcer les pseudo-classes :hover, :active, et :focus à s'appliquer sur un nœud donné. Pour ce faire, il faut depuis le panneau des nœuds DOM, sélectionner le nœud et faire apparaître le menu contextuel (clic droit sur le nœud). Dans ce menu, il faut cliquer sur l'option Set Pseudo-classes qui permet d'appliquer les pseudo-classes mentionnées ci-dessus.

Il n'y a actuellement aucun moyen d'inspecter les règles appliquées dynamiquement pour d'autres pseudo-classes ou pseudo-éléments en utilisant l'interface de l'Inspecteur DOM. Il est en revanche possible de trouver n'importe quelle règle (afin de la modifier) dans sa feuille de style parente en utilisant le "Style Sheets viewer" dans le panneau document, puis de la localiser dans le "CSS Rules viewer" du panneau "object".