Hier j'ai passé du temps sur un script python qui générait du HTML. Je devais intégrer une CSS. "Facile", je me suis dit. Et bien non, le script python était bugger et il générait une fin de div en trop quelque part dans le source HTML. Du coup le design partait en vrille.
Amaya m'a été d'une aide précieuse pour comprendre la structure des balises afin de trouver quelle balise était en trop. Dans Amaya, une fois la page chargée, nous avons accès à une vue "Structure" qui permet de voir le HTML sous forme de DOM. Cette vue permet de cliquer sur un noeud et de voir quels sont ses noeuds fils, parents.. enfin le DOM quoi.
On peut facilement passer de la vue HTML, à la vue Strucure ou à la vue Source. Quand on clique sur un élément, des flèches permettent de se repérer dans chaque vue.
Sur du HTML qui n'est pas du XML il n'y a pas d'autres outils qui permettent de faire ce travail de visualisation du DOM à part peut être firebug mais la représentation n'est pas la même. Il est plus facile de debugger son HTML avec Amaya.
Petite astuce, pour ceux qui comme moi aiment avoir des structures propres et claires, pensez à ajouter un commentaire XML en face de chaque fin de div pour préciser quelle div elle ferme en précisant sa classe ou mieux son ID.