Mouseover DOM Inspector v2.0.2 Help

Overview

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.

Browsers currently supported are Firefox, Mozilla, Netscape 8, Opera 7.5+ and MSIE6+ on all of their respective Operating Systems.

To begin using the Mouseover DOM Inpsector, simply add the following link to your bookmarks by right clicking and selecting "Add to Favorites" or "Bookmark this Link" or whatever the nomanclature of your browser of choice.

Bookmark this link for MODIv2

Should you encounter problems with this software, please contact me and let me know the URL you were on, the browser and operating system, if you are using a preference file along with the url to that preference file and as detailed a description as you can with what you were doing when the problem occured. Suggestions for improvement and functionality enhancements are also welcome.

If you are looking for the older version of MODI (v1.5) you'll find it here.

Keyboard Commands

1: Snaps the Data Window back to the top-left corner of the browser window, taking the vertical scroll amount into account. Also places the favelet back into Freeze Mode.
A: Clone the currently highlighted object and its children. Use the "S" key to append it to another object.
B: Cycle hightlighting preference. Gray backgrounds, red outlines and none. MSIE does not support the outline property, so this will toggle backgrounds in that browser.
C: Apply a random background color to the element. Hitting "C" again will restore the original color.
D: Toggle the visibility of the Data Window, displaying the element type and id/class if found in the "title" attribute of the element.
E: Toggle object width from auto (fluid) to its original width.
F: 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.
G: Toggle the visibility of all the data lists.
H: Hide the currently selected element.
J: Show all elements hidden with the "H" command.
K: Remove all element labels from the page.
L: Label the element with its tag name. Clicking the label removes it from the document.
O: Outline the element with a red border. MSIE6 does not support this style property.
P: Pause the favelet. This will disable the favelet without turning it off.
R: Remove the current element from the DOM.
S: Append a cloned object to the currently highlighted object. Use the "A" key to clone an object.
T: Begining at the HTML element, manually step through the DOM, including non-display elements like META and TITLE
U: Toggle "Always Transparent" mode. When on, the data window will remain at 60% transparency (or a value specified by you in your external preference file.) Not available in Opera.
V: View and edit the HTML source of the current element. You may use this to view the HTML of an element on sites serving their content as application/xhtml+xml, but you may not modify it.
W: Select the parent of the current element. This will allow you to step up through the DOM to the HTML element.
ESC: Exit the Favelet/Cancel Edit Mode
ENTER: Apply changes in Edit Mode

Additional Functionality

Freeze Mode: The new default mode for the favelet, Freeze Mode, places the data window at 10,10 (the upper left corner of the screen) and prevents it from following the mouse cursor. This mode can be toggled with the "F" key to cause the data window to follow the cursor like v1.x
Parent Node Highlights: When the favelet is in Freeze mode ("F" key) or Pause mode ("P" key), you can mouse over the list of elements that make up the Parent Structure of the current element to highlight those elements.
Child Node Highlights: Works exactly the same way as with Parent Node Highlights. Only element nodes are highlighted, but all node types are displayed. If the element is a text node, its node value will be displayed as the title attribute of the list item.
No Object Notification: Since the favelet does not highlight the BODY or HTML elements when in mouse-over mode, it is possible that no element is highlighted. In these cases, the data window will become transparent. Not available in Opera.
Window Drag: When paused ("P") or in frozen ("F"), the Data Window can be moved by clicking and dragging from the title bar containing the element name.
Pause for Input Focus: In order to allow for interaction with inputs and textareas on the document, the favelet will go into Pause Mode when one of these element types recieve focus. To unpause, simply click away from the input element, or hit the "P" key. Thanks to Simon for the suggestion.
Highlight Indicator: Cycling through the highlight modes with the "B" key will change the Highlight Indicator in the top right corner of the data window to reflect the current highlight mode. A solid gray square indicates gray background highlights, a square with a red border indicates red outlines and the absence of an icon indicates no highlights.
Edit Mode: In edit mode ("V" key), in addition to the "Cancel" and "Apply" links, the "ESC" key will cancel, and the "ENTER" key will apply your changes. If the site is served as application/xhtml+xml, both keys will close the edit window.
Collapsible Lists: The lists of data displayed in the the data window can be collapsed and expanded by clicking their headings. For example, to collapse the "Attributes" list, click the "Attributes" heading. All of the lists can be opened and closed at once with the "G" key.
Keep In View: The data window will adjust its position to stay within the view port when you scroll vertically. This does not apply when the Data Window is longer than the available vertical space in the browser, such as when an object with a long list of child nodes is highlighted.
Bugs?: Find a bug? Please let me know about it.

Optional External Preference File

If the default settings for the application don't suit you, you can specify an external preference file for the favelet to use. This file is defined in the prefFile variable in the favelet link. For example, when you first bookmark the link it looks like this:

javascript:prefFile=''; void(z=document.body.appendChild(document.createElement('script'))); void(z.language='javascript'); void(z.type='text/javascript'); void(z.src='http://slayeroffice.com/tools/modi/v2.0/modi_v2.0.js'); void(z.id='modi');

If you would like to use a preference file, change it to look like this:

javascript:prefFile='http://www.YOURSERVER.com/YOUR_PREFERENCE_FILE.js'; void(z=document.body.appendChild(document.createElement('script'))); void(z.language='javascript'); void(z.type='text/javascript'); void(z.src='http://slayeroffice.com/tools/modi/v2.0/modi_v2.0.js'); void(z.id='modi');

An example preference file that you can copy, modify and save to your server can be found here:

http://slayeroffice.com/tools/modi/v2.0/prefs.js

Things that can be specified in the preference file are:

Default color of the background highlights.
Default Color and width of the outline hightlights.
Starting highlight mode - background color, outline or none.
If the Attribute, Dimensions, Parent Structure or Children lists should display by default.
If the favelet starts in Freeze Mode or not.
Start the favelet with the data window visible or not.
Start-up transparency mode and transparency value.
Default background color for child node highlights.
Any other global variables you feel like over-riding.