[DevTools Bug]: Component tree size too small, components can't be selected #21986

subnomo · 2021-07-29T05:13:14Z

Website or app

Repro steps

Visit reactjs.org
Open devtools
Open "Components" tab

At first the component tree won't appear. Once I'm at the "Components" tab, I then have to also refresh the page to make the tree render. And when it does render, it still doesn't work properly.

As a note, this issue started happening after I had to forcibly restart my computer. Since then I have tried reinstalling the extension, restarting Chrome, restarting my pc, all of which haven't worked. I'd like to avoid reinstalling Chrome completely but that's the only thing I haven't yet tried. Using Windows 10, btw.

Here is what the broken component tree looks like. It's very narrow and the components cannot be selected:

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

lilbumblebear · 2021-07-29T18:37:48Z

Same issue, Chrome v 92.0.4515.107

gabriel-peracio · 2021-07-29T20:23:42Z

Same here:

The Profiler tab seems unaffected

Workarounds that don't help:

Reloading the page
Docking the devtools on the side/bottom
Undocking the devtools (a.k.a. open in a window)
Resizing the window
Fiddling with the Expand component tree by default setting
Resizing the right pane of the component tab

gabriel-peracio · 2021-07-29T20:36:16Z

Looks like a CSS issue. I managed to work around it by fiddling with the styles as shown in this video:

hOIhH63WKa.mp4

Besides the css tweaks to make the tree not so squished, the mouse selection issue has to be worked around separately

The nodes are initially selectable with the mouse, but mouse selection breaks permanently if you attempt to use the element picker (I'm guessing it adds pointer-events: none and doesn't remove it?)

Using other methods of selecting nodes (i.e. searching, keyboard, using the owners/rendered by buttons, etc) still work

For anyone curious on how to do what I did in the video:

open the devtools in undocked mode
press ctrl+shift+I - this will open an "inspector inspector"
tweak the properties as shown in the video

kkragoth · 2021-07-29T22:09:28Z

Doesn't seem to occur on mac os for me on extension (both from chrome extension store and running from main branch). Could this be os specific?
Version
4.14.0 (7/16/2021)

dmitry-turing · 2021-07-30T09:33:06Z

reproduces for me on:

MacOS X 10.14
Chrome Version 92.0.4515.107 (Official Build) (x86_64) (latest)
DevTools 4.14.0 (7/16/2021)

gabriel-peracio · 2021-07-30T14:34:21Z

Mine is:

Windows 10 21H1 (OS Build 19043.1110)
Chrome Version 92.0.4515.107 (Official Build) (64-bit)
DevTools version 4.14.0-d0ec283819

