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

[subnomo]

Website or app

https://reactjs.org/

Repro steps

1. Visit reactjs.org
2. Open devtools
3. 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]

Same issue, Chrome v 92.0.4515.107

[gabriel-peracio]

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]

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:

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

[kkragoth]

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]

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]

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]

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]

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]

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]

Another report in #22065