Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: DevTools tabs don't show up sometimes in latest release #19002

Closed
bengry opened this issue May 26, 2020 · 45 comments
Closed

Bug: DevTools tabs don't show up sometimes in latest release #19002

bengry opened this issue May 26, 2020 · 45 comments

Comments

@bengry
Copy link

@bengry bengry commented May 26, 2020

Note this issue is due to CR bug 1085215

It is impacting several other popular extensions as well- including React, Redux, Relay, and Vue devtools.


React version: 16.13.1
DevTools version: 4.7.0 (5/18/2020)
macOS version: 10.15.4 (19E287)

Steps To Reproduce

  1. Create a new profile in Google Chrome
  2. Install the React Developer Tools
  3. Go to https://reactjs.org
  4. Open the browser Dev Tools

Screenshots

Not sure this helps, but this is basically what I get after following the aforementioned steps:
image

When using Opera the tabs do show up:
image

The current behavior

Sometimes the Components and Profiler (i.e. React devtools tabs) don't show up.

The expected behavior

These tabs should show for any site using React.

More details

I've tried a few browsers, including:

  1. Google Chrome (83.0.4103.61)
  2. Microsoft Edge (83.0.478.37)
  3. Opera (68.0.3618.125)

All of them should be working, since they're all Chromium based.

The most reliable was Opera, which always shows the dev tools tabs. Chrome and Edge behaved the same way, sometimes showing them and other times not.

I've also taken a look at the background pages of the React Dev Tools extension and they don't show any errors, only these performance metrics in the devtools_app.html page:
image

The main background page shows nothing in the console at all times.

@Roman-Popov
Copy link

@Roman-Popov Roman-Popov commented May 26, 2020

Hi there. I have the same problem. Maybe this info will be useful:

  1. When I open some of "pages" (let it be P1) of my SPA, then open DevTools I can't see "Components" and "Profiler" tabs.
  2. I close DevTools
  3. Then I switch to the other "page" of SPA (let it be P2)
  4. Open DevTools while I'm on P2
  5. Now I see "Components" and "Profiler" tabs
  6. Without closing DevTools I switch back to P1, the two tabs of RDT-extension still here, profit :)
@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 27, 2020

@Roman-Popov Can you reliably reproduce this? Does it matter what p1 and p2 are? (If something about the apps seem significant, can you share them with me somehow so I can repro?)

Also which browser+OS

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 27, 2020

@Roman-Popov @bengry (or anyone else who sees this and can repro) If you can repro, would you be willing to try a new build of DevTools (that I could share here) to see if the problem still happens?

I could try making a build with #18860 backed out. (That's the only commit in the 4.6->4.7 change set that looks even remotely suspicious.)

@Roman-Popov
Copy link

@Roman-Popov Roman-Popov commented May 27, 2020

@bvaughn About p1 and p2. Yep, looks like there is difference between them. P2, where RDT is not shown by default, contains much more dom-elements. And here is one more detail - Redux-devtools tab behaves exactly as RDT tabs.

What about https://reactjs.org/ page (problem mentioned by @bengry) - I saw that too. But checked it again now and don't see problems. Tabs are shown, everything is fine.

Probably in my case there is some memory issue in my project or something like this. Because If I remove long lists from P2, devtools tabs shows up.

Chrome v83.0.4103.61
Chrome Canary v85.0.4157.0
Win 10 Pro 1903

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 27, 2020

@Roman-Popov Thanks for the added information!

Any chance you can share the repro (or access to it) with me so I can see what's going on?

Alternately, would you be willing to install a one-off devtools build if I attach one here? (Just to see if you can still repro with it)

@lilbumblebear
Copy link

@lilbumblebear lilbumblebear commented May 28, 2020

I have encountered the same issue in our SPA. I was able to get the Components and Profiler tabs to appear in Chrome Dev Tools when I inspected our app in mobile "view" (which changes the initial components rendering). I refreshed and changed back to desktop/responsive "view" (dev tools open the whole time) the tabs remained visible.

