Monday, November 14th, 2005

Mouseover DOM Inspector

Category: Utility

<p>The Mouseover DOM Inspector, or MODI for short, is a favelet (also known as a bookmarklet) that allows you to view and manipulate the DOM of a web page simply by mousing around the document.

After you select the bookmarklet, the page is in debug mode, allowing you to gather data in the document.

There are a number of commands that allow you to do things like:

  • Clone the currently highlighted object and its children.
  • Toggle object width from auto (fluid) to its original width.
  • Toggle Freeze Mode. The favelet will remain active, but the Data Window will not follow the cursor. This is the default startup mode for the favelet.
  • Hide the currently selected element.
  • View and edit the HTML source of the current element.

Mouseover DOM Inspector

Related Content:

Posted by Dion Almaer at 9:07 am
6 Comments

+++--
3.3 rating from 6 votes

6 Comments »

Comments feed

Do you have a link to this? thanks.

Comment by charlie — November 14, 2005

Googling a little you can find…

http://slayeroffice.com/?c=/content/tools/modi.html

Comment by Sargue — November 14, 2005

Here you go: http://slayeroffice.com/tools/modi/v2.0/modi_help.html

Comment by Bob Woodard — November 14, 2005

Hah, sorry about that.

The link is in there now (and on the comments. Thanks guys!)

Dion

Comment by Dion Almaer — November 14, 2005

Cool stuff! Although you can copy paste the results from source, i think i would be nice to have a function to post he changed html to your own server (where a php script or so is waiting). In this way you can quickly show your collegues what changes you propose to a site, or highlight a part of a site, etc.

Comment by Bert Stevens — November 14, 2005

This tool is really nice!

@Bert: Put your html page on a webdav drive. Browse it in the Browser. Use MODI to change it. Press Ctrl+S (“Which is Option on the Mac”) to save it at the exact same WebDAV drive, which you mapped for convennience to your File-Explorer.

WebDAV comes nowadays with even the cheapest Webhosting packages that even do not include PHP or MySQL. That the pet-project setup.

The enterprise version: Use an Apache2 with Subversion and access it through WebDAV and once you deleted important content, the Admin can revert the revision. The user do not even have to know what subversion is nor what CMS stands for.

Comment by philippj — November 15, 2005

Leave a comment

You must be logged in to post a comment.

Thursday, May 12th, 2005

Mouseover DOM Inspector

Category: JavaScript, Utility

<p>Our old friend at Agylen links to a tool that we sometimes need to remind people about, the Mouseover DOM inspector.

Mouseover DOM Inspector v2.0.2

“The Mouseover DOM Inspector, or MODI for short, is a favelet (also known as a bookmarklet) that allows you to view and manipulate the DOM of a web page simply by mousing around the document.”

The IE folks also want to point to DOM inspectors in that world:

Related Content:

Posted by Dion Almaer at 1:15 am
Comment here

+++--
3 rating from 5 votes

Comments Here »

Comments feed

Leave a comment

You must be logged in to post a comment.