XRAY – Box Model Introspection

Does John Allsopp ever sleep? I swear, between developing Style Master, speaking at conferences, and general Microformats evangelism among his other pursuits that guy is so packed full of energy he makes me feel like a cardboard cutout of myself.

John and WestCIV’s latest venture is XRAY- a small JS bookmarklet you can use to quickly introspect the box model for any element on a page. Whereas Firebug is the ten-ton-monster of site introspection, XRAY is light and easy to use (and just as handy)- just click the bookmarklet on any given page, and you’re shown the entire CSS inheritance hierarchy for the clicked element, it’s dimensions, etc. Beauty and simplicity in a small bookmarklet.

Right now XRAY is only supported in Safari 2/3 on OS X (with some caveats for Windows Safari), and all Mozilla-variant browsers on OS X and Windows (Firefox, Flock, Camino, etc). Howver, reportedly an IE version is also in the works. Any way you slice it, XRAY is a must-have utility for anyone doing serious browser-based work, and you should install it right now. Seriously. And make sure to give John some props/feedback while you’re at it.

Still reading? What are you waiting for?