For our SPA, the biggest difference between mobile and desktop landing page is that on desktop we render a drawer open with a react-virtualized list. This drawer is not open or rendered immediately on mobile. I'm not sure if this info helps, I know it's just a breadcrumb. I will update if I find anything else.

Would be happy to try a custom build to see if it resolves the issue.

@Roman-Popov
Copy link

@Roman-Popov Roman-Popov commented May 28, 2020

Because If I remove long lists from P2, devtools tabs shows up.

Yep! React-virtualized. I use that too for long lists I mentioned in my previous message.
overscanRowCount={600} is set for wrapped list. It's big enough, but there are only very lightweight placeholders with couple dom-elements (for keep browser search trough the list by pressing ctrl+f). If I downgrade overscanRowCount to +-50, then the problem with missing tabs is gone.

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 28, 2020

Interesting. So it sounds like the problem has something to do with the size of the tree, or maybe the number of children in a single parent... @Roman-Popov could you by chance repro this in a Code Sandbox or something? (Since I can't look at P2 directly I assume?)

In other news though- overscanRowCount={600} seems...very unexpectedly high. I would not have advised that value being over a single digit number. RV and RW exist to avoid generating and working on long lists. 600 means it's rendering the viewport rows, plus as many as 1,200 extra ones.

@bengry
Copy link
Author

@bengry bengry commented May 28, 2020

Does reactjs.org use react-virtualized as well? Because the issue reproduced for me there too (in fact, this issue was opened with that as the example). We do use it in our app, but with a smaller overscan count, and it still happened there.

@lbras
Copy link

@lbras lbras commented May 28, 2020

Does reactjs.org use react-virtualized as well? Because the issue reproduced for me there too

Working fine for me in reactjs.org.

In our own app we don't use react-virtualized, yet we can reproduce the issue.

edit: I'm having the same issue on a new react app created by create-react-app.

@ianvieira
Copy link

@ianvieira ianvieira commented May 28, 2020

I think this might be related with Chrome 83, I started having this problem after upgrading to 83 and I can reproduce it on Chrome Canary 85.

A colleague using Chromium 81 doesn't have the problem using the same app.

@Roman-Popov
Copy link

@Roman-Popov Roman-Popov commented May 28, 2020

@bvaughn

overscanRowCount={600} seems...very unexpectedly high.
....
RV and RW exist to avoid generating and working on long lists

True :D I know about performance. That was not good, but fast solution. Later I do some kind of custom search of course :)
About source code to show my app and try to reproduce - sorry, I think I can't do that, NDA and so on, you know. But I can try to make some small CRA-project with react-virtualized lists, heavy pages etc. And share that repo if I catch this bug again. I'll tryto find some time to this investigation)

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 28, 2020

I think this might be related with Chrome 83, I started having this problem after upgrading to 83 and I can reproduce it on Chrome Canary 85.

A colleague using Chromium 81 doesn't have the problem using the same app.

This would be really useful info to get confirmed. @ianvieira how reliably can you reproduce this problem? If very reliably, could you try an older Chromium version and see if it no longer reproduces?

If so, let me know and I'll reach out to the Chrome team.

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 28, 2020

Just to try one extra thing, if anyone else can repro this issue pretty reliably, would you try this extension build and let me know if it helps?

ReactDevTools.zip

I don't really expect it to, but I'd like to rule out recent WebPack changes.

To instal the extension above:

  1. Download it and unzip it somewhere
  2. Open chrome://extensions/ in your browser
  3. Click the little toggle to disable the React DevTools extension
  4. Click the "Load Unpacked" button
  5. Select the unzipped extension folder from step 1

installKapture 2020-05-28 at 10 49 16

@ianvieira
Copy link

@ianvieira ianvieira commented May 28, 2020

@bvaughn I thought I could consistently reproduce it but after going to https://reactjs.org (which displayed the tabs correctly) and going back to my application with the console opened, now it's working consistently.

On Chrome Canary I still can reproduce it consistently on my app with several nodes. I'll try the version you sent.

