Dom et JavaScriptDOM Inspector
Firefox DOM Inspector
Firefox DOM Inspector
Firefox DOM Inspector n'est téléchargable qu'a partir de la version 3 de Firefox. Pour les détenteurs de la version 2 et en dessous, cet outil est installé automatiquement avec FireFox via l'installation personnalisé. Pour le récupérer, désinstaller et réinstaller votre navigateur, en choisissant cette fois l'installation personnalisée. Pas de crainte de perdre son profil (configuration, Marque-pages, extensions...), rien ne sera modifié.Une fois le navigateur réinstallé ou téléchargé, on peut démarrer DOM Inspector par le menu Outils - DOM Inspector (Ctrl + Maj + i).
Une fois DOM Inspector ouvert, l'arborescence du document de trouve à gauche. Chaque ligne représente un nœud. Dans la partie de droite, avec l'option "javascript Object" du menu déroulant, s'affichent toutes les propriétés de nodeName à previousSibling (et plus encore...) du nœud sélectionné dans la partie de gauche.
Dans la fenêtre de gauche, vous pouvez afficher différents type d'informations:
- DOM Nodes est la vue par défaut. Elle affiche la stucture de la page.
- Box model montre la position, les dimentions, marges, bordures d'une boîte.
- XBL Bindings pour ceux qui utilisent XUL (XML-based User interface Language).
- CSS Style Rules montre toutes les règles CSS appliquées au nœud sélectionné.
- Computed Style indique toutes les règles appliquées au nœud sélectionné, quelle que soit leur origine (déclaration explicite, script ou héritage).
- Javascript Object montre tous les objets JavaScript utilisés.
Note: Firefox et les autre navigateurs de la famille Mozilla considèrent les sauts de ligne du code comme des nœuds de texte vide, chose que ne fait pas Microsoft Internet Explorer. Le nombre d'enfants d'un élément est donc différent selon le navigateur. Par exemple le code alert(x.childnodes.length) (childNodes renvoie une collection de nœuds enfants de l'élément donné) révèle des résultats différent pour un document identique.
Exemple:
<input type="button" value="Nombre d'enfant" onclick="javascript:var x = document.getElementsByTagName('div')[0]; alert(x.childNodes.length);">
Firefox lit 12 div tandis que Internet Explorer 6 et 7 en lit 11
Exemple:
<input type="button" value="Nombre d'enfant" onclick="javascript:var x = document.getElementsByTagName('div')[0]; alert(x.childNodes.length);">
Firefox lit 12 div tandis que Internet Explorer 6 et 7 en lit 11
