xray is beautiful

webdev

Thu Aug 02 14:03:00 +0000 2007

With the proliferation of DOM-based inspectors these days, it’s more helpful than ever to dissect a webpage and determine how the code is structured and how the element is styled. I already use several great tools that allow you to do this: Safari 3, CSSEdit (also a great CSS Editor), and the FireFox extensions Web Developer and Firebug.

To this list of great tools I’m now adding XRAY, a JavaScript bookmarklet, that provides similar functionality. XRAY provides a hierarchal view of the element you’ve selected, the way the element is styled, and helpful visual indicators of the sizing of the element on the page. XRAY is also helpful because I don’t feel tied to Safari or FireFox (and can finally see this information in Camino), and it shows a great example of what JavaScript can do.

blog comments powered by Disqus