This bookmarklet is perfect for anybody who spends any time working  on web site layouts.  XRAY is used to see the box model for any element on a web page.  It will dim the area not selected, and give you statistics such as the CSS id or class assigned to it, the interface hierarchy, and the CSS code assigned to that section.

With that said, it is the perfect browser companion for people who pull up a web site and wonder, “how did they do that?” because it tells you everything right there on the web page.  It works with Internet 6 and up, and every Webkit and Mozilla-based browser out there today (that includes Safari, Firefox, Camino and more).

To use it, all you have to do is drag the bookmarklet to your bookmarks toolbar.  When you are on a site you want to see more about, click the bookmarklet and the semi-transparent XRAY window will pop up with all the information you could ever want. Go give the XRAY bookmarklet for webmasters a test drive yourself (then save it for your own CSS snooping) over at westciv.com/xray/.

Like This Article? Listen to it and more like it on podcast #199 of the Web Hosting Show!