React: React dev tools not showing (blank)

[aaronchua13]

i was working with it a while ago but now it will only show nothing in the Components tab. I tried everything, reinstalled or even try on a different browser. I even restarted my PC.
![Screenshot from 2019-09-20 14-53-15]

[mark-quinn]

Having the same issues. On updating the state, an icon appears which says reset value. If you copy the object and paste it into the console you can see that the object is updating but it's just the extension that is not displaying it as normal.

[bvaughn]

Works for me on a fresh install. (Just tested to verify.)

Can you provide some more info? There isn't a lot to go on on this issue. For example, please specify:

• What OS you're using
• What browser and version
• Which DevTools extension version (you can find this in about:extensions on Chrome or about:addons on Firefox)
• Which website(s) this bug is happening on

[bvaughn]

Having the same issues. On updating the state, an icon appears which says reset value.

I don't understand this comment. If you're having the same issue (an empty/blank DevTools) how are you updating state? (You have to see a component in the tree to update its state, no?)

[davidsavoie1]

I'm experiencing this issue too. The devtool's Components tab is empty and no element can be selected.

OS: Linux Mint (Virtual machine)
Browser: Chrome
Extension version: 4.1.0 (9/19/2019)
Website: Localhost (development)

I also tried restarting the console, restarting the browser, reinstalling the extension, restarting the virtual machine without success... It worked just before lunch, now it doesn't. Very weird...

[bvaughn]

Any errors in the extension's background page or console?

It could potentially be related to this change?
https://github.com/facebook/react/pull/16752

cc @onionymous

[aaronchua13]

@bvaughn
OS: Linux mint
Browser: chrome, mozilla
Website: development
Version: 4.1.0

[aaronchua13]

Having the same issues. On updating the state, an icon appears which says reset value.

I don't understand this comment. If you're having the same issue (an empty/blank DevTools) how are you updating state?

I did the same.

[davidsavoie1]

Any errors in the extension's background page or console?

It could potentially be related to this change?

16752

cc @onionymous

Nothing in the console. 'Profiler' tab says:

Profiling not supported.
Profiling support requires either a development or production-profiling build of React v16.5+.

[bvaughn]

For those of you affected by this bug, would you be interested in installing a one-off release (with the trusted types change backed out) to confirm if it fixes things for you? If so, I'll build and share one.

[davidsavoie1]

@bvaughn I don't mind trying it out if you provide some guidance on how to do so. Better trying something out than having no devtool at all! We get used to those goodies! ;)

[bvaughn]

By the way, we are having a little trouble reproducing this issue on our end using a Linux VM. Does this bug affect all React websites? Or one in particular?

I'll update this issue with a link to a build shortly, David.

[Rex1911]

By the way, we are having a little trouble reproducing this issue on our end using a Linux VM. Does this bug affect all React websites? Or one in particular?

I'll update this issue with a link to a build shortly, David.

I'm having the same issue, and for me, I've been experiencing this bug on all react websites. The Components tab is empty.

OS: Ubuntu 18.04
Browser: Chrome v69.0.3497.100
Website: Every react based website
Version: 4.1.0

[Abibibi]

For those of you affected by this bug, would you be interested in installing a one-off release (with the trusted types change backed out) to confirm if it fixes things for you? If so, I'll build and share one.

Sure.

[aaronchua13]

By the way, we are having a little trouble reproducing this issue on our end using a Linux VM. Does this bug affect all React websites? Or one in particular?

I'll update this issue with a link to a build shortly, David.

yes it does.

[junchaohu]

Does everyone have solutions??

[sshmyg]

Same issue for standalone version + react native

MacOS Mojave 10.14.5
DevTools - 4.1.0 (standalone)

[mark-quinn]

Reinstalled the extension and I am still having problems.

OS: MacOS Mojave 10.14.5
Browser: Chrome 76.0.3809.132

[mark-quinn]

Any errors in the extension's background page or console?

It could potentially be related to this change?

16752

cc @onionymous

No changes in the console. Only visual change is the reset value icon displayed next to the objects in state which I have never noticed before.

[EddyHamzich-zz]

^ same issue. The state actually does update because I can see it changing in my web-app (its an animation trigger so i can see it visually) it just doesnt update in DevTools.

Windows 10
React 16.8.6
DevTools 4.1.0 (9/19/2019)
Chrome Version 77.0.3865.90

[bvaughn]

This thread seems to be splitting into two separate things, which isn't helpful. So far as I can tell, @mark-quinn and @EddyHamzich seem to be describing #16843 - not what this issue is reporting. (If DevTools was "blank" for you, as the screenshots above, you wouldn't be able to select a component or see its properties.)

