Think Inside the Box Model With XRAY
XRAY is a su-weet little bookmarklet for quick and dirty CSS info. It’s similar to some of the simple features of our beloved Firebug, only much faster, and works in just about every modern browser.
Once you install the XRAY bookmarklet, give it a click and you’ll see a semi-transparent overlay. At that point, click anywhere on the page and you’ll get info on the box model of that element. XRAY puts a bright border around the box and highlights the width, height, and coordinates. In the overlay, you get lots more info: borders, margins, padding, id, classes, and its location within the box hierarchy.
Perhaps equally as exciting as what XRAY does is what it represents. As a bookmarklet, it’s worthy of emulation. XRAY’s developers credit a microformats bookmarklet with the inspiration.
All the XRAY bookmarklet does is include its JavaScript file, which does all the tough stuff. This also means that it’s auto-updating. Bugs don’t get stuck on users computers, waiting for them to upgrade. I’m looking forward to seeing more bookmarklets like this.
See also:
