[DevTools] Components tab goes blank with React 16.8.0

[abelardolg]

React version: 16.8.0

Steps To Reproduce

Install react 16.8.0

1. Build a hello world with any component
2. Open React Dev Tools.
3. Choose components tab.
4. Nothing will be seen.

Link to code example:

The current behavior

Tab "Component" is blank

The expected behavior

Tab "Component" should show React components

FYI: I installed Material UI library.
Chrome: Versión 86.0.4240.183 (Build oficial) (64 bits) Ubuntu 18.04.
Tested today.
Versión
4.10.0 (11/12/2020)
Actualizado
13 de noviembre de 2020

[brettgoulder]

I am unable to reproduce this bug unfortunately.

[abelardolg]

Hi @brettgoulder ,

Are you using Google Chrome for Ubuntu with the version I specified?
I will upload a screenshot to document this issue.

Best regards.

[brettgoulder]

@abelardolg yes, I just checked and I still can't confirm it on 18.04. Here's a screenshot:

Here's the URL for the test app: https://mzfm7.csb.app/ and code: https://codesandbox.io/s/lucid-franklin-mzfm7

[zachwright]

I'm also experiencing this issue. My app is running on localhost without errors, but the Components tab is blank.

Is there a way to view the error logs of the React Dev Tools to see if RDT is failing somehow even if my app isn't complaining?

Versions

• Chrome: 88.0.4324.182 (Official Build) (64-bit)
• React Dev Tools: 4.10.1 (12/4/2020)
• React Version: 16.8.6

[seyofori]

also been experiencing this issue for a few days now. It's gotten to the point where there's a bug I'm struggling to figure out without the devtools, so I'm resorting to thsi

[bvaughn]

Is there a way to view the error logs of the React Dev Tools to see if RDT is failing somehow even if my app isn't complaining?

Yes:

1. Undock the developer tools from the main window
2. Open a second set of developer tools (View > Developer > Developer Tools)

undock-devtools-Kapture.2021-03-08.at.09.52.02.mp4

[flying-sheep]

User with firefox here. I get this too.

Following @bvaughn’s instructions, I just get Attempt to postMessage on disconnected port in the console multiple times per second. Using the browser dev tools, when I try to finds the frame with the extension, I get to chrome://browser/content/webext-panels.xhtml. That contains a <stack id=webext-panels-stack><browser id=webext-panels-browser>...</browser></stack>.

When I instead go through about:debugging and click Inspect next to the extension, I can indeed inspect panel.html. There’s no errors, there is just a width: 0, height: 0 empty div where content should be. I see a warning about some cookie being outdated every second though.