[DevTools] Add React Element pane to browser Elements panel

[everettbu]

Mirror of facebook/react#35240
Original author: eps1lon

---

Closes react/react#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
   [DevTools] Clear element inspection if host element not owned by any renderer is selected react/react#35504
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.
   [DevTools] Show fallback in inspected element pane when no element is selected react/react#35503
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 work on 1 and 2 in follow-ups that should be handled before the next release. For 3, I want to investigate why the initial load always uses the default filter and if we can fix that.

Other follow-ups before release:

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.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds a dedicated "React Element" pane to the browser's Elements panel, enabling developers to inspect React elements and open their source code directly from the DOM inspector.

• New InspectedElementPane component integrates with browser DevTools Elements panel as a sidebar pane
• Extended InspectedElement component with optional actionButtons prop for custom toolbar actions
• Added createElementsInspectPanel() function following the same pattern as existing Editor pane implementation
• Portal container plumbing added through DevTools component hierarchy

Issues Found:

• The selectedSource prop is passed to InspectedElementPane but never used
• Pre-existing memory leak bug extended: cleanup function doesn't check for sidebar panes (editorPortalContainer, inspectedElementPortalContainer) when unmounting root

Confidence Score: 3/5

• This PR has a couple of logic issues that should be addressed but doesn't introduce critical runtime errors
• Score reflects two legitimate issues: an unused prop that suggests incomplete implementation, and extension of a pre-existing memory leak bug. However, the implementation follows established patterns and the core functionality appears sound.
• Pay attention to InspectedElementPane.js (unused prop) and index.js (memory leak in cleanup)

Important Files Changed

File Analysis

Filename	Score	Overview
packages/react-devtools-extensions/src/main/index.js	3/5	Added createElementsInspectPanel() and portal container support; extends pre-existing memory leak bug in cleanup logic
packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js	3/5	New pane component for Elements panel; receives selectedSource prop but doesn't use it
packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js	5/5	Added optional actionButtons prop to support custom action buttons in the toolbar

[greptile-apps]

_{3 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (3)

packages/react-devtools-extensions/src/main/index.js
[P1] The condition should include editorPortalContainer and inspectedElementPortalContainer to prevent memory leak. If a user opens only the sidebar panes (Editor or Inspected Element) without opening the main panels, the root won't be unmounted on cleanup. This extends a pre-existing bug with editorPortalContainer.

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-extensions/src/main/index.js
Line: 486:490

Comment:
[P1] The condition should include `editorPortalContainer` and `inspectedElementPortalContainer` to prevent memory leak. If a user opens only the sidebar panes (Editor or Inspected Element) without opening the main panels, the root won't be unmounted on cleanup. This extends a pre-existing bug with `editorPortalContainer`.

How can I resolve this? If you propose a fix, please make it concise.

---

packages/react-devtools-extensions/src/main/index.js
[P2] Should nullify editorPortalContainer and inspectedElementPortalContainer for consistency with other cleanup operations. This extends a pre-existing issue with editorPortalContainer.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-extensions/src/main/index.js
Line: 498:500

Comment:
[P2] Should nullify `editorPortalContainer` and `inspectedElementPortalContainer` for consistency with other cleanup operations. This extends a pre-existing issue with `editorPortalContainer`.

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

---

packages/react-devtools-extensions/src/main/index.js
[P1] Same memory leak issue as in performFullCleanup: should include editorPortalContainer and inspectedElementPortalContainer in the condition to ensure root is unmounted when sidebar panes are used.

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-extensions/src/main/index.js
Line: 451:455

Comment:
[P1] Same memory leak issue as in `performFullCleanup`: should include `editorPortalContainer` and `inspectedElementPortalContainer` in the condition to ensure root is unmounted when sidebar panes are used.

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

selectedSource prop is passed from DevTools.js (line 387) but not defined in Props type or used in the component

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
Line: 21:23

Comment:
`selectedSource` prop is passed from `DevTools.js` (line 387) but not defined in Props type or used in the component

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

Additional Comments (1)

packages/react-devtools-extensions/src/main/index.js
condition should include editorPortalContainer and inspectedElementPortalContainer to prevent memory leak if user only opens sidebar panes without opening main panels (extends pre-existing bug with editorPortalContainer)

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-extensions/src/main/index.js
Line: 487:491

Comment:
condition should include `editorPortalContainer` and `inspectedElementPortalContainer` to prevent memory leak if user only opens sidebar panes without opening main panels (extends pre-existing bug with `editorPortalContainer`)

How can I resolve this? If you propose a fix, please make it concise.

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.