Friday, July 31st, 2009
PyramiDOM: Spectrum DOM Analyzer
<p>Andrea Giammarchi has created PyramiDOM a “Spectrum DOM Analyzer”. When I first saw it, and read “Spectrum” I thought I was looking at an old 48k video game, but in fact it is showing you info on the DOM:The generated spectrum will contain every single nodeType 1 present in the document and will show via tooltip info about that node (nodeName, id if present, className if present). Moreover, it highlights somehow that node temporary changing the background (yellow one). The most wicked effect was in jQuery website itself, since it is dark, and since it is linear enough (you scroll and the spectrum is almost there where you scroll).
On the other hand, the most interesting spectrum was in Gmail, where you can spot a proper pyramid of nested divs. Each nodeName will have the same color, but for practical reasons each time this color will be different (random).
You can grab this PyramiDOM link to play.
Related Content:
- DLB
Spectrum Analyzer spectrum data... - spectrum analyzer
A spectrum analyzer is a laboratory instrument that displays signal amplitude (strength) as a function of... - Xerces
Xerces (the name comes from the Xerces blue butterfly) is a set of parsers compatible with Extensible Markup Language... - DOM
Unknown or unassigned file... - Difference between XML infoset and a DOM node
3.6 rating from 32 votes
Syntax error in your example link for Firefox 3.0.12 Linux, works on the original linked webreflection blog post though.
Interesting… not sure what the applications of this are, but it looks cool nonetheless.
Cool, it helps to visualize the semantic-to-noise ratio of a page (considering that div & span are the noise).
Quick Update: PyramiDOM source code and a new bookmark link available (Dion please change above link as well)