If any developer is unable to reproduce, let me know and I can get you whatever you need (a snapshot of the dom, the css ruleset, a memory dump, clientRects of specific nodes, heck even a css fiddle if that's what you need, anything that might help you)

Also I know you guys know this but just in case: what I did in the video is by no means a suggestion of what should be done in order to fix the problem. Randomly changing CSS around without understanding what it does is a good way to introduce more bugs

samuelcolburn · 2021-08-03T16:22:10Z

reproduces for me on:

Windows 10 Pro (10.0.19043 Build 19043)
Edge Version 92.0.902.62 (Official Build) (64-bit) (latest)
DevTools 4.14.0 (7/16/2021)

KasiMaru · 2021-08-04T05:05:18Z

I also have this problem:

MacOS 11.4
Chrome version: Version 92.0.4515.131 (Official Build) (x86_64)
DevTools version: 4.14.0 (7/16/2021)

Sometimes component tree doesn't show at all, have to reload a page. Even after reloading tree is too narrow and clicks are not coming through.

Tried every sane approach to fix (reinstall, reload etc) — nothing helps.

Borvik · 2021-08-06T17:05:21Z

Occurs for me as well:

Ubuntu 20.04.2 LTS
Chrome: 92.0.4515.107 - also occurs on: 92.0.4515.131
DevTools: 4.14.0

While Chrome is affected for me - FireFox continues to work.

jstejada · 2021-08-11T05:11:16Z

Another report in #22065

bvaughn · 2021-08-11T05:12:25Z

I suspect the bug may be caused by this component (which we use in DevTools to auto-expand the Components tree to fill the width and height of the viewport):
https://github.com/bvaughn/react-virtualized-auto-sizer

mbonaci · 2021-08-11T10:14:42Z

Me too.
OSX 10.15.7
Chrome 92.0.4515.131 (the latest)
ReactDevTools: 4.14.0

Interestingly, the issue is not present in Chromium: 91.0.4472.114 (Brave 1.26.67).

bvaughn · 2021-08-11T13:44:26Z

Tanks @mbonaci.

As another data point:

OS X 11.4 (20F71)
Chrome 92.0.4515.131
DevTools (built from HEAD of main)

FWIW I've never seen or been able to reproduce this bug myself (and I use DevTools daily).

Maybe others can share their configurations and we can spot a pattern.

gabriel-peracio · 2021-08-11T16:47:10Z

@ bvaughn

I've never seen this personally.

So you can't reproduce?

Maybe others can share their configurations and we can spot a pattern.

What would be helpful for you to track this down?

simplecommerce · 2021-08-11T17:47:50Z

I have the same issues and also using chrome with latest version 92.0.4515.131 and dev tools version 4.14.0 on windows 10.
Weird thing, is my co-worker with the same versions, it works fine on his end on the same app/site.
So no idea what is causing it to not work on my computer.

bvaughn · 2021-08-11T18:00:18Z

@simplecommerce Could be helpful if you and your coworker could try to further narrow down what the difference is between the two of your setups.

simplecommerce · 2021-08-11T18:43:24Z

@bvaughn I checked with him quickly and we have pretty much the same extensions.
I also did a test in Edge and in Edge it works fine, it only seems to affect my chrome.
I also tried to disable all extensions and even did a complete reset of the chrome settings to default values and cleared all cache.
The problem still persists.
I even thought of disabling hardware acceleration and checked if my settings differed from edge, but no go.

issacgerges · 2021-08-11T18:46:38Z

I have a suspicion at whats going on here. I know react-virtualized ~~shims ResizeObserver~~ has resize detection using scroll event handlers, when it does this, it schedules a requestAnimationFrame to be notified after the layout updates. In this case, if I debug this script, I can see that scheduling any raf in main.html of the devtool will never fire. I suspect a finch trial is being used by the Chromium team to attempt to throttle rAFs in hidden iframes. This experiment looks the most suspicious, these will show as "Default" for everyone unfortunately.

gabriel-peracio · 2021-08-11T18:48:54Z

@issacgerges Awesome work, this pretty much confirms it.

Changing that flag from Default to Disabled solves the issue on my end. Changing it to Enabled makes it happen again

simplecommerce · 2021-08-11T19:06:03Z

Couldn't find the throttle setting mentioned by @issacgerges and where to change it.
But I uninstalled chrome completely and reinstalled it (fresh copy, wiping out all settings) and it fixed it for me.

issacgerges · 2021-08-11T19:27:41Z

Could be worth opening a Chromium ticket, but from similar experience this is likely by design. Maybe they could exclude devtools extensions here?

I think the fact that this is deep in the ~~ResizeObserver polyfill~~ resize detection might make it painful to fix in the short term. Maybe it's best to create a branch off of react-virtualized-auto-sizer thats used for the plugin that removes the raf from the scheduler array

Alternatively it feels like that ~~polyfill~~ detection deserves a naive check around document.visiblityState and preferring setTimeout over requestAnimationFrame when hidden.

bvaughn · 2021-08-11T20:03:13Z

Fantastic find, @issacgerges!

Seems like react-virtualized-auto-sizer could detect this case (no rAF firing by a certain time) and maybe fallback to using a timer or other debounce technique.

issacgerges · 2021-08-12T17:52:06Z

I saw you just picked this up @bvaughn, if you have issues in development I have seen Chromium make timers minute aligned when doing background throttling. It's possible it may do the same in this case. If that's the case I know setImmediate polyfills have a trick with a self postMessage that could be used.

bvaughn · 2021-08-12T17:57:55Z

Thanks for the pointer, @issacgerges. Happen to have a code pointer?

issacgerges · 2021-08-12T18:04:29Z

Sure! Here's the setImmediate strategy I was thinking of
https://github.com/YuzuJS/setImmediate/blob/f1ccbfdf09cb93aadf77c4aa749ea554503b9234/setImmediate.js#L99-L122

and here is a reference to the timer alignment I've seen mentioned (not 100% sure it will apply here)
https://www.chromestatus.com/feature/4718288976216064

bvaughn · 2021-08-12T18:05:51Z

Super helpful. Thanks!

bvaughn · 2021-08-12T18:56:14Z

I'm overlooking some important detail here.

Enabling/disabling the "Throttle non-visible cross-origin iframes" flag does indeed trigger/fix the bug, but even when this is disabled– animation frames still get called based on my testing, unlike what @issacgerges reported above:

In this case, if I debug this script, I can see that scheduling any raf in main.html of the devtool will never fire.

(So my idea to detect this case and fallback to a timeout doesn't work.)

That being said, just replacing requestAnimationFrame with setTimeout (and not trying to detect support) fixes the broken behavior.

issacgerges · 2021-08-12T18:57:49Z

@bvaughn ah interesting. Just to validate are you registering those requestAnimationFrame callbacks from the context of main.html or panel.html. I believe they will only fail to fire from main.html (which is the hidden iframe)

bvaughn · 2021-08-12T19:17:44Z

@issacgerges I added logging to the feature detection code I wrote (which runs in the same context as the detectElementResize script).

Chrome's new "Throttle non-visible cross-origin iframes" flag causes problems for code running inside of hidden iframes. In this case, animation frames get scheduled without any error but never get called. This causes problems for the React DevTools browser extension specifically. This commit adds a workaround by scheduling a backup timeout along with animation frames. In the normal case, these timeout will be cancelled by the animation frame (which will run first). For more info, see facebook/react#21986

bvaughn · 2021-08-13T00:18:07Z

Fixed it by adding a fallback timeout when rAF is used ☹️ Doesn't feel great but...

bvaughn/react-virtualized-auto-sizer#39

bvaughn · 2021-08-13T00:32:03Z

Thanks a ton for the info @issacgerges and @gabriel-peracio

bvaughn · 2021-08-13T00:43:43Z

This fix has landed. We'll probably release it next week because we're also waiting on another bugfix to unblock the Firefox release.

bvaughn · 2021-08-20T22:56:27Z

Related CR bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1241986

Chrome's new "Throttle non-visible cross-origin iframes" flag causes problems for code running inside of hidden iframes. In this case, animation frames get scheduled without any error but never get called. This causes problems for the React DevTools browser extension specifically. This commit adds a workaround by scheduling a backup timeout along with animation frames. In the normal case, these timeout will be cancelled by the animation frame (which will run first). For more info, see facebook/react#21986

subnomo added Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug labels Jul 29, 2021

This was referenced Aug 11, 2021

[DevTools Bug]: React Devtools on Firefox initially shows an empty (blank) component tree #22034

Open

[DevTools Bug]: #22065

Closed

bvaughn added good first issue and removed good first issue labels Aug 12, 2021

bvaughn self-assigned this Aug 12, 2021

bvaughn mentioned this issue Aug 13, 2021

Fixed rAF throttling issue caused by new Chrome flag bvaughn/react-virtualized-auto-sizer#39

Merged

bvaughn mentioned this issue Aug 13, 2021

Fixed Components tree indentation bug for Chrome extension #22083

Merged

bvaughn closed this as completed in #22083 Aug 13, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevTools Bug]: Component tree size too small, components can't be selected #21986

[DevTools Bug]: Component tree size too small, components can't be selected #21986

subnomo commented Jul 29, 2021

lilbumblebear commented Jul 29, 2021

gabriel-peracio commented Jul 29, 2021

gabriel-peracio commented Jul 29, 2021 •

edited

Loading

kkragoth commented Jul 29, 2021 •

edited

Loading

dmitry-turing commented Jul 30, 2021

gabriel-peracio commented Jul 30, 2021 •

edited

Loading

samuelcolburn commented Aug 3, 2021

KasiMaru commented Aug 4, 2021

Borvik commented Aug 6, 2021 •

edited

Loading

jstejada commented Aug 11, 2021

bvaughn commented Aug 11, 2021

mbonaci commented Aug 11, 2021 •

edited

Loading

bvaughn commented Aug 11, 2021 •

edited

Loading

gabriel-peracio commented Aug 11, 2021

simplecommerce commented Aug 11, 2021

bvaughn commented Aug 11, 2021

simplecommerce commented Aug 11, 2021

issacgerges commented Aug 11, 2021 •

edited

Loading

gabriel-peracio commented Aug 11, 2021 •

edited

Loading

simplecommerce commented Aug 11, 2021

issacgerges commented Aug 11, 2021 •

edited

Loading

bvaughn commented Aug 11, 2021

issacgerges commented Aug 12, 2021 •

edited

Loading

bvaughn commented Aug 12, 2021

issacgerges commented Aug 12, 2021

bvaughn commented Aug 12, 2021

bvaughn commented Aug 12, 2021

issacgerges commented Aug 12, 2021

bvaughn commented Aug 12, 2021

bvaughn commented Aug 13, 2021

bvaughn commented Aug 13, 2021

bvaughn commented Aug 13, 2021

bvaughn commented Aug 20, 2021

[DevTools Bug]: Component tree size too small, components can't be selected #21986

[DevTools Bug]: Component tree size too small, components can't be selected #21986

Comments

subnomo commented Jul 29, 2021

Website or app

Repro steps

How often does this bug happen?

DevTools package (automated)

DevTools version (automated)

Error message (automated)

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

lilbumblebear commented Jul 29, 2021

gabriel-peracio commented Jul 29, 2021

gabriel-peracio commented Jul 29, 2021 • edited Loading

kkragoth commented Jul 29, 2021 • edited Loading

dmitry-turing commented Jul 30, 2021

gabriel-peracio commented Jul 30, 2021 • edited Loading

samuelcolburn commented Aug 3, 2021

KasiMaru commented Aug 4, 2021

Borvik commented Aug 6, 2021 • edited Loading

jstejada commented Aug 11, 2021

bvaughn commented Aug 11, 2021

mbonaci commented Aug 11, 2021 • edited Loading

bvaughn commented Aug 11, 2021 • edited Loading

gabriel-peracio commented Aug 11, 2021

simplecommerce commented Aug 11, 2021

bvaughn commented Aug 11, 2021

simplecommerce commented Aug 11, 2021

issacgerges commented Aug 11, 2021 • edited Loading

gabriel-peracio commented Aug 11, 2021 • edited Loading

simplecommerce commented Aug 11, 2021

issacgerges commented Aug 11, 2021 • edited Loading

bvaughn commented Aug 11, 2021

issacgerges commented Aug 12, 2021 • edited Loading

bvaughn commented Aug 12, 2021

issacgerges commented Aug 12, 2021

bvaughn commented Aug 12, 2021

bvaughn commented Aug 12, 2021

issacgerges commented Aug 12, 2021

bvaughn commented Aug 12, 2021

bvaughn commented Aug 13, 2021

bvaughn commented Aug 13, 2021

bvaughn commented Aug 13, 2021

bvaughn commented Aug 20, 2021

gabriel-peracio commented Jul 29, 2021 •

edited

Loading

kkragoth commented Jul 29, 2021 •

edited

Loading

gabriel-peracio commented Jul 30, 2021 •

edited

Loading

Borvik commented Aug 6, 2021 •

edited

Loading

mbonaci commented Aug 11, 2021 •

edited

Loading

bvaughn commented Aug 11, 2021 •

edited

Loading

issacgerges commented Aug 11, 2021 •

edited

Loading

gabriel-peracio commented Aug 11, 2021 •

edited

Loading

issacgerges commented Aug 11, 2021 •

edited

Loading

issacgerges commented Aug 12, 2021 •

edited

Loading