Tools to visualize an HTML document tree (DOM tree) [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 8 years ago.

Improve this 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.