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.