Cool Application for Visualizing Hierarchy of DOM objects

[RobMac]

Guys - I have nothing to do with this website, I am just interested in graph theory and visualization.

Anyway, I have asked a number of times about some way to visualize the hierarchy of DOM objects in a website and finally found something like it. This site uses graph theory visualization to draw the DOM structure of a website, kinda cool. I attached a picture of the autoitscript.com website DOM structure.

http://www.aharef.info/static/htmlgraph/

Unfortunately, it does not seem like you can see or click on the underlying objects and reference info via this interface but the source code is posted and I am sure someone on this site could improve on this to make it useful to programmers (linking it to DebugBar for instance). Anyway, I am at my limit programming wise but for some maybe this is useful. Just passing it along.

Edited December 19, 2007 by RobMac

[ame1011]

That looks pretty cool and I could see how that would help newer users visualize the DOM tree better.

For a very neat, functional tool check out dale's DOM inspector.

[zfisherdrums]

Hello RobMac,

I recently stumbled upon a graphing DSL called DOT. You probably know of it already. I found a link to it somewhere on this page.

Anyway, your post has me interested in writing a script that would parse a web page into a file that would then be consumed by DOT to generate the model. Thanks for the inspiration!

Zach...