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?

2 Responses to XRAY – Box Model Introspection

  1. John says:

    Scott,very nice words. Funnily enough, I also run the web directions conferences (where Adobe has been and remains a great supporter), and have a 20 month old. So now you know my secret – I don’t sleep ;-)Thanks agan for the kind words, and IE and Opera will be added very very soon.john

  2. Absolutely, John- and thanks for XRAY! I’m finding it damn near indispensable already. Look forward to seeing you at a Web Directions con soon. :D