'React extension is missing in Dev tools
I am trying to get my react extension working for local development, but "Components" and "Profiler" is missing in the Chrome developer tools. This only happens for local development, any other production code is displaying the two tabs in the developer tools as expected. I was wondering if this can be resolved somehow? I triple checked if the tabs are hidden on that occasion, and they are not. As said, this only happens for development version. When I click on the extension, I get the following message:
This page is using the development build of React. 🚧
Note that the development build is not suitable for production.
Make sure to use the production build before deployment.
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
Based on this information I should have the tabs displayed.
When I go to a production app and click on the React extension, I can see the following displayed:
This page is using the production build of React. ✅
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
And I also see those two tabs without a problem.
Any idea why this would happen? I searched for a solution, but did not encounter one. The only thing I found was someone mentioning you need to set the environment variable REACT_APP_ENV. I tried to set this value in the .env file where I defined REACT_APP_ENV='dev' as well as REACT_APP_ENV='development'. It did not resolve the issue, even with application and browser restart.
Solution 1:[1]
This happened to me as well. Looks like a bug in Chromium, but a temp solution is:
- Change the chrome DevTools theme, only once it is required.
- Now open devtools, you find the extension tab in DevTools.
- You can again change the theme whatever you want to keep and this will fix your problem.
Check this out: https://github.com/facebook/react/issues/19002#issuecomment-637462179
Solution 2:[2]
Was having the same issue, the Components and Profiler tabs weren't showing up, so I tried changing the theme as suggested by BobTheBuilder, that didn't work, so tried setting the debug levels to Default + Verbose (in addition to the others) in the console and they finally showed up.
Solution 3:[3]
The steps that helped me:
- Remove
React Developer Toolsextension - Install
React Developer Toolsextension - Open a brand new tab containing react app
- Open Dev Tools
React Developer Toolsshould be available
Solution 4:[4]
I had the same issue where Components and Profiler tabs were not showing. What worked for me was to open up the DevTools settings and to click the 'Restore defaults and reload' button (under the 'Sync' heading).
Solution 5:[5]
The steps that worked for me
- Open chrome extensions
- Disable the react dev tools extension
- Enable the react dev tools extension
- Enable Developer mode
- Refresh target page
Where steps 1 and 2 are the little slide control at the bottom right of the extension in the extension manager. Step 4 is the slider in the top right above all the extensions in the manager.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | BobTheBuilder |
| Solution 2 | |
| Solution 3 | |
| Solution 4 | tomhughes |
| Solution 5 |