Le DOM Inspector est un outil mal connu qui est disponible dans Mozilla. Il permet de visualiser les documents Web (typiquement une page) sous sa forme arborescente. Cela peut sembler tout à fait ésotérique, et pourtant... Tout développeur Web gagnerait beaucoup de temps dans son travail s'il savait qu'une page est un arbre. L'élément HTML
a un élément head
et un élément body
, lequel contient d'autres éléments, comme h1
, p
, etc. Voir son document affiché sous forme d'arbre permet de prendre du recul pour le déboguage. Surtout, le DOM Inspector, accessible via le menu Tools | Web development | DOM Inspector
, permet en plus bien d'autres choses, comme afficher les règles CSS qui s'appliquent, tout en permettant de les modifier à la volée tout en affichant les changements de présentation qui découlent de modifications. Franchement, une fois qu'on y a gouté, impossible de s'en passer. Juste un exemple pour illustrer mon propos :
Problème : une propriété CSS s'applique incorrectement à un de mes éléments. Comment savoir d'ou vient le probleme ?
- Je lance le DOM Inspector, je charge la page en indiquant l'URL en question.
- je prends l'outil "find a node by clicking on it" (en haut à gauche)
- Je clique sur l'élément en question, il clignote pour te montrer ses frontières.
- En haut à gauche, s'affiche l'arbre DOM du document. L'élément en question y est sélectionné.
- En haut à droite s'affiche les propriétés de l'élément en question. Je peux choisir une "vue" de ces propriétés. Je choisis
CSS Style Rules
. - La liste des règles s'appliquant en cascade à cet objet s'affichent... Et je peux les modifier en live pour vérifier en direct l'effet des modifications sur le document.
Testez vous-même la bête. C'est fabuleux de puissance. Pour ceux qui parlent l'anglais, trois petits liens en passant : Introduction à DOM Inspector, chez GrayRest, Tutoriel sur DOM Inspector, chez BrownHen et enfin Mozilla pour le développeur Web, sur DevEdge. Et quand je serais grand, je vous parlerais du débogueur JavaScript
5 réactions
1 De Nicolas Moreau - 27/05/2003, 08:43
Ca a l'air bien sympathique en effet, mais il semblerait que le dom inspector ne soit pas inclu dans firebird...
2 De Gilles - 27/05/2003, 10:26
Un petit raccourci clavier bien pratique : ++I. Ca ouvre le DOM inspector avec la page courante.
3 De Gilles - 27/05/2003, 10:27
Le raccourci est donc SHIFT+CTRL+I
4 De tristan - 27/05/2003, 19:56
Génial, merci Yves...
5 De nameMozinet - 28/05/2003, 23:34
MozillaZine-fr - Binaire de Mozilla Firebird avec le DOM Inspector, 27 mai 2003: http://www.mozillazine-fr.org/archive.phtml?article=3216 Utiliser Mozilla pour tester et déboguer les sites Web: http://mozinet.free.fr/moz/fcn/tester_deboguer.html . Traduction en français de Grayrest's Guide to the DOM Inspector for Web Developers: DOM Inspector : Petit guide d'initiation, F. Constantineau: http://mozfr.mozdev.org/docs/startpage-1.0/dom-guide.html