React-devtools: Devtools unresponsive in Chrome

[erichdev]

Some time this week, React Devtools stopped working in Chrome. It successfully connects to React and displays all the root components, then becomes completely unresponsive. I can't expand the components, select "Highlight updates," etc. No interaction is possible.

I've tried reinstalling the extension and disabling all other extensions. It also doesn't matter what website I'm on. Devtools still works on Firefox.

Chrome: 61.0.3163.100 (Official Build) (64-bit)
Windows 10 version 1703

This is what I see from the React docs site. Clicking anything in Devtools is unresponsive, even scrolling.

Edit: Possibly related to https://github.com/facebook/react-devtools/issues/896. However, for me, this issue does not cause my dev tools to gray out and I'm still able to open other tabs.

[MikeJCusack]

I can confirm the same behavior for me on both Chrome and Chrome Beta

[holysnake91]

Yes, i having the same issue for chrome Version 61.0.3163.100 (Official Build) (64-bit)

[juanojeda]

I'm also seeing this same behaviour.
When I double-click on a node, it will expand, but no interaction is possible in the props/state panel.

[rickcav]

This may sound weird but I was using a second monitor and dev tools wasn't working on the second screen. (- mine was freezing my dev tools -) Moving my chrome window back onto my laptop screen seems to have resolved the issue, don't ask me how or why, but I've checked with a few people having a similar issue and its appears to be a temporary fix.

[erichdev]

@rickcav Thanks! That worked for me. Interestingly, moving the window from the external monitor to the laptop screen and back to the monitor works.

[randseay]

This just happened for me too: Version 61.0.3163.100 (Official Build) (64-bit)

I moved the window from my external monitor to my laptop screen and back to the external monitor, and it seems to be working again.

I tried disabling and reinstalling the extension to no avail before I found this thread.

[HarplingeTom]

@rickcav Thanks, that did the trick. Weird huh?

[MikeB2012]

@rickcav Thank you!! Note: I had to move the browser to my laptop screen, close and reopen dev tools before I had functionality again.

[wruth]

Same problem — workaround of moving back and forth between monitors fixes. Forces a re-render, as opposed to some kind of cached bitmap for the ui?

[paulvandenburg]

@rickcav I think this is related to a varying display scaling setting between the 2 monitors.
I'm experiencing the same issue, and your suggestion also "solved" it.
My primary monitor is at 200% display scaling and my secondary monitor at 100% display scaling.
However when I set both monitors to 100% scaling I had no issues using the React console on either monitor.

[rickcav]

Not sure but after you flip the panel to the main monitor it typically
doesn't freeze up unless you restart your computer. I had the issue on my
old laptop 1080p monitor and new with 4 k monitor scaling is offset on the
new but also had the issue on the previous laptop.

On Oct 18, 2017 8:50 AM, "Paul van den Burg" [e-mail]
wrote:

@rickcav https://github.com/rickcav I think this is related to a
varying display scaling setting between the 2 monitors.
I'm experiencing the same issue, and your suggestion also "solved" it.
My primary monitor is at 200% display scaling and my secondary monitor at
100% display scaling.
However when I set both monitors to 100% scaling I had no issues using the
React console on either monitor.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-devtools/issues/897#issuecomment-337637097,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AdAYyw01eSCPeiFU72puztdbGGySeN1aks5sth4ogaJpZM4PhADZ
.

[paulvandenburg]

That is probably because in most cases windows sets laptops also on a larger than 100% display scaling where most external monitors just get 100% except high pixel density ones like uhd.

In my experience it also isn't freezing, it just is unresponsive to any mouse interaction, I can still tab through the React console fine using the keyboard. However only using the keyboard is quite unpractical obviously.

[albertogasparin]

Is this a Chrome dev tools bug or react devtools one? Getting the same issue on both Chrome and Opera btw (confirmed with external monitor scaled differently). And it looks like disabling the extension doesn't solve the problem

[rickcav]

Not sure I just encountered the problem with Chrome & React dev tools.

From: Alberto Gasparin [mailto:[email protected]]
Sent: Friday, October 27, 2017 2:52 AM
To: facebook/react-devtools
Cc: Rick Cavanaugh; Mention
Subject: Re: [facebook/react-devtools] Devtools unresponsive in Chrome (#897)

Is this a Chrome dev tools bug or react devtools one? Getting the same issue on both Chrome and Opera btw (confirmed with external monitor scaled differently). And it looks like disabling the extension doesn't solve the problem

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/facebook/react-devtools/issues/897#issuecomment-339927233 , or mute the thread https://github.com/notifications/unsubscribe-auth/AdAYy_BUtdH07OfJYpust1Pgk4g9dxTLks5swaeogaJpZM4PhADZ . https://github.com/notifications/beacon/AdAYy4HuUf8tdJrRHC0EOY3ibRVoABLlks5swaeogaJpZM4PhADZ.gif

[gaearon]

Please file a bug with Chrome. We didn't change anything related.

[phantom2017-Nov]

Same Chrome Bug - 2 monitors scenario... working fine on Microsoft Edge ..

[gaearon]

PLEASE DON’T ADD MORE “ME TOO” COMMENTS.

They aren’t helpful. Again, please go ahead and file a bug with Chrome instead.

[gaearon]

(When you file a bug, please post a link to it here. I’ll ask someone from Google to help get a look at it.)

[paulvandenburg]

There already seems to be a related bug on the chromium bug tracker:
https://bugs.chromium.org/p/chromium/issues/detail?id=778443
Although after some quick testing I no longer seem to have this issue on chrome version 62.0.3202.94

[gaearon]

Can somebody else please try Chrome 62 (latest stable) and report whether the issue still exists?

[rossipedia]

Unable to repro here. I have 3 monitors.

Chrome Version: 62.0.3202.94

[ghughes27]

Issue still persisting for me in Chrome 62.0.3202.94 and 63 (Canary). I have a windows 4k laptop btw if that's a common trend we can identify for Google. Undocking dev tools into a separate window also seems to work on my second monitor as a temporary fix for those who want to keep things on one monitor.

[gaearon]

@ghughes27

Could you please comment on https://bugs.chromium.org/p/chromium/issues/detail?id=778443 and provide all the information they are asking for? That would be hugely helpful. Thanks!

[phantom2017-Nov]

OK - (for me) the issue seems to happen only in a Chrome Window that has been opened by the Visual Studio (2017) debugger .. The same page works fine in a separate Chrome instance that is not connected to the debugger.
I will also post to the bug page above shortly ...

[gaearon]

This issue is clearly affecting many users here, but for some reason only four people starred it in the Chrome tracker. If you care about this getting fixed, could you please log in and star the Chrome issue?

https://bugs.chromium.org/p/chromium/issues/detail?id=778443

[dirkdevriendt]

FYI: Seems to be fixed in the latest Chrome version (AFAICT along with other Chrome extensions experiencing faulty cursor alignment on secondary screens with a different Windows DPI setting)
I'm on Chrome 64.0.3282.186 (Official build) (64-bits)