Outils pour visualiser une arborescence de documents HTML (arborescence DOM)

Question

Je souhaite visualiser la structure d'un document HTML.

Ce que je voudrais avoir est quelque chose comme ceci:

Y a-t-il des outils connus qui font et où les résultats peuvent être enregistrés dans un fichier bitmap?

Answer 1

Voici un exemple de travail minimal:

\documentclass{scrreprt} 
\usepackage{tikz-qtree} 
\begin{document} 

    \Tree[.table 
     [.thead 
      [.tr 
      [.th [.\textit{Vorname} ] ] 
      [.th [.\textit{Nachname} ] ] 
      ] 
     ]    
     [.tbody 
      [.tr 
      [.td [.\textit{Donald} ] ] 
      [.td [.\textit{Duck} ] ] 
      ] 
     ] 
     ] 

\end{document} 

Ce qui donne:

Answer 2

Je viens d'essayer d'utiliser deux bibliothèques.

D'abord, je converti le Royaume à JSON en utilisant Jsonml

var jsonData = JsonML.fromHTMLText(htmlData); 

ensuite utilisé Json Editor ou Json Viewer pour le visualiser

échantillons Voir toutes les jsFiddle

1. Using Json Editor
2. Using Json Viewer

Espérons que cela puisse vous aider. J'utilise LaTeX pour créer la représentation DOM.