Well, Steve over at slayeroffice has updated his Document Tree Chart, after both he and I put together a solution to Molly Holtzshlag’s thoughts on producing a DOM tree from an active document. We’ve gone beyond that stage now, though, I think; Steve’s latest iteration has many cool extra features, like highlighting, colour coding, and transparency (since, unlike mine, he creates it in the window containing the document you’re examining).
And then he finishes up by throwing down the gauntlet to me to leapfrog him again, which is very unfair indeed given that I have to be at work in, like, six hours.
- A better layout
- My major problem with my last attempt was that the layout, while correct (ish) was difficult to comprehend because a full DOM tree for a given HTML page is considerably wider than the browser. To counter this, I’ve flipped the layout through 90 degrees. (You’ll see what I mean when you see it.)
- Element highlighting
- Stolen shamelessly from Steve, when you mouse over an element in the tree, that element is highlighted in grey in both the tree and the source document.
- Element visibility
- When you mouse over an element, it also scrolls the source document so that that element is visible.
- Since the tree is massive on any reasonably sized document, it starts out collapsed. You can expand and collapse branches of the tree to concentrate just on the area you care about.
- Fully visible text nodes
- One advantage with the 90 degree flip of the node list is that we can now display the full text of any text node, and indeed we do so.
It probably only works in Mozilla. If it works in anything else consider it a bonus. Let me know if there are bugs, but, unlike Steve, I do not promise at all to fix them…
Steve: bring it on. ;-)