For the past few years I have been using the Firefox Web Developer toolbar to help me pin down problems and bugs when developing websites. It has been and continues to be a great tool. However, recently one of my buddies turned me on to a new utility that works in Safari and Firefox and offers some additional functionality. It’s called XRay and is a CSS / HTML structure discovery tool.

Basically to install XRay all you have to do is drag the XRay link from http://www.westciv.com/xray/ to your bookmark bar. From there you can open it up on any website and quickly find out information about the page structure by clicking on various elements of the site. It will tell you div id names, widths, heights, margins, paddings, parent elements, inheritance information, etc. All of this information is nicely highlighted in a lightweight inspector.

While XRay doesn’t overtake the Firefox Developer Toolbar, it does offer some functionality that compliments it nicely. And considering it’s free and super easy to install I strongly recommend checking it out.