feat: update overlay on pointerdown so inspector works in DevTools Device Mode#1
Open
MrDoomBringer wants to merge 1 commit into
Open
Conversation
…bile emulation The hover/overlay tracking effect previously only listened to `mousemove`, plus a rAF loop reading `document.elementFromPoint(mouseX, mouseY)`. In environments that don't fire `mousemove` — most notably Chrome DevTools device-mode (touch emulation) — `mouseX/mouseY` stay at their initial (0, 0) values, so `elementFromPoint` keeps returning the top-left element (usually <body> / <html>), which the inspector treats as "hide overlay". End result: tapping an element in mobile emulation never shows the bounding box, even though the click-to-source XHR still fires correctly. Adding a `pointerdown` listener (capture phase, so the click-blocker in the other effect doesn't stop propagation before we run) updates the overlay before the click handler opens the editor. After the first pointer down, `mouseX/Y` are correct, so the rAF loop continues working naturally. No-op on desktop: `inspectTarget()` already dedups against the current target, so the pointerdown call after a hover-driven update returns immediately without re-rendering. Pointer events are universal across mouse and touch, so this also supports real touch devices, not just the DevTools emulator.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Chrome DevTools device mode doesn't fire mousemove. Makes seeing which element you've selected kind of a pain.
No-op on desktop:
inspectTarget()already dedups against the current target, so the pointerdown call after a hover-driven update returns immediately without re-rendering. Pointer events are universal across mouse and touch, so this also supports real touch devices, not just the DevTools emulator.Have been working with this change patched for a few days now and found it helpful for working on mobile sites.
Thanks for your work on this @ivanstnsk :) React 19's _debugSource change breaking other component-click packages brought me here.