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');

Demimonde

you should set window.React, please see #26347989 – Mydriatic

Answer 1

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.

Demimonde

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. – Seascape

@Seascape you should write this as an answer. – Wieldy

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

Answer 2

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.

Budding

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

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

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

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

Answer 3

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.

Libbielibbna

helped me in chrome Version 103.0 as well. Thanks! – Crape

worked on chrome version Version 114.0.5735.248 . thanks for sharing! – Vallo

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

Simply closing and reopening dev tools did it for me – Athletics

Answer 4

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

Swound

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. – Demimonde

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. – Swound

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

Answer 5

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.

Viperine

Answer 6

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

Kenyettakenyon

Answer 7

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

Caw

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. – Margo

Answer 8

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.

Republicanism

Answer 9

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.

Coca

Answer 10

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

Distribute

Answer 11

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.

Farrahfarrand

Answer 12

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

Phenice

Answer 13

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

Waylin

Answer 14

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 = {};

Trombley