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

[bengry]

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:

When using Opera the tabs do show up:

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:

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

[Roman-Popov]

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]

@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]

@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]

@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]

@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]

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]

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]

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]

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]

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]

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]

@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]

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]

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

[ianvieira]

@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.

[TallGirlVanessa]

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

[bvaughn]

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]

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:

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]

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]

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]

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]

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]

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]

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]

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

[sanjayautonomiq]

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]

Thanks, @sanjayautonomiq, this work for me

[r3wt]

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]

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]

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]

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]

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]

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]

This is so weird.

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

Thank you, @sanjayautonomiq

But this is a bug.

[bvaughn]

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]

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

[bengry]

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]

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

[rscott78]

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

[bvaughn]

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.