« sneak peak | Main | off for a short break »

October 22, 2007

Introducing MRI

Continuing with the medical diagnostic equipment analogies, I'm happy to announce the first release of MRI. For anyone who has used XRAY MRI should be familiar. It provides a heads-up display, which allows you to experiment with selectors.

Here it is in action

mri in action

All you need to do is enter a selector in the text field, and click the MRI button. MRI then highlights all the elements on the page that this selector selects (even showing you the padding and margin, like XRAY).

That's the first thing it can do for you. The second trick up its sleeve is suggesting selectors for an element. Click any element, and it suggests possible selectors for that element - type, class, id, descendent, child at this stage. Please offer some other suggestions for what it might suggest.

Right now it doesn't play nice with XRAY - but that will soon be fixed.

MRI works fine in IE 6 + (dunno about older), Mozilla, Firefox, Safari 2 and 3 (not sure about 1.x). Yes, my bad that Opera is still not supported - do hope to have that addressed soon.

Plus, we have some more things in the pipeline along these lines as well.

Meanwhile, enjoy MRI!

October 22, 2007 | Permalink


TrackBack URL for this entry:

Listed below are links to weblogs that reference Introducing MRI:


Hey John,

Just wanted to say thanks for these tools. I tend to use Web Developer Toolbar for most things (old habits die hard), but I really like what you've done with these. However, they are incredibly useful for me for reasons that you may not have considered.

At work, I am not allowed to use anything other than the 'supported installed on corporate build machines browser' ... and that would be IE. Sure, I have all the other browsers on my computer for testing my own work, locally, but that's all they are allowed for - if I use Firefox, Opera, whatever on a site that is not either one in development on our own servers or on one of our live servers, I could get wrists slapped. So Xray and MRI are great - they let me analyse sites out there in the wild without getting in to trouble.

Also, it has an advantage in that when other people on the team have issues, I can install these on their pooters too, without any security concerns.

They do a darn fine job and look good to boot :-)

Question though: is there a limit to what you can do in a favelet re character length now? It used to be something like 255 chars, as I recall (I put some together a few years back for accessify). I haven't checkeded but I doubt that your scripts are under 255 chars somehow!

Posted by: Ian Lloyd | Oct 22, 2007 9:18:26 PM

Thanks Ian,

just a quick reply for now - yeah, talking with a lot of dev folks, I got the impression that installing was a nightmare - even firefox extensions. So Bookmarklets are ideal for that

IE has 255 char limit - but doesn't stop you remotely loading JS from a server!

So, we can keep you up to date with zero config - just by changing the files on our server!


Posted by: John Allsopp | Oct 23, 2007 9:53:31 AM

Nice work!

One issue I encountered - MRI seems to have some trouble with elements with multiple classes (at least in Firefox on my Mac). Despite that I can see myself using it frequently, Thanks!

Posted by: Ollie | Oct 25, 2007 10:05:13 AM

Hi John

We briefly met at Web Directions South this year, and I have attended your Microformats presentation in Canberra for the Web Standards Group, really inspiring stuff.

I have to admit I am fairly new to the whole web standards movement and web industry but it is an area that I am keen to learn more about.

Up until now I had never even seen a bookmarklet, but MRI is a fantastic tool for learning how CSS is applied to different pages. Great work!


Posted by: Kenji Walter | Jan 6, 2008 5:07:18 PM