ReactJS chrome extension installed but not showing up

Question

Anyone know why the ReactJS Chrome browser extension isn't showing for mein dev tools? It's installed, at one point it was working.

I'm using chrome Version 39.0.2171.65 (64-bit) on Mac OS X v 10.7.5

I read the reviews on this extension, some people said need to expose React as a global. I'm using React NPM with: var React = require('react');

you should set window.React, please see stackoverflow.com/questions/26347489/… — nilgun
– nilgun, Commented Nov 20, 2014 at 8:31

AndrewBrntt · Accepted Answer · 2020-06-25 01:21:27Z

136

I was having this issue just now and to solve it I had to open dev tools -> click the gear icon on the top right of the dev tools window then in the far right column at the very bottom is a button that should say "restore defaults and reload" click that. I was not able to figure out the exact reason it was not appearing but it at least gets react debugging working again.

answered Jun 25, 2020 at 1:21

AndrewBrntt

1,7361 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Katrpilar Over a year ago

This is the only thing that worked for me after trying everything else. Thanks.

aviya.developer Over a year ago

When all fails, 5 years after the question was posted, there comes a stack-overflow hero. I'd give 5 upvotes if possible.

SublimeYe Over a year ago

Has anyone gone down the rabbit hole to identify that single setting that messed up the extension?

igorsantos07 Over a year ago

Not a clue as for the cause - this happened to me on a mostly fresh Vivaldi install.

HolyMoly Over a year ago

tried other things - but this worked for me....thank you!!!!

Giant Elk · Accepted Answer · 2015-04-07 02:38:16Z

90

In chrome://extensions/ select Allow access to file URLs for the React Developer Tools extension, using v0.13.1 of React. I didn't need to add anything to my source code.

answered Apr 7, 2015 at 2:38

Giant Elk

5,7019 gold badges47 silver badges57 bronze badges

3 Comments

Shailesh Over a year ago

Check for ⚛️ Components tab and ⚛️ Profiler tab in newer version. Facebook have updated React DevTools to have Components and Profiler Tabs it serves same purpose as React tab in older versions.

Shekhar Sahu Over a year ago

@Shailesh you should write this as an answer.

Gilad Gur Over a year ago

To reach the Allow access to file URLs selector menu, click on the details button in the bottom left corner of your extension card.

krukid · Accepted Answer · 2022-04-20 12:05:20Z

51

Just happened to me on Chrome 100. Reloading the page, reopening DevTools panel, toggling the extension on/off, restarting the browser and closing other app windows didn't help.

What fixed it for me was: CMD+SHIFT+P and selecting "Reload DevTools" from the command panel. For non-Macs it will probably be CTRL+SHIFT+P.

answered Apr 20, 2022 at 12:05

krukid

4,5555 gold badges34 silver badges31 bronze badges

4 Comments

JavaQuest Over a year ago

helped me in chrome Version 103.0 as well. Thanks!

GibboK Over a year ago

worked on chrome version Version 114.0.5735.248 . thanks for sharing!

Gilad Gur Over a year ago

This is the only solution that worked for our team. The above solutions, although got more upvotes, but did not work.

Erik Blessman Over a year ago

Simply closing and reopening dev tools did it for me

Dhruva Sagar · Accepted Answer · 2014-11-20 17:54:48Z

14

React extension shows up only when you have react loaded into the browser in global scope. Like @nlgndg mentions it should be present as window.React

answered Nov 20, 2014 at 17:54

Dhruva Sagar

7,3351 gold badge29 silver badges35 bronze badges

3 Comments

Giant Elk Over a year ago

Copy Paste from other answer: The main requirement is that window.React is set. If you're using a module system (as I am using Browserify): typeof window !== "undefined" && (window.React = React) This should usually be done in your main source file.

Dhruva Sagar Over a year ago

I have given him due credit for the answer, just thought it's better served as an answer for everyone to see than a comment.

Siddharth Sharma Over a year ago

Thanks , just typed window.React = {} in the console and the React tab became visible in the chrome dev tools besides the audits tab .

Voy · Accepted Answer · 2020-05-30 08:10:12Z

6

Restarting Chrome after installation seems to help, apart from the other answers.

