MODI – The Lightweight DOM Inspector Bookmarklet

There are a ton of HTML DOM inspectors out there. I mean, a lot of them. They’re helpful as hell when you’re in a pinch and you can’t figure out what the DOM is doing. I’ve used all kinds, from FireFox add on’s to IE gadgets, to custom ones… But for the last couple of years I seem to have stuck with one that just seems to work for all of my needs. Its the Slayer Office Mouse Over DOM Inspector – MODI. Its simple, clean and very lightweight.

How It Works

Here’s what you do… go to this page: MODI Help Page

Right click on the “Bookmark this link for MODIv2”. This screen shot is in FireFox. Internet Explorer will warn you that its not safe to book mark these type of items, but just click Ok because this one is safe.

 

Then go visit a web site where you want to view the DOM. For example: www.codeplex.com. Once at the site, click your book marks and click the MODI book mark as shown below:

You will now see the Mouse Over Dom Inspector action. Move your mouse around and you’ll see the parent elements, the classes each element inherits, etc. It will look something like this: (click for larger image)

The text that is circled in red is the element that we are inspecting. The details of that element are present in the MODI box (blue box). Move your mouse around the screen and you will see that MODI gives you the information about the DOM element that your mouse is currently over.

If MODI is over the element you’re interested in inspecting, just click and drag the top of it and you can put it anywhere on the screen.

 

Conclusion

The best part about this DOM inspector is that I don’t have to install it on anything on my machine. If I’m on a clients machine or on a server – using the browser – and I need to inspect the DOM, I can hit the MODI web page and then run the bookmark and I’m off into the DOM.

Simple, yet effective.