Comments on: XRAY: Peer into your web pages

By: Graham Brabham

Graham Brabham — Thu, 13 Sep 2007 08:53:35 +0000

This product cannot be available too soon.

By: Francesco

Francesco — Thu, 23 Aug 2007 10:45:58 +0000

@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.

By: Vijay Santhanam

Vijay Santhanam — Thu, 23 Aug 2007 02:19:53 +0000

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).

By: John Allsopp

John Allsopp — Wed, 22 Aug 2007 23:09:10 +0000

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

By: Matthew

Matthew — Wed, 22 Aug 2007 18:24:00 +0000

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

By: Francesco

Francesco — Wed, 22 Aug 2007 11:26:45 +0000

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.

By: Matthew

Matthew — Wed, 01 Aug 2007 20:56:30 +0000

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.

By: andhapp

andhapp — Wed, 01 Aug 2007 14:05:21 +0000

Estimable…

By: Dave Probert

Dave Probert — Wed, 01 Aug 2007 04:55:28 +0000

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.

By: John Allsopp

John Allsopp — Tue, 31 Jul 2007 22:49:32 +0000

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

By: Chad Wagner

Chad Wagner — Tue, 31 Jul 2007 22:30:04 +0000

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 ^^

By: Dan

Dan — Tue, 31 Jul 2007 21:22:11 +0000

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

By: Oliver Tse

Oliver Tse — Tue, 31 Jul 2007 16:51:22 +0000

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.

By: Andy

Andy — Tue, 31 Jul 2007 15:43:48 +0000

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.