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 http://stackoverflow.com/questions/26347489/react-dev-tools-not-loading-in-chrome-browser — nilgun, Nov 20 '14 at 08:31

score 79 · Accepted Answer · answered Apr 07 '15 at 02:38

79

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 07 '15 at 02:38

Giant Elk

5,375
9
43
56

8

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. – Shailesh Sep 06 '20 at 09:45
1

@Shailesh you should write this as an answer. – Shekhar Sahu Jan 13 '22 at 05:15

score 77 · Answer 2 · answered Jun 25 '20 at 01:21

77

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 '20 at 01:21

AndrewBrntt

1,152
11
21

6

This is the only thing that worked for me after trying everything else. Thanks. – Katrpilar Jul 01 '20 at 22:51
8

When all fails, 5 years after the question was posted, there comes a stack-overflow hero. I'd give 5 upvotes if possible. – aviya.developer Aug 13 '20 at 11:21

score 27 · Answer 3 · answered Apr 20 '22 at 12:05

27

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 '22 at 12:05

krukid

4,285
5
31
30

1

helped me in chrome Version 103.0 as well. Thanks! – JavaQuest Aug 02 '22 at 14:40
worked on chrome version Version 114.0.5735.248 . thanks for sharing! – GibboK Jul 27 '23 at 06:19

score 14 · Answer 4 · answered Nov 20 '14 at 17:54

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 '14 at 17:54

Dhruva Sagar

7,089
1
25
34

1

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. – Giant Elk Nov 27 '14 at 20:36
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. – Dhruva Sagar Feb 03 '15 at 17:30
7

Thanks , just typed window.React = {} in the console and the React tab became visible in the chrome dev tools besides the audits tab . – Siddharth Sharma May 07 '16 at 15:38

score 6 · Answer 5 · answered May 30 '20 at 08:10

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 '20 at 08:10

Voy

5,286
1
49
59

score 2 · Answer 6 · answered Apr 27 '23 at 12:32

TOW 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

score 1 · Answer 7 · answered Dec 24 '21 at 22:49

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 '21 at 22:49

pmax

26
1

score 1 · Answer 8 · answered Nov 15 '22 at 16:26

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.

score 0 · Answer 9 · answered Nov 24 '22 at 16:24

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 '22 at 16:24

lloydbanks

63
7

score 0 · Answer 10 · answered Feb 16 '23 at 15:38

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 '23 at 15:38

Alexander Emelyanov

79
1
5

score -2 · Answer 11 · answered Jun 25 '19 at 10:43

-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 '19 at 10:43

Geco

177
1
17

ReactJS chrome extension installed but not showing up

11 Answers11

Linked