

Show HN: See the number of DOM elements on a web page - breck
http://domtree.breckyunits.com/?v=2

======
harlanlewis
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.

~~~
breck
Neat idea. Just added #ids.

------
feniv
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?

~~~
breck
> how do I pan and zoom?

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

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

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

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

~~~
breck
Thnx. How about this: <http://domtree.breckyunits.com/>

~~~
melvinram
Nice.

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

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

~~~
breck
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
Doh, I think HN broke breck's server aka "The HN effect" ;-)

~~~
breck
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.

------
josephagoss
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!

~~~
breck
Just added pan. Looking into zoom next.

~~~
josephagoss
Thanks! Looks really good!

------
minikomi
Wow.. what a mess hahaha <http://rakuten.co.jp> .. This is fun.

