Pointer enhances Chrome's built-in element inspector with a persistent, intuitive DOM navigation tool that stays active while you work.

Hi Product Hunt,

I'm Mr Violets, maker of Screen Ruler (30K+ users). I'm happy to introduce my latest project; Pointer.

Pointer solves a bunch of common frustrations that web developers face with Chrome's inspect tool:

You don't need to keep re-activating it - stays on until you turn it off.
Navigate the DOM with just arrow keys without focusing the DevTools elements panel.
Cut, copy, paste, duplicate and delete elements visually on the page with standard keyboard shortcuts.
Built-in ruler appears instantly with Alt key for measuring distances between elements.
Event count while hovering elements.
Pass-through mode to interact with the page.
Intuitive hover-to-inspect, click-to-select interaction.

Everything stays in sync with DevTools - select an element with Pointer and it's instantly highlighted in the Elements panel, and vice versa.

Pointer Pro brings even more cool functionality to your cursor:

Inline Attribute Editor - Press "/" to add attributes, classes, and properties to selected elements without switching to the DevTools elements panel.
JavaScript Console - Press ";" to execute JavaScript commands with the selected element as "this" context. Perfect for quick DOM modifications and debugging.
Selector Search - Press "f" to enter find mode and highlight all elements matching a CSS selector in real-time with page CSS selector autocomplete.

@myster_violets A very useful and interesting tool. The feature that " You don't need to keep re-activating it" is where I fell in love with this. This product can make development so much hassle free by running in background, offering so much to the developer at his/her fingertips. Will support this in any way I can.

This is a very interesting tool, congratulations on the release!

Congratulations to the team on launching Pointer! The cursor-driven inspection streamlines DevTools workflows. Does Pointer support custom keyboard shortcuts, and how does it handle dynamic, single-page app elements in real time?

@techacc Thanks for the comment. The extension supports custom shortcuts for activating/disabling the pointer itself however other shortcuts are pretty standard like cut/copy/paste etc.

The extension remains in sync with DevTools so any changes that might happen to the DOM tree in a SPA will be visible to Pointer.

Pointer

Cursor-driven element inspection for DevTools workflow