React: React DevTool isn't working on both Chrome and Firefox

Created on 16 Jul 2020  Â·  4Comments  Â·  Source: facebook/react

I have added on the extension on my windows 10pro to Firefox 78.0.2 (32-bit) browser. However, it didn't worked even on the Facebook page itself. I tried uninstalling the extension clear cache and reinstall it, but it didn't help either.

Then I added on my Chrome 84.0.4147.89 (Official Build) (64-bit) browser and allow access to URLs - but nah, it didn't helped, too.

Last, I deleted the extension from both browsers and installed from terminal through # NPM
npm install -g react-devtools command - it didn't work too

I am a newbie to coding, all I did was a research on the web but couldn't find a solution to this yet. I would appreciate any help on this perhaps Ive missed smth important

Developer Tools Needs More Information

Most helpful comment

There's a known Chromium bug (#1085215) that causes extensions (including React DevTools) to sometimes not appear in the developer tools console (see #19002). The fix for this is in Chrome and will be released in v84. (The latest stable Chrome version is 83.0.4103.116, but you can verify the fix using Chrome Canary if you'd like.)

I have not heard of any reports of problems with the Firefox extension though, nor can I reproduce the behavior you describe by installing in Firefox myself.

@itsbek Is there any error in your Firefox console? Can you attach a video showing what you're trying and how it's failing?

All 4 comments

I've got the same problem.
React DevTool info says that the tool is running >>This page is using the production build of React. ✅
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.

But "Components" and "Profiler" are not presented. I tried to reinstall it, restart, everything. Sometimes it works for few minutes and then the tools are gone again.

Chrome Version 83.0.4103.116 (Official Build) (64-bit)
Win 10
React DevTools v 4.8.2 (7/15/2020)

There's a known Chromium bug (#1085215) that causes extensions (including React DevTools) to sometimes not appear in the developer tools console (see #19002). The fix for this is in Chrome and will be released in v84. (The latest stable Chrome version is 83.0.4103.116, but you can verify the fix using Chrome Canary if you'd like.)

I have not heard of any reports of problems with the Firefox extension though, nor can I reproduce the behavior you describe by installing in Firefox myself.

@itsbek Is there any error in your Firefox console? Can you attach a video showing what you're trying and how it's failing?

Last, I deleted the extension from both browsers and installed from terminal through # NPM
npm install -g react-devtools command - it didn't work too

I'm not sure I see how this relates to the browser extensions. What do you mean by "didn't work"? I assume the DevTools opened, but didn't connect to the React app running in your browser- which would be expected unless you also added a <script> tag to your app.

The issue was resolved!!! Thanks everyone!

I don't know how does node affects the extension but i tried to uninstall the node.js 12.18.2LTS > removed the React devTools extension > clear files from temp and %temp% on the command line, and reinstall the same version (12.18.2LTS) and added back the React DevTool extension which worked out this time for both browsers.

Was this page helpful?
0 / 5 - 0 ratings