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.