I couldn't find any info on that step in the Chrome Web Store or when clicking on the plugin, so just leaving it here.

answered May 30, 2020 at 8:10

Voy

6,4643 gold badges56 silver badges67 bronze badges

Comments

César Rodriguez · Accepted Answer · 2024-01-03 04:21:52Z

4

TWO SIMPLE STEPS

1. in devTools (inspect of page) press ALT + R

it will fix the problem if did not

2. Allow access to file URLs to React Developer Tools

STEPS :

a. Extensions

b. React Developer Tools (details btn)

c. Check Allow access to file URLs

https://github.com/facebook/react/blob/main/packages/react-devtools/README.md#the-react-tab-shows-no-components

edited Jan 3, 2024 at 4:21

César Rodriguez

4769 silver badges21 bronze badges

answered Apr 27, 2023 at 12:32

Sky

5996 silver badges5 bronze badges

Comments

Henrriky · Accepted Answer · 2023-10-10 02:11:27Z

2

I was facing the same problem, I tried uninstalling the extension, activating and deactivating the URL file issue and it didn't work. What worked for me was: Go to Applications -> Service Workers and uncheck all checkboxes

answered Oct 10, 2023 at 2:11

Henrriky

211 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

pmax · Accepted Answer · 2021-12-24 22:49:52Z

1

I was using http://localhost:3000, I went to extensions and reset the settings like toggle them and it started showing components and profiler tabs for me.. I dont know thats a solution, but it worked for me.. PS Also updated chrome version too.

answered Dec 24, 2021 at 22:49

pmax

261 bronze badge

Comments

Shubham Dhingra · Accepted Answer · 2022-11-15 16:26:17Z

1

As others have suggested, I tried re-installing the extension, the solution with CMD+SHIFT+P, clicking gear icon then "restore default and load", still it did not work.

I don't know if this is what fixed it but I changed the dock side from right to bottom and reloaded the page and I could see the "⚛️ Components" tab after that.

answered Nov 15, 2022 at 16:26

Shubham Dhingra

2944 silver badges14 bronze badges

Comments

lloydbanks · Accepted Answer · 2022-11-24 16:24:40Z

0

In case none of the answers helped, try to open the extension's settings and check the option Site access. The value should be on all sites. In case of on click or on specific sites the tabs won't showing up

answered Nov 24, 2022 at 16:24

lloydbanks

711 silver badge9 bronze badges

Comments

Alexander Emelyanov · Accepted Answer · 2023-02-16 15:38:23Z

0

Recently, ReactJS stopped working in my browser. The problem was that one of my extensions got updated and was interfering with the other one. If you have this problem, try disabling all extensions except the one you need.

answered Feb 16, 2023 at 15:38

Alexander Emelyanov

791 silver badge5 bronze badges

Comments

Karine Hiulumian · Accepted Answer · 2024-04-28 13:46:27Z

0

Also had this problem, for me it was because I had turned on in the Dev tools settings for service workers 'update on reload' option

answered Apr 28, 2024 at 13:46

Karine Hiulumian

1111 silver badge7 bronze badges

Comments

ramal · Accepted Answer · 2024-05-01 10:07:29Z

0

go to settings -> preference -> in the bottom "Restore defaults and restart". its works for me. #react

answered May 1, 2024 at 10:07

ramal

314 bronze badges

Comments

9uifranco · Accepted Answer · 2024-10-26 14:47:39Z

0

For me I just had to relaunch to update Chrome. Click on the 3 dots on the top right of your browser and you'll see a button for this action. It this doesn't work try to manully update to the latest stable version.

answered Oct 26, 2024 at 14:47

9uifranco

5605 silver badges15 bronze badges

Comments

Geco · Accepted Answer · 2019-06-25 10:43:15Z

-2

i had the same problem . and it was solved just like @Siddharth Sharma said . open the console and create a react object just like bellow .

window.react = {};

answered Jun 25, 2019 at 10:43

Geco

1974 silver badges18 bronze badges

Collectives™ on Stack Overflow

ReactJS chrome extension installed but not showing up

15 Answers 15

5 Comments

3 Comments

4 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

5 Comments

3 Comments

4 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related