Nice! Surprised how much I like seeing a simple tree view for HTML elements. I can imagine using this on front-end dev job applicants, replacing my current view source + build quick mental model of how they approach structure. Don't see using it for evaluating performance, as it doesn't indicate the expensive paints etc (and nor should it) - problematic page weight would reveal itself in more direct diagnostics (pagespeed insight, etc). A view like this might be interesting in a larger tool, but no need to expand this into one.
It would be nice if #id values were printed, as their prevalence and values can also tell you a lot about how a page is constructed. Printing classes would get excessive quickly.
It's interesting to see the high-level structure of the DOM tree too. Functionally similar sites like Hacker News and Reddit has drastically different structures (HN at 328 elements while reddit's at a crazy 1375!)
One question though (I may be overlooking something obvious here...) but how do I pan and zoom?
Does this execute domready as a headless browser or is this just parsing the markup directly into a DOM tree?
I'm sure there will be a few sites that this won't be reflected accurately just because a lot of the content might not be there until loading asynchronously with Javascript unfortunately.
Ok, so what's the point? I'm not trying to be a naysayer. I'm honestly asking.
Is this trying to get us to look at different DOM structures to make us aware of the differences? Are there some things that are clearly good/bad that we should be aware of? Is this just to raise awareness of . . . something? I have no idea.
This seems like a solution in search of a problem. I strongly suspect that there is some hidden intent that I just don't grok. Because I'm an optimist.
(I realized after posting that I was snarky. I'm not removing the snark 'cause I should own up to it but this is an admission that I was probably a jerk. Sorry.)
You're exactly right. There's not much of a point.
I'm working on a new HTML template language and wanted to "see" what existing web pages look like to better inform our design. It's been very helpful for that.
Then I wanted to see if web pages have gotten more complicated over the years, so I added the Wayback feature. In terms of # of DOM elements and levels, it appears the answer is no, which surprised me.
Anyway, I thought it was interesting, even if it doesn't clearly solve a common problem. Would be curious to hear if people find it useful for other reasons.
It would be nice if #id values were printed, as their prevalence and values can also tell you a lot about how a page is constructed. Printing classes would get excessive quickly.