GeekFindr: XRAY, peeping on the box model
Thanks to Scott for pointing this one out to me. XRAY is a really nice tool that very quickly can show you the box model for various elements on a site. It works as a bookmarklet, right now it’s Safari and Firefox (or other Mozilla based browsers) only, Mac and Windows, though. It doesn’t work for IE and Opera, although they are working on it.
Once you activate the bookmarklet it floats an information pane above the page you’re viewing. Then as you click on areas of the page, it greys out the background except for the smallest enclosing box that you clicked on and shows you its dimensions and positioning. In the information pane it gives you a bunch of info about the element (it’s id, class, inheritance hierarchy) as well as specifics on it’s box model setup (positioning, margins and padding).
This is stuff I often need to find out, so it’s really convenient to have. Prior to this, I used the incredible Web Developer Firefox extension - in particular it’s “View Style Information” (or command-shift-y). This got you a good bit more information, but when you’re only looking for the box model it is a lot less convenient poring over potentially cascading style sheet parts. Pulling out what you are looking for was sometimes tricky and definitely less obvious than XRAY.
One thing, though, that I hope XRAY takes from Web Developer’s playbook is the outlining of the box as you mouse around the site. When you have “View Style Information” active in Web Developer as you mouse around it outlines the box you are currently over - so it’s easy to make sure you are going to get the information about the element you want. At times with nested elements this can be tricky. That is pretty much the only thing I’d like to see added to XRAY.
At any rate, if you do much html/css work, this is definitely worth your time to check out. (and web developer, too, if you aren’t already using it).
