Tuesday, July 31st, 2007

XRAY: Peer into your web pages

Category: Design, Utility

<p>John Allsopp has developed XRAY, a bookmarklet that launches a tool to visualize the web page that you are on (a little like features in Firebug and Firefox). The look and feel is great, and the margin popups look like the new Safari/Webkit search functionality (mmm orange).

What is XRAY

XRAY is the first in hopefully a suite of free cross browser tools for helping web designers and developers better visualize what their code is doing in a browser. XRAY is designed to help you get beneath the skin of your web page.

XRAY let’s you see the box model for any element on a page in action – where is the top and left of an element, how big is each margin, how big is the padding, how wide and high is the content box?

What platforms and browsers is XRAY available on?

XRAY currently has been tested on Safari 2 and 3 on Mac OS X, Webkit nightly builds, and Mozilla based browsers (Firefox, Camino and so on) on Mac OS X and Windows. At present it won’t work on Internet Explorer (XRAY uses the canvas element, but plans are afoot to adapt it for Internet Explorer), and has not been adapted for Opera. We hope to have versions for Opera shortly, and Internet Explorer on Windows in the not too distant future. XRAY works in Safari 3 on Windows, but clicking a bookmark does not fire any Javascript it contains. To use XRAY on Safari 3 for windows at present, you’ll need to paste the XRAY link into the address field and hit return.

Xray

Related Content:

14 Comments »

Comments feed TrackBack URI

Firebug already does this, albeit with the sizes and element and CSS attributes displayed in the firebug window (which is scrollable so there are no screen real estate issues with an on-page overlay). Firebug does display alignment rules on the page though, and highlights the element.

Comment by Andy — July 31, 2007

Excellent! Even though there are other tools that do something similar, I love the very quick way that it exposes the hierarchical structure. I appreciated the effort.

Comment by Oliver Tse — July 31, 2007

Without live editing of properties, this won’t displace Firebug. A stable version for IE would be very useful, though.

Comment by Dan — July 31, 2007

I think some people are missing the point, i.e. cross-browser :) I don’t think it is meant to replace firebug, but rather a proof of concept that you can achieve this inspection of the page with a bookmarklet across browsers,

I know I have been frustrated with not being able to figure out why IE is adding padding, etc. to page elements, and this would help to isolate the pixel differences.

Thanks John ^^

Comment by Chad Wagner — July 31, 2007

Thanks for the mention guys.

The intention of this is not to displace firebug. FB is great, awesome and mighty, But here is why I think it was worth doing.

Firstly, Firebug works in Mozilla based browsers. This web is a cross browser thingie, so debugging has to take place in many browsers. This is particularly true of page layout – debugging this in FF alone is of limited value – it’s typically other browsers which cause more difficulty than FF/Mozilla. WE should have opera and IE (6+ most likely) covered very shortly.

FB is an extension – it needs to be installed, and updated. The way XRAY works is that the bookmark loads the logic from our server – genuine zero config – so when it’s updated, you don’t have to do a thing and you have the latest version.

XRAY is light weight – it does one thing – helps visualize the page layout. We definitely have other similar tools planned (a lot of this functionality has long been in Style Master), and under development.

thanks for the comments,

john

Comment by John Allsopp — July 31, 2007

It’s a nice use of the JQuery loading bookmarklet code John Resig showed us a while ago.

This will be especially useful when the IE part is working – debugging that is sooo much a pain.

Comment by Dave Probert — July 31, 2007

Estimable…

Comment by andhapp — August 1, 2007

Excellent tool for working and refining pages. CSSViewer was my number one tool, but has now moved down a slot for this one. Well done.

Comment by Matthew — August 1, 2007

XRay is a great idea. It doesn’t work on Safari beta3 for Windows. I suppose that it is a Webkit bug since our PassPack Auto-login Button produces the same identical error with Safari beta3 for Windows.

Comment by Francesco — August 22, 2007

Very cool, not as good as firbug but will definitely aid in debugging ie/safari/opera issues. Nicely done!

Comment by Matthew — August 22, 2007

RE Safari 3 Windows – it does work, but not from the bookmark. Thrre’d a note on th XRAY page about this. You have to paste the javascript: URL into the address bar for pages you want to XRAY.

http://westciv.com/xray/xray_more.html#platforms

Thanks,

john

Comment by John Allsopp — August 22, 2007

Awesome! I love the way it works in Safari, and now it’s IE compatible.
This is my first CSS/DOM analysis tool after firebug.

But this will be my primary analysis tool in IE and Safari (cos nothing else good exists).

Comment by Vijay Santhanam — August 22, 2007

@John.
Thanks for your precisation. I tried and on Safari 3 for Windows XRAY doesn’t work using the work around suggested by you. The problem is that Safari 3 supports bookmarklet as usual in some cases and in other cases no. I am the PassPack developer. Our auto-login system uses a bookmarklet. There are two versions: one for standard auto-login and another supporting 1-click auto-login too. The two bookmarklets are a bit different (the 1 click version has an additional function). The first works well in Safari 3 for Windows, the second produces an error (the same that XRAY produces). I’ve done a lot of testing and nothing works, I think it might be a Safari bug.

Comment by Francesco — August 23, 2007

This product cannot be available too soon.

Comment by Graham Brabham — September 13, 2007

Leave a comment

You must be logged in to post a comment.