I've got to add to my list of must-have developer tools:
XRAY: XRAY is a JavaScript bookmarklet which allows you to "see the box model for any element on any web page". That doesn't sound very sexy, but it is-- when activated, this bookmarklet brings up a modal dialog box that will show you the nested parents for whatever element you click on, and you can even traverse up. Whichever element you click on or is in focus will be outlined. It's fantastic for determining an element's exact height, width, nesting, and CSS inheritance.
Comments (5)
January 15, 2008
14:11PM | #
Then look at MRI, as well. Also good.
January 15, 2008
15:53PM | #
why not just use Firebug?
January 15, 2008
16:37PM | #
@Mark,
Firebug does have a useful HTML/DOM inspector, but I don't find it as useful as XRAY. In Firebug, you have to click down the HTML tag structure until you find the element you want to inspect and highlight, where as in XRAY you can just click directly on what you want. Also, XRAY tells you the exact,final dimensions of the element, whereas Firebug only shows you the ideal dimensions and properties as specified by the CSS.
January 16, 2008
08:04AM | #
I cannot seem to "Drag" the x-ray button to my favorites in IE 7. It states IE 7 is supported. Have you guys gotten that to work for you?
P.S. Your captcha is seems to be dialed up pretty high...
January 16, 2008
09:49AM | #
@Josen:
Ya know, I can't drag the XRAY bookmarklet to my bookmarks toolbar either, although I can do so for regular links. I think that IE7 seems to prohibit scripting bookmarks from being added there. You can add XRAY to your Favorites menu, though-- just right-click on the XRAY link and choose "Add to Favorites...".
I'll shoot an email off to the Westciv folks to let them know that they may want to provide alternative directions for IE7.