A simple JavaScript DOM inspector that highlights elements on mouseover and can perform actions on click (by default, finds the element's full or optimised CSS path.)
Branch: master
Clone or download
Joss Crowcroft
Latest commit 13b3e21 Mar 28, 2011
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.markdown 0.1.2, rewrote CSS path-building code; now much cooler Mar 28, 2011
inspector.js 0.1.2, rewrote CSS path-building code; now much cooler Mar 28, 2011

README.markdown

Simple JavaScript DOM Inspector v0.1.2

Highlights hovered elements with a 2px red outline, and then logs the element's full CSS selector path when clicked. It could also display the selected element's XPath, or do pretty much anything with it in the callback function.

The CSS selector path-building code tries to be as specific as possible, but can also build a more optimised CSS selector, stopping at the first parent with a specific ID.

Optionally, it also checks to see whether any part of the CSS path matches multiple elements, or if any element has no ID or CSS class, and adds specific "nth-child" pseudo-selectors where needed for full CSS paths.

  • Example optimised CSS path: #content .left p img
  • Example full CSS path: html body #main #content .left p img
  • Example full CSS path with nth-child: html body #main #content .left p:nth-child(3) img:nth-child(1)

Hit escape key to cancel the inspector.

NB: XPath code removed as it didn't really work very well, need to write from scratch.

Started putting in IE support, but won't work in IE just yet, check back next week for that (so far, tested in FF4, Chrome, Safari, Opera 11.)

No warranty; probably won't break the internet. Improvements and linkbacks welcome!

Joss