nextwebgen.com

The Next Generation Web Now

PyramiDOM: Spectrum DOM Analyzer

Filed under: Uncategorized — Dion Almaer at 7:38 am on Friday, July 31, 2009

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.

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blogmarks
  • del.icio.us
  • De.lirio.us
  • digg
  • NewsVine
  • YahooMyWeb

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>