Bug: React dev tools inspect element of hover does not work on shadow elements

[Biki-das]

Using react while making a shadow DOM and then using react devtools inspect element feature does not work as expected video and codesandbox below

sandboxLink
https://stackblitz.com/edit/react-zqp67t?file=src/App.js

while attaching shadowroot

Mozilla.Firefox.2023-02-19.21-52-16.mp4

without attaching root

Mozilla.Firefox.2023-02-19.21-53-37.mp4

[Biki-das]

@lunaruan could you guide me towards how to build the dev tools locally and test it with the changes after making? i have some idea to work on this problem

cc @mondaychen

[mondaychen]

To begin with, please follow https://github.com/facebook/react/blob/main/packages/react-devtools/CONTRIBUTING.md
Let me know if you have questions

[Biki-das]

@mondaychen still kinda confused say i want to test the devtools changes locally within a react app how should i do so?

[mondaychen]

@Biki-das if it's not extension specific, you can start the inline devtools server in react-devtools-inline, then start the shell in react-devtools-shell. Then you can test your changes with the shell UI. The guide:
https://github.com/facebook/react/blob/main/packages/react-devtools/CONTRIBUTING.md#option-1-fastest-using-the-test-shell

[Biki-das]

@mondaychen it's extension specific

[mondaychen]

Then you go to react-devtools-extensions and run yarn:build:chrome to build it.

Can you read through the guide I sent you fist? Everything I'm talking about now is on it.

[Biki-das]

@mondaychen getting this errors while trying to run the extension anything i might be doing wrong?