Narzędzia do wizualizacji drzewa dokumentu HTML (drzewa DOM)

Question

Chcę wizualizować strukturę dokumentu witryny HTML.

Co chciałbym mieć to coś takiego:

Czy są jakieś znane narzędzia, które to zrobić i gdzie wyniki mogą być zapisane w postaci pliku bitmapy?

Answer 1

Używam LaTeX do tworzenia reprezentacji DOM.

Oto minimalne przykład roboczych:

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

Co daje:

Answer 2

Właśnie próbowałem użyć dwóch bibliotek.

Najpierw konwertowane do formatu JSON DOM korzystając Jsonml

var jsonData = JsonML.fromHTMLText(htmlData); 

następnie wykorzystywane Json Editor lub Json Viewer do wizualizacji it

Zobacz próbek jsFiddle

1. Using Json Editor
2. Using Json Viewer

Mam nadzieję, że to może ci pomóc.