CODEWITHSUNDEEP
reactjsgoogle-chrome-extension
Jernej K
Jernej K

Reputation: 1684

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.

Upvotes: 9

Views: 10416

Answers (5)

Pavel Shkleinik
Pavel Shkleinik

Reputation: 6347

The steps that helped me:

  1. Remove React Developer Tools extension
  2. Install React Developer Tools extension
  3. Open a brand new tab containing react app
  4. Open Dev Tools
  5. React Developer Tools should be available

Upvotes: 2

rob
rob

Reputation: 8400

The steps that worked for me

  1. Open chrome extensions
  2. Disable the react dev tools extension
  3. Enable the react dev tools extension
  4. Enable Developer mode
  5. 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.

Upvotes: 0

user1902408
user1902408

Reputation:

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).

Upvotes: 3

Computer's Guy
Computer's Guy

Reputation: 5353

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.

Upvotes: 2

BobTheBuilder
BobTheBuilder

Reputation: 19284

This happened to me as well. Looks like a bug in Chromium, but a temp solution is:

  1. Change the chrome DevTools theme, only once it is required.
  2. Now open devtools, you find the extension tab in DevTools.
  3. 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

Upvotes: 3

Related Questions