It's confusing when issues get mixed. Let's try to keep this issue focused on the blank page thing that a few people are reporting (but that I can't repro). The cause of the other issue is known and described already on #16844.

[aaronchua13]

I still have the issue and I am wondering why I got this in the first place, some devs in the office has the same pc as mine and working properly except for me

[bvaughn]

@aaronchua13 Do you perhaps have other extensions installed that might be interfering? Or have you set any advanced configuration options in Chrome preferences panel?

[davidsavoie1]

The only other extensions I have are Redux DevTools (working) and Google Docs offline. I don't see where there could be interference. And I do experience the issue on various React websites, including official React site. Thanks for the help.

[aaronchua13]

No, I don't think that's the case. I only have few extensions and I also tried it in firefox which has no extenion at all but still have the issue. I'll upload some photos later maybe it could help.

[bvaughn]

Here is a build of the Chrome extension that backs out the changes from #16752:

ReactDevTools.zip

Can you give this a try and let me know if it fixes the blank panel issue you're seeing? It would be helpful in narrowing down the cause of the regression, since I'm not able to reproduce it yet.

cc @aaronchua13, @Abibibi

[mattcee233]

@bvaughn
FYI your reversion resolved this issue for me, running chrome 60.0.3112.78, was affecting all websites visited

[bvaughn]

Thanks for the data point, @mattcee233. Going to wait to hear from a couple others but if it also fixes it for them, I'll probably post a new release with the change reverted and we'll have to revisit the trusted types support.

[Rex1911]

Here is a build of the Chrome extension that backs out the changes from #16752:

ReactDevTools.zip

Can you give this a try and let me know if it fixes the blank panel issue you're seeing? It would be helpful in narrowing down the cause of the regression, since I'm not able to reproduce it yet.

cc @aaronchua13, @Abibibi

I've tested this out on my machine and everything seems to work fine. I can confirm I see the Components again in the Components tab

[linshunghuang]

Hi, can someone help me get a reliable repro? Thanks!

Here are the versions (all stock installations) I used for testing in a fresh Linux VM:

Ubuntu 18.04.3 LTS
Chrome Version 77.0.3865.90
React Dev Tool 4.1.0 (9/19/2019)
Website: https://reactjs.org/

I'm not getting a blank Components tab. What am I missing?

[bvaughn]

@linshunghuang works with me at Facebook. Once we revert this change, he will be working to re-add Trusted Type support- so it's important that he/we understand how to reproduce the original issue (so we avoid reintroducing it with a future change).

I appreciate all of the info folks have been providing so far! 🙇 It would be super helpful if any of you are also able to help him find a way to repro the issue.

[davidsavoie1]

It would be super helpful if any of you are also able to help him find a way to repro the issue.

@bvaughn I honestly don't know how to do that, but I'd be glad to help out if I can.

[bvaughn]

This fix will be released with 4.1.1 (sometime soon)

Let's keep talking and sharing info if possible to try to narrow down how to repro the issue though.

[linshunghuang]

Ok, I got a repro using Chromium 69.0.3497.0 on both Ubuntu and Mac.

[davidsavoie1]

@bvaughn A newbie question here... How can I actually use the zip folder you provided?

[bvaughn]

@davidsavoie1

1. download it and extract it
2. go to about:extensions
3. enable "developer mode" in the top right
4. click "load unpacked" button
5. browse to select the extracted folder

(Also disable the one from the store, at least temporarily.)

[Abibibi]

Here is a build of the Chrome extension that backs out the changes from #16752:

ReactDevTools.zip

Can you give this a try and let me know if it fixes the blank panel issue you're seeing? It would be helpful in narrowing down the cause of the regression, since I'm not able to reproduce it yet.

cc @aaronchua13, @Abibibi

It works fine now. All components are displayed in the tab. Thanks a lot

[RossVertizan]

@bvaughn - Just another quick confirmation that this fixes the problem for me. I'm using React with Electron on Windows 10.

[bvaughn]

Thanks~ I plan to release this update today.

[bvaughn]

Hey folks, sorry I didn't get the release made yesterday. I will get it out today.

Would like to run one more build by you all first though (from PR #16900) to verify that we didn't reintroduce the problem being reported on this thread.

ReactDevTools.zip

Sorry to ask another favor on this same thread. Trying to avoid the larger inconvenience of another regression though!

[sshmyg]

@bvaughn Could you attach stand alone version? I can try it with react native.

[Abibibi]

Hey folks, sorry I didn't get the release made yesterday. I will get it out today.

Would like to run one more build by you all first though (from PR #16900) to verify that we didn't reintroduce the problem being reported on this thread.

ReactDevTools.zip

Sorry to ask another favor on this same thread. Trying to avoid the larger inconvenience of another regression though!

This works too.

[bvaughn]

Thanks @Abibibi!

@sshmyg I don't think this change should have any impact on the standalone version. That uses a web socket. The browser extension uses the postMessage API to inject which this change touches.

[sshmyg]

@bvaughn Latest standalone version also has this bug with empty screen.

[bvaughn]

Hm... that sounds unexpected. The code change that caused this regression was inside of react-devtools-extensions which is only the browser extensions. The standalone version is a different package. If you're seeing a bug with it, please report a separate issue with repro steps.

[RossVertizan]

@bvaughn - Yes this still works for me.
Thanks.

[bvaughn]

This fix has just been published to NPM and posted to Chrome/Firefox as v4.1.1

[kroudir]

I am experiencing the same problem with React Dev Tools 4.2.1
macOS Catalina
Chrome Version 78.0.3904.108 (Official Build) (64-bit)
Chrome extension version 4.2.1
An app that I am working on.

[ahmedreda97]

I am experiencing the same problem with React Dev Tools 4.2.1
macOS Catalina
Chrome Version 78.0.3904.108 (Official Build) (64-bit)
Chrome extension version 4.2.1
An app that I am working on.

+1

[savybrandt]

My dev tools are also blank. Steps to reproduce-

1. Do your job like normal, but don't have your computer plugged in
2. Your computer dies
3. Plug in your computer and get some charge
4. Open chrome to continue doing your job as you were before
5. Open devtools Components tab
   => it's blank
   

[gaearon]

Hi folks, the original bug has been closed. You're commenting in a closed issue, which is very unlikely to be read and acted upon. When you have a problem, please create a new issue with fresh information. E.g. these repro steps by @savybrandt are great, but they need to be a new issue. I'm going to lock this one.