React-devtools: React devtools tab not showing up on FF nor on Chrome

[istvano]

Hi,

I have installed the extension on Chrome, but it stays gray no matter what website I visit.

• I tried my own react app ( Redux devtools works! )
• Facebook
• React page ( https://facebook.github.io/react/ )

Also on chrome when I click on the icon the Options menu stays grey and inaccessible

Firefox same thing. I installed it, but never shows up on the developer toolbar.

I am not sure how I could debug this further. Any clues would be gratelly appreciated.

Thanks

[istvano]

Hi, I managed to enable it on FF removing it and adding it again. On Chrome same problem unforuntatellty.

[gaearon]

Can you remove all other extensions and try again? Maybe some other extensions is interfering with it somehow.

[istvano]

Hi,

I tried it in incognito mode same result. Do I need to fully remove my extensions ?

[gaearon]

I don't know. Since I can't reproduce it, it sounds very odd and specific to your browser installation.

[istvano]

Hi,

No matter what I do I get the same, the options menu is disabled and the extension is not functioning.
on Version 56.0.2924.87 (64-bit).

I guess we can close the issue. I am using FF to debug react specific problems now.

Thanks for your help!

[gaearon]

Can you confirm the version of the extension itself?
It would also be great to try with a clean Chrome install.

[istvano]

it is the latest: Version: 2.0.12. I will try to do it, I will check how I can save my current settings

[istvano]

Hi,

1: I have backuped up profile
2: uninstall chrome from windows 10 64 bit professional
3: deleted anything chrome related
4, installed latest chrome
5, installed React Chrome extension
6, options menu still greyed out. visiting www.reactjs.com shows inactive toolbar

I guess not much else to try :)

[gaearon]

OK let's reopen it. I'm going to try it specifically on Windows 10 when I get some time.

[gaearon]

Tagging as "good first bug" in case somebody could help reproducing this.

[markneumann]

FWIW, Chrome Version 57.0.2987.98 (64-bit), OSX 10.12.3, React Dev 2.0.12,
all extensions disabled except React Dev,

Same problem. DevTools tab does not appear in Chrome Dev Tools.

[zinoviev]

Don't even know icon can be colored sometimes

Same for me Win 10 x64, Chrome 56.0.2924.87 (64-bit)
Icon always grey

But devtools itself works just fine, looks like only icon color issue

[bezvoshchuk]

With update to version 58.0.3029.33 beta (64-bit) on macOS Sierra 10.12.3 I have the same problem, there is no React dev tools tab in Chrome dev tools.
Regarding icon, I've never seen it coloured, it was always grey, even on React apps.

[tlakomy]

Yesterday I was not able to see the React dev tools on facebook.com, and now I cannot reproduce this issue:

[tlakomy]

Regarding the icon being always greyed out in Chrome, I've created a PR to fix this issue: https://github.com/facebook/react-devtools/pull/597

[gaearon]

Going to close, as people report it works on Windows 10.
Might have been a temporary Chrome issue.

The new version also adds a link to troubleshooting instructions so hopefully this helps for cases where this was caused by a misunderstanding (e.g. file:// URLs need special permissions).

Let me know if you can reliably reproduce this on a specific website with recent versions!

[zpytchpp]

it doesn't work on Linux, latest Chrome

[gaearon]

@zpytchpp This does not help us diagnose the issue at all as you did not specify any information that could be used to see what happened. Which website are you looking at? What do you mean by “doesn’t work”?

[zpytchpp]

I am trying it on a React + Redux (4.0.5) app on localhost. The problem is described in at the very top of the page:

I have installed the extension on Chrome, but it stays gray no matter what website I visit.

[istvano]

Hi,

it is the same for me still. Even with the latest Chrome. Even in incognito mode. I have given up :( it works well in FF so I am using it on that.

I would be more than happy to help investigating it. if you tell me what I should check? How to debug it? is there anything I can run, look at, or do to help you to reproduce it?

[gaearon]

Please provide a reproducing case. (A full project we can run and check, or a page online.)

I have installed the extension on Chrome, but it stays gray no matter what website I visit.

Which version of the extension are you using? Is your app inside of an iframe? Have you read the troubleshooting instructions?

[gaearon]

I also want to note that the original comment in this issue was also a bit misleading:

I have installed the extension on Chrome, but it stays gray no matter what website I visit.

It was always expected to stay gray until React DevTools 2.1.x (released last week).

Chrome just started adding toolbar buttons for every extension a year ago. We never implemented this button in the past. So it started showing up even though we did not support it in any way, and Chrome painted it gray. Both README and extension page at the time didn't say anything about the icon—what's expected is that React tab in DevTools should show up 😉

Now, in recent versions (try 2.1.9) of the extension we actually implemented the icon, and it lights up on websites using React. So try updating the extensions.

But this was not even meant to work in the past.

[istvano]

Hi,

great news. Just updated to 2.19 from this version on the symbol finally lights up!
it is working for me.

thanks !!!!

[robganly]

I was having this issue on Chrome (Version 71.0.3578.98 (Official Build) (64-bit)) on macOS High Sierra and thought it was going to be a headache to fix.

I simply opened a new tab, cut and pasted my local host url the address bar, then opened development tools. The react menu then appeared on the top right. Hope this simple fix helps someone else!

Cheers,

Rob Ganly