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 ?

  1. Je lance le DOM Inspector, je charge la page en indiquant l'URL en question.
  2. je prends l'outil "find a node by clicking on it" (en haut à gauche)
  3. Je clique sur l'élément en question, il clignote pour te montrer ses frontières.
  4. En haut à gauche, s'affiche l'arbre DOM du document. L'élément en question y est sélectionné.
  5. 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.
  6. 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 ;-)