Tools to visualize an HTML document tree (DOM tree)

Question

I want to visualize the document structure of a HTML website.

What I would like to have is something like this:

Are there any known tools that do this and where the results can be saved as a bitmap file?

Answer 1

I use LaTeX to create the DOM representation.

Here is a minimal working example:

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

Which gives:

Answer 2

I've just tried using two libraries.

First I converted the dom to JSON using Jsonml

var jsonData = JsonML.fromHTMLText(htmlData);

Then used Json Editor or Json Viewer for visualizing it

View Samples in jsFiddle

1. Using Json Editor
2. Using Json Viewer

Hope this may help you.