React Dev Tools not showing tabs in Edge dev tools

[limitedmage]

Steps to reproduce:

1. Install React Dev Tools extension from https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil
2. Open a page that uses React in development mode
3. Open dev tools with F12

Expected:
⚛️ Components and ⚛️ Profiler tabs show in the dev tools

Actual:
Tabs are not visible and there seems to be no way to add them

Screenshot from Chrome:

Screenshot from Edge:

[hxlnt]

Thanks for the report, @limitedmage. This bug has been fixed in Edge version 100 and later, which is in our Edge insider builds and should be rolling out to all users soon. (You can navigate to edge://version to see what version you're using currently.)

In the meantime, a workaround would be to disable the Focus Mode experiment in DevTools settings, then close and reopen DevTools. This should restore the React extension tab on pages with React. Once the browser updates to Edge 100, you can manually reenable the Focus Mode experiment in DevTools and use extensions normally.

Thank you for trying this early build of Focus Mode! We've made a number of great improvements in Edge 100, so I hope you'll continue using it!

[limitedmage]

@hxlnt Thank you! Happy to know the fix will be rolling out soon.

[hxlnt]

Edge 100 has been released, so closing this issue. Extension support has landed in DevTools for Focus Mode.

[tonyhallett]

Not showing when inspecting a WebView2 control. Should react dev tools be showing ?

[tonyhallett]

Took advice from https://github.com/facebook/react/tree/main/packages/react-devtools

If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment, try the standalone version instead. Chrome apps are currently not inspectable.

standalone version

If using create-react-app and you want profiling then npx react-scripts build --profile

[wehnertb]

I'm in build 105.x and I still do not see these tab in dev tools. I've tried toggling focus mode on and off, no dice, It's been like this for quite some time. If I need to use react dev tools, I need to load Chrome and debug from there, because it just doesn't work in Edge any longer.

[wehnertb]

I've even installed from Edge's "store" for extensions - same thing.

[3dfoster]

I'm not seeing it in the new focus mode either...

[heathsias]

Yup, still missing here as well. When switching between focus mode on and off, they show up upon clicking the 'Restart devtools' button that shows up, but upon closing and reopening dev tools, they are gone. Sadly, I'll need to use Chrome again until this is fixed

[wehnertb]

As of version 107.0.1418.52 - still no luck. I toggled Focus Mode ON (I never turned it on) - restarted dev tools and I do not see nor can I add react developer tools. Turned it off and restarted same thing.

[wehnertb]

I just upgraded to version 107.0.1418.56 and it is showing again.

[Ashbri4]

I don't want anything Microsoft

…

On Wed, Nov 23, 2022, 11:52 AM Bill ***@***.***> wrote: I just upgraded to version 107.0.1418.56 and it is showing again. — Reply to this email directly, view it on GitHub <#31 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2ZI6OHZTJXDO6ILTDY5IQLWJZDWJANCNFSM5R4Q4VPA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[antonlabunets]

Same issue on 109

[mswiecicki]

And 111

EDIT: Turning Focus mode on and then off seems to have worked