Show HN: See the number of DOM elements on a web page | Hacker News Reader

Show HN: See the number of DOM elements on a web page

domtree.breckyunits.com

47 pointsbreck20 comments

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.

Neat idea. Just added #ids.

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?

> how do I pan and zoom?

Oh, good idea! I'll add that to the todo list.

Pan + Zoom added. It's slightly wonky, I think I need to adjust the math a little.

It wasn't clear to me at first but the URL at the top is editable.

Thanks for the feedback. Other people also said this. Just made the input focus on page load. Does that help?

Didn't help me. It needs to visually stand out a bit. Here's a suggestion: http://www.webdesigncompany.net/files/hn/snap.png

Thnx. How about this: http://domtree.breckyunits.com/

Nice.

I think the biggest problem is that it doesn't look like an input form.

---

Okay, I was mocking up an example but saw that you implemented exactly that on a refresh. Looks much better now.

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.

Doh, I think HN broke breck's server aka "The HN effect" ;-)

Doh! Right before I went to bed I checked top and saw load at 40%. Should have seen that coming. Fixed and added Pingdom alert.

This could be a useful tool, are you planning to add zoom and pan ability, some of the elements are rendered off the page and I can't scroll down.

Cheers!

Just added pan. Looking into zoom next.

Thanks! Looks really good!

Wow.. what a mess hahaha http://rakuten.co.jp .. This is fun.

Reply on news.ycombinator.com