This small JavaScript utility allows you to interactively select and track elements on a webpage. It highlights elements under the cursor, stores their unique CSS selectors along with their type (text, image, video), and enables you to export tht collected data with a single keypress.
- Live Element Highlighting - Red outline on hover.
- Click to Capture - Saves a unique CSS selector of clicked elements.
- Smart Type Detection - Classifies elements as
text,image, orvideo. - LocalStorage Persistence - Keeps collected data during the session.
- Export with Alt Key - Press
Altto download all collected selectors asselectors.txt.
- On mouse hover, the current element is highlighted.
- When you click an element:
- Its unique selector is generated.
- Its content type is detected.
- The pair is saved to
localStorage.
- When the
Altkey is pressed, the stored data is downloaded as a plain text file.
div#content > p:nth-of-type(3)|text
- Include the script in your browser's console or inject it into a webpage:
(function() { /*...entire code...*/ })();- Hover over elements to preview.
- Click to save.
- Press
Altto export saved selectors.
- Web scraping and automation.
- Visual testing and element targeting.
- UX research and DOM analysis.
- Only works in-browser and on a per-session basis.
- Requires manual script injection if not part of a packaged extension or app.