Looking for the drawings? They're over here, and my drawing blog is this way.
Mouseover DOM Inspector
- Current Version: 1.5
- Last Revision: 11.29.04
- Requires: MSIE 6, Mozilla 1.5+, Opera 7.5+, Firefox
- Language: Javascript
Version 2.x can be found here.
This favelet allows you to view the properties of any HTML element on a page simply by mousing over the element. The element will be given a gray background, and a DIV element that trails the mouse cursor will contain the element type along with all of the specified attributes of the element. Hit the "esc" key to turn the favelet off.
Right click on the following link and select "Add to Favorites" or "Bookmark this Link", depending on your browser.Update (11.29.04 - v1.5)
- Modification by Aaron Barker: Hitting the "up" arrow will freeze the info box over the current element. Mousing over the node hierarchy will pop a seperate info box containing data relevant to the parent element. Hit the "esc" key to return the application to its default behavior.
- The info box will now flip on its axis to prevent itself from being obscured by the edges of the browser window.
Update (11.05.04 - v1.4)
- Updated the code to allow the application to work on sites serving their content as application/xhtml+xml
Update (10.25.04 - v1.3)
- Aaron Barker of zelph.com modified the favelet to show the node hierarchy of the element you're hovering over, as well as the top, left, width and height of the object.
- Toggling highlights and killing the favelet will (should) no longer leave elements highlighted. When either of these events occur the element will (should) revert to its original state.
- Pressing the [v] key while over an element will pop a textarea at the mouse coordinates containing the innerHTML of that element. You are free to modify the HTML in the textarea. A link below the textarea, upon being clicked, will apply the new HTML to that element. Hitting the [esc] key will close the textarea. Hitting [esc] with the textarea closed will kill the favelet as it always has.
Update (04.03.04 - v1.1): You can now toggle the background highlights by hitting the "b" key.