Skip to content

Conversation

@eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Nov 27, 2025

Closes #32574

Adds a dedicated pane for inspecting the React Element that rendered the inspected DOM element.
The main motivation is having an affordance to open the source where the DOM element is rendered.

CleanShot.2025-11-28.at.00.25.16.mp4

The new pane has three UX quirks:

  1. selecting a DOM element with no matching React element does not change the inspected React Element
    I feel like this should trigger de-selection instead
  2. There's no fallback
    So far no fallback was good enough for the Components and Suspense tab because you couldn't escape React Elements in those tabs. In the browsers Elements panel it's much easier to do so a fallback is warranted. Probably fine to add the fallback in every context.
  3. If you're filtering DOM elements (default), you might be confused ho clicking a DOM element does not inspect the React element but a parent. That's especially confusing when you click different DOM elements with the same parent and the inspected element doesn't change.
    I don't have a solution for that yet. Maybe that's fine in the end and it's something you get used to. The main problem right now is that initial load ignores the users setting and hides host Elements by default. Fixing that particular bug might help this issue the most.

I'll file 1 and 2 as immediate follow-ups.

Other follow-ups:

  1. We should be updating the inspected element when the filter changes while in the React Element pane. Right now you have to click back and forth to inspect the element according to the new filter.

@meta-cla meta-cla bot added the CLA Signed label Nov 27, 2025
@eps1lon eps1lon force-pushed the sebbie/11-28-_devtools_add_react_element_pane_to_browser_elements_panel branch from 29c965a to c63fec5 Compare November 27, 2025 23:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[React 19] Need Bring Back _debugSource or Provide an Equivalent for Better Developer Experience

1 participant