Tools zum Visualisieren eines HTML-Dokumentbaums (DOM-Baum)

Question

Ich möchte die Dokumentstruktur einer HTML-Website visualisieren.

Was würde ich ist haben möchte etwas wie folgt aus:

Gibt es bekannte Werkzeuge, die dies tun, und wo können die Ergebnisse als Bitmap-Datei gespeichert werden?

Answer 1

Ich benutze LaTeX, um die DOM-Darstellung zu erstellen.

ist hier ein minimales Arbeitsbeispiel:

\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} 

Welche gibt:

Answer 2

Ich habe gerade versucht, zwei Bibliotheken zu verwenden.

Zuerst konvertiert ich die dom zu JSON mit Jsonml

var jsonData = JsonML.fromHTMLText(htmlData); 

Dann Json Editor verwendet oder Json Viewer es

anzeigen Proben in jsFiddle

1. Using Json Editor
2. Using Json Viewer
Visualisierung

Ich hoffe, dies kann Ihnen helfen.