« Geek Trivia Night | Main | XRAY update - thanks for the feedback »

July 30, 2007

Introducing XRAY for your browser

I wrote a little while ago how much the curent pace of developments with browsers and devices makes me feel the kind of excitement I felt when CSS was young ;-)

In the spirit of this excitement, I've been working on a new version of Style Master, and started revamping the XRAY features first introduced in version 4. And then it dawned on me that with a bit of work, they could work as "favelets" or "bookmarklets" (is there nothing Tantek didn't invent ;-) ) in (theoretically) any browser. So, I did a bit of work, realised it was doable, then spent a bit more work getting to grips with the canvas element (yeah yeah, not a standard - yet), in particular how it differs in Safari 2 from everywhere else, and some polishing.

What the heck is XRAY anyway? Well, a picture tells a thousand words and all that - but in a nutshell, it is a way to inspect the layout of any element on any web page - both visually and in terms of actual values.

Want to give it a try right now? Provided you are using Safari, the Webkit nightlies, or Mozilla (the platform shouldn't matter), just click this link then wait a moment - you'll receive instructions on screen. Basically, just click anywhere on the page, and see what happens.

Turn XRAY off by closing the window which opens.

What to install it permanently so you can use it with any page? Just drag the link to your bookmarks bar (a bug in Safari 3 on Windows means that won't work yet - you'll have to manually paste the link url into the address field for a page should you want to XRAY in Safari on Windows)

More detail available at the westciv site.

Love to hear people's thoughts - and please send suggestions, bug reports, questions, comments and queries.

Love the fact that the web still excites me, after so many years ;-)

July 30, 2007 | Permalink


TrackBack URL for this entry:

Listed below are links to weblogs that reference Introducing XRAY for your browser:


wow. that's great.
i had something like that for firefox, now i can stay with safari

Posted by: lutz | Jul 30, 2007 10:12:51 PM

Slick! A lot of overlap with FireBug's insepctor, but an elegant interface (and no extension installation required is a plus). One quibble: The order of the inheritance stack seems backwards to me.

Posted by: . | Jul 30, 2007 11:54:53 PM

Thanks very much.

The comparison with Firebug has been made a couple of times by people. Apart from (IMHO) loking alot sexier ;-) I think that there's quite a bit different.

As you say, there's no need to install an extension - whenever I update XRAY, it will automatically be updated, because the bookmark just loads the logc from our server.
It also works in more than just mozilla/firefox - the aim is all contemporary browsers. One of the challenges of web development as we all know is when something just isn't "working" in a particular browser - so being abl to compare and contrast the layout in different browsers using the same tool should help with that.

We also show padding and margin as well as position, something which, afaik, Firebug doesn't do.

But of course Firebug does a bazillion cool things XRAY doesn't do ;-)

thanks again


Posted by: John Allsopp | Jul 31, 2007 8:01:45 AM

Hi John, pretty cool :)

Couple of small things (FF
- breaks mousewheel scrolling
- doesn't work on framed pages (getting a JS error 'document.getElementsByTagName("body")[0] has no properties')

BTW, Firebug shows margin & padding, etc. in the 'Layout' tab ;)

Posted by: Lindsay Evans | Jul 31, 2007 10:12:48 AM

thanks Lindsay,

I'll put in some better error handling for frames and such.

I know that FB does it there, but it's not on the page itself, where is matters most ;-)


Posted by: John Allsopp | Jul 31, 2007 12:12:06 PM

Hi John, I like what I see!

No hassles so far on OSX: Safari 2.0.4, Firefox

XRAY displays the info on the page. I think it would be a much better tool for learning CSS than Firebug.

Firebug is a full-on debugging tool -- I would be hesitant giving it to someone just starting out with CSS. About 75% of those bazillion other things it does might be overkill for the beginner.

Maybe even 80% :-)

Posted by: gavin jacobi | Jul 31, 2007 9:19:57 PM

Heads up: Click this link, link doesn't work from rss reader (Google Reader) obv I guess since it's JavaScript but you might want to state it anyway ;)

Posted by: David Joseph | Aug 1, 2007 7:23:24 AM

Oh, very nice! :)

Posted by: Lea de Groot | Aug 1, 2007 7:34:29 AM