@vlmphipps
Copy link

@vlmphipps vlmphipps commented May 28, 2020

I noticed this seems to kill all my other extension-added console tabs as well. Redux, etc.

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 28, 2020

I noticed this seems to kill all my other extension-added console tabs as well. Redux, etc.

I'm starting to suspect this has something to do with Chrome.

I've heard reports from others saying that Relay DevTools is crashing, which causes React DevTools to break. Now I'm seeing you say that this affects Redux DevTools as well.

There's nothing React (or Relay) should be doing that should affect each other, or Redux extension.

@ianvieira
Copy link

@ianvieira ianvieira commented May 28, 2020

I noticed this seems to kill all my other extension-added console tabs as well. Redux, etc.

I noticed the same. I just tried in Chrome Canary, I had the same behavior, after going to https://reactjs.org the React tabs appears, together with others:

image

I tried before with https://localhost:3000 (with no success opening and closing Dev Tools) and with https://farfetch.com. The tabs just reappeared with https://reactjs.org and after closing the Dev Tools between Farfetch and React and refreshing the page.

Oh btw, I was using the version you sent @bvaughn.

@ianvieira
Copy link

@ianvieira ianvieira commented May 28, 2020

For some reason, I can see the tabs only at https://reactjs.org on Canary. Localhost stills without it (not only the react ones but all of them). I suspect I have the tab on the stable because I opened localhost after React docs with the Dev tools opened.

I tried to do the same but I cannot have it on localhost consistently at Chrome Canary.

EDIT: After closing the browser tab I accessed React docs on stable, the tabs are missing again. It really seems to be a Chrome issue

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 28, 2020

This issue is not deterministic. Sometimes it works, sometimes it doesn't. I don't think we should read too much into a single success.

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 28, 2020

Chrome v83 happened to release one day after React DevTools v4.7.

Here is the previous version of React DevTools (4.6) if anyone would like to try it to see if anything changes:
ReactDevTools-4.6.zip

It's sounding more and more like a Chrome issue though from what I'm hearing.

@maxbeier
Copy link

@maxbeier maxbeier commented May 28, 2020

Neither the experimental version nor 4.6 is working for me (only the workaround mentioned above). I also have the feeling that this is a Chrome issue, as the bug occurred after updating Canary some days ago and persists since that, but the extension works correctly in Stable.

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 28, 2020

By the way, this appears to be a Chromium issue that is also impacting Vue and Redux DevTools.

If you have a CR bug account, consider starring this issue:
https://bugs.chromium.org/p/chromium/issues/detail?id=1085215

@andyrichardson
Copy link

@andyrichardson andyrichardson commented May 29, 2020

I'm not sure if this is the answer you're looking for but in Urql Devtools we've tried to move away from using chrome.devtools.inspectedWindow.eval in favor of handshaking because of unpredictability like this.

The problem with evaluating an inspected window is you can end up with race conditions or a dependency on polling as is in the case on react devtools.

const loadCheckInterval = setInterval(function() {
  createPanelIfReactLoaded();
}, 1000);

I haven't been able to reproduce the bug but I wouldn't be surprised if chrome is doing something funky with interval calls in extensions. It's not fun but handshaking might make things a little more straight forward, I know messaging is something that the chrome docs encourage over window evals for security reasons.

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 29, 2020

That's an interesting suggestion, @andyrichardson. Thank you!

@sanjayautonomiq
Copy link

@sanjayautonomiq sanjayautonomiq commented Jun 2, 2020

We are also facing same issue for ChroPath
I didn't get permanent solution yet but here is the work around-

  1. Change the chrome DevTools theme, only once it is required.
  2. Now open devtools, you find the extension tab in DevTools.
  3. You can again change the theme whatever you want to keep and this will fix your problem.
@Akurganow
Copy link

@Akurganow Akurganow commented Jun 2, 2020

Thanks, @sanjayautonomiq, this work for me

@r3wt
Copy link

@r3wt r3wt commented Jun 3, 2020

