Tuesday, July 31st, 2007
XRAY: Peer into your web pages
<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.
Related Content:
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.
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.
Without live editing of properties, this won’t displace Firebug. A stable version for IE would be very useful, though.
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 ^^
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
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.
Estimable…
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.
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.
Very cool, not as good as firbug but will definitely aid in debugging ie/safari/opera issues. Nicely done!
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
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).
@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.
This product cannot be available too soon.