This is as days pass by, by Stuart Langridge

And this is Show DOM tree bookmarklet, written , and concerning Uncategorized

Over at SlayerOffice, there's a new Document Tree Chart Favelet, based around a request from Eric Meyer to have something that can show a nicely laid out DOM tree for a given page. Sadly, though, I don't like it very much, so I've written a different one. It's fairly nice; displays a tree (or a reasonable approximation) as Eric requested, and you can hover over the red text node boxes to see what's in that text node (you can see the first four characters in the chart itself, to give you a clue). Tested in Mozilla, and doesn't seem to work in IE for reasons that are beyond me. It doesn't work in Safari either, I'm told (which is Safari's fault for getting the CSS wrong). Let me know what you think:

Show DOM tree

There were some useful resources I tapped for this:

Comments

Steve

It most likely doesn't work in IE because of it's limitation of ~502 characters for a favelet.


Very nicely done - though I'm going to have to one-up you with a new version of mine. :)

sil

Ha haa! Let the war begin! :)

Could be favelet length, I admit; I didn't check all that hard because (a) I don't care too much about IE, and (b) pretty much anyone who even knows what this is, let alone finds it useful, will have a Mozilla-based browser around somewhere. :)

Molly E. Holzschlag

Nice enhancements, too.  Point of clarification: Eric and I were discussing the issue in a private class, and no one requested anything - we were  talking about the lack of such a tool within a collaborative, closed environment. Also, the original doctree diagram is my work, not Eric's, not to begrudge Eric of course, but it's nice to check facts instead of making assumptions.


I really appreciate the ongoing work - thanks to both of you :)

Molly E. Holzschlag

Nice enhancements, too.  Point of clarification: Eric and I were discussing the issue in a private class, and no one requested anything - we were  talking about the lack of such a tool within a collaborative, closed environment. Also, the original doctree diagram is my work, not Eric's, not to begrudge Eric of course, but it's nice to check facts instead of making assumptions.


I really appreciate the ongoing work - thanks to both of you :)

sil

Molly:

I didn't quite realise that that was the situation. Still, if you do have a need for such a tool (and assuming that the environment you discuss is Mozilla-based) then you have two to choose from. Plus, it was interesting making CSS do all the hard work :)

Wim

Nice idea! And something I really need.

But I seem to have bad luck. It doesn’t work with me. When I chose Show DOM Tree it creates a new window and fills it with a tree… But it never finishes. And according to the scroll bar the page is at least 10 times as wide as necesary.

I downloaded the page to my pc and removed most of its content, but the problem remains.
I am using Windows ME and Mozilla 1.7 on an 2800+ AMD processor with 512mb memory.

This website belongs to Stuart Langridge. Contact details are available. Don't eat yellow snow. Valid HTML5, at least in theory, except for the bits that aren't because I'm that futuristic that I'm ahead of the spec, oh yes. HTML5 help from Bruce Lawson, among others. Fonts from the superb FontSquirrel. End.