Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DevTools Bug]: When inspecting with DevTools, it fails to select correct react component when there are multiple react-dom instances in the application #24539

Closed
danielkutt opened this issue May 11, 2022 · 0 comments · Fixed by #24665
Closed

[DevTools Bug]: When inspecting with DevTools, it fails to select correct react component when there are multiple react-dom instances in the application #24539

danielkutt opened this issue May 11, 2022 · 0 comments · Fixed by #24665
Assignees
@mondaychen
Labels
Component: Developer Tools Type: Bug

Comments

@danielkutt
Copy link

danielkutt commented May 11, 2022 •
edited
Loading

Website or app

https://codesandbox.io/s/jtiw8m

Repro steps

When using devtools in the linked codesandbox, I am not able to select react components that are rendered by the micro-fe using the inspect tool.

Steps to reproduce:

  1. Go to https://jtiw8m.csb.app/
  2. Open React DevTools and click on Inspect icon with the "Select an element on the page to inspect it" tooltip
  3. Inspect the component with the pink background and text "micro-fe example heading"
  4. Devtools selects App as the component (or if the component type filter is disabled, it selects the div where the micro-fe is mounted)

Ideally it would actually select either the MicroFeRoot component (or the corresponding html node if the filter is disabled).

I was able to get it working by doing the following change in the react-devtools-backend/src/backend/agent.js

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response
@danielkutt danielkutt added Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug labels May 11, 2022
@mondaychen mondaychen self-assigned this May 11, 2022
@FlacoJones FlacoJones mentioned this issue May 12, 2022
Closed
@mondaychen mondaychen removed the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label May 12, 2022
@mondaychen mondaychen mentioned this issue Jun 2, 2022
Merged
@sebmarkbage sebmarkbage mentioned this issue Jul 28, 2024
Merged
sebmarkbage added a commit that referenced this issue Jul 30, 2024
@sebmarkbage
[DevTools] Implement "best renderer" by taking the inner most matched…
f963c80 
… node (#30494)

Stacked on #30491.

When going from DOM Node to select a component or highlight a component
we find the nearest mounted ancestor. However, when multiple renderers
are nested there can be multiple ancestors. The original fix #24665 did
this by taking the inner renderer if it was an exact match but if it
wasn't it just took the first renderer.

Instead, we can track the inner most node we've found so far. Then get
the ID from that node (which will be fast since it's now a perfect
match). This is a better match.

However, the main reason I'm doing this is because the old mechanism
leaked the `Fiber` type outside the `RendererInterface` which is
supposed to abstract all of that. With the new algorithm this doesn't
leak.

I've tested this with a new build against the repro in the old issue
#24539 and it seems to work.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mondaychen mondaychen

Labels
Component: Developer Tools Type: Bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[DevTools] find best renderer when inspecting mondaychen/react
2 participants
@mondaychen @danielkutt