This has been happening for me for over a year in chrome. usually reloading the page the components and profiler tab reappear. just wanted to point out that its not just latest release, its been happening since v16 as long as i can remember

@bengry
Copy link
Author

@bengry bengry commented Jun 3, 2020

This has been happening for me for over a year in chrome. usually reloading the page the components and profiler tab reappear. just wanted to point out that its not just latest release, its been happening since v16 as long as i can remember

I think that may be something on your end then, as personally I haven't seen this in the last year AFAIR - and as mentioned, this does not happen in latest Opera at the time of writing this (Opera 68, Chromium 81), and for me refreshing the page doesn't help. The workaround suggested by @sanjayautonomiq does though.
Even if this bug has existed for at least a year, something in the recent couple of weeks has made it worse (new Chromium and/or new RDT versions) - as evident from all the reactions in this issue.

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Jun 15, 2020

Even if this bug has existed for at least a year, something in the recent couple of weeks has made it worse (new Chromium and/or new RDT versions) - as evident from all the reactions in this issue.

Certainly true. I pinged the CR bug again. This regression is pretty disruptive.

@dotproto
Copy link

@dotproto dotproto commented Jun 23, 2020

FYI, I just flagged http://crbug.com/1085215 as a duplicate of http://crbug.com/1093731. A fix for the latter issue was submitted ~8 days ago. Please retest in Canary and, if the issue is not addressed, dedupe 1085215.

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Jun 23, 2020

Does indeed look like the Canary fix resolves this issue (or at least makes it MUCH harder to repro). Going to leave this issue open until the fix has rolled to Chrome stable though, as we're getting a lot of duplicate reports of this already.

@hkmarques
Copy link

@hkmarques hkmarques commented Jun 26, 2020

We are also facing same issue for ChroPath
I didn't get permanent solution yet but here is the work around-

  1. Change the chrome DevTools theme, only once it is required.
  2. Now open devtools, you find the extension tab in DevTools.
  3. You can again change the theme whatever you want to keep and this will fix your problem.

Worked like a charm for me, thanks! Was about to try banging my head against the wall.

@yumindeckard
Copy link

@yumindeckard yumindeckard commented Jul 3, 2020

This is so weird.

I have to change the devTools theme to fix this issue.

Thank you, @sanjayautonomiq

But this is a bug.

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Jul 4, 2020

But this is a bug.

Yes.

Specifically, it's a Chrome bug (CR bug 1085215) as mentioned in the issue description 😄 Nothing we can do (here) to fix it.

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Jul 6, 2020

This seems to be resolved now for me in Chrome stable so I'm going to close this issue.

@bvaughn bvaughn closed this Jul 6, 2020
@bvaughn bvaughn mentioned this issue Jul 6, 2020
@bengry
Copy link
Author

@bengry bengry commented Jul 6, 2020

This seems to be resolved now for me in Chrome stable so I'm going to close this issue.

Still reproduces for me on Chrome 83.0.4103.116.

I agree this has no fix on the RDT side, but might be worth keeping this issue open until this is fixed in Chrome.

@aleczratiu
Copy link

@aleczratiu aleczratiu commented Jul 7, 2020

Same issue here Version 83.0.4103.116 (Official Build) (64-bit)

@rscott78
Copy link

@rscott78 rscott78 commented Jul 8, 2020

I'll chime in and say it's also an issue for me (Version 83.0.4103.116).

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Jul 8, 2020

Hey folks. It's probably not worth adding more "+1" comments here since this is a Chromium bug. There's nothing I can do about it on the extension side to make it work. The "+1" votes would be better spent on the Chromium bug itself 😄 so that Google knows it's impacting a lot of people.

That being said, the CR bug has been marked as fixed and scheduled for cherry picking into v84 of Chrome as per this comment so it should be resolved soon for everyone hopefully.

In the meanwhile I am going to lock this issue just to avoid notification-spamming everyone who has already commented above.

@facebook facebook locked as resolved and limited conversation to collaborators Jul 8, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet