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

http://domtree.breckyunits.com/?v=2

by breck • 13 years ago

47 20 13 years ago

domtree.breckyunits.com

feniv• 13 years ago

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?

breck8• 13 years ago

> how do I pan and zoom?

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

breck8• 13 years ago

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

SquareWheel2• 13 years ago

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

breck8• 13 years ago

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

melvinram2• 13 years ago

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

SquareWheel2• 13 years ago

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.

harlanlewis• 13 years ago

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.

breck8• 13 years ago

Neat idea. Just added #ids.

josephagoss2• 13 years ago

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!

breck8• 13 years ago

Just added pan. Looking into zoom next.

josephagoss2• 13 years ago

Thanks! Looks really good!

roskilli• 13 years ago

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.

minikomi• 13 years ago

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

drewcoo• 13 years ago

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.)

breck8• 13 years ago

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.

rasmusbe• 13 years ago

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

breck8• 13 years ago

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.

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

Related Stories