Web Worker Tool: XRAY sees inside your page

Here’s one for the coders among us – particularly those of us who design, and code web pages and web apps. XRAY, from the folks at WestCiv (makers of Style Master) is a new in-browser tool for deep examination of the box model in action on any web page.

Released as a browser bookmarklet, XRAY is cross platform and works with any browser supporting the canvas element – currently Firefox on OS X and Windows, Safari on OS X and any WebKit-based browser. I see it as a useful tool for browser render debugging, working alongside critical plugins for web developers such as Chris Pederick’s Web Developer Toolbar and the excellent FireBug. One benefit of XRAY is that as a bookmarklet, it’s a lot more lightweight than a browser add-on, and less prone to memory issues such as some people have with other Firefox add-ons.

Let’s take a look at it in action!

XRAY Step 1Once you click on the bookmarklet XRAY pops up a semitransparent box with some nice, clear instructions about what to do next. From here, XRAY is active, and you can click on any page element to get a detailed and thorough look at what’s going on with that particular element.

Here’s where XRAY comes into its own. Take a look at the next image.

XRAY showing details

XRAY is taking a deep-inside look at the paragraph on the WWD home page. We can see a bunch of interesting things here:

  • how far down from the top and left the parpagraph is
  • how tall and wide it is
  • what XHTML element it is and any associated id or class
  • the tag depth (inheritance) on the page
  • all the CSS associated with the element

This is all incredibly useful information when you’re designing or debugging your XHTML – especially if you’re doing standards-based word (aren’t we all? Hmmm?).

To close the XRAY canvas, you simply click on the X in the top-right corner.

Versions of XRAY for IE and Opera are planned. In the meantime, you’re a little stuck with the browsers listed above (they should do you, really). It looks like a useful and simple to use tool to add to the stack of excellent tools already out there for web page coders.

loading

Comments have been disabled for this post