A blog entry{.external} by my friend Gareth{.external} prompted me to blog about this useful bookmarklet.

So you have the web developer toolbar, have solved all issues in Firefox, only to find IE doesn’t do the same.

What if you could click a bookmarked site, load a piece of javascript, then you simply click on any element on a page to display the element, id, class, hierarchy, positioning, border, margin and padding values in a pretty interface? Well sonny, with X-Ray (from http://westciv.com{.external}) you can!

X-Ray bookmarklet with h1 selected

The best bit is that it even works in IE, so you can troubleshoot any box model or double margin problems easily! It’s an excellent idea, and if I hadn’t already voted for jQuery, I would have voted for it in the innovation category of the .net magazine awards{.external}. Maybe you could vote in my stead!