XRAY and MRI

November 1st, 2007 23:33

Roger Johansson brings two excellent bookmarklets to my attention.

XRAY lets you inspect the properties of any element on the page by opening a floating palette that displays the element type, id, class, position, size, border, margin, and padding of any element you click on. It also displays the element’s inheritance hierarchy.

MRI opens a similar floating window and has an input field where you can enter a CSS selector. When you click the MRI button, MRI highlights the elements on the page that are matched by the selector. MRI also works the other way around. Click anywhere on the page and it will suggest CSS selectors for the element you clicked on.

Very useful when you don’t have Firebug installed.

Update: Here are a couple of screenshots of it in action, first XRAY:

xray

and now MRI:

MRI

Leave a Reply