[DevTools Bug]: Components Tab does not show up

[antonisprovidakis]

Website or app

https://beta.reactjs.org/

Repro steps

1. Visit website
2. Open dev tools

This happens on https://beta.reactjs.org/ but I first noticed in on a personal project (localhost).

When I open the dev tools, the CPU goes up. At first, the Components tab does not show up. After a loooooong time, it does show up, however when I click on it nothing renders inside.

I don't know if it's the newest Chrome version or the newest extension version that's causing it.

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

[antonisprovidakis]

On my personal project, after a long time waiting the Components tab did show up. I clicked on it, and after a while this renders:

[antonisprovidakis]

Some times this show up too:

error: Loading React Element Tree...

If this seems stuck, please follow the [troubleshooting instructions]

[mondaychen]

I'm not able to reproduce this issue. Can you let me know which Chrome and DevTools version you are using?
Also, you can try restart Chrome, or try disable other Chrome extensions and see if the issue still exists.

[antonisprovidakis]

Sure!

Chrome: Version 108.0.5359.94 (Official Build) (x86_64)
DevTools: 4.27.0 (11/28/2022)

Btw, I have already done what to mention but no luck.

[antonisprovidakis]

I found a workaround to "force" the dev tools to load. Please see below:

dev_tools_issue.mp4

[mondaychen]

@antonisprovidakis That's interesting... It seems to be related to how Chrome launch service worker. I'll look into this and see if I can find a way to reproduce it.

[SmoothJM]

I cannot click service work link. It does not show a new window : (
and that shows like: service work (invalid)

[afterwind-io]

Still not functional with:

Chrome: Version 108.0.5359.124 (Official Build) (x86_64)
DevTools: 4.27.1 (12/6/2022)

And for anyone who encountered the same problem, I found a somewhat "stable" workaround:

• (Optional) Fix the react devtool icon to the toolbar;
• Open the page;
• Open the devtool;
• If react devtool tab does not show up, click the extension icon, then the devtool tab should show up now;
• Click the "Components" tab;
• If the tab says "loading blah blah", close the inspector first and open it again. The devtool tab should be blank now;
• If the tab is blank, click the extension icon multiple times until something shows up, and the devtool should be seemingly working now, but with high CPU consumption.

Now it's the important part:

• Open chrome://inspect/#service-workers in a new browser tab;
• If all is "working" now, you should see two react devtool service worker running here(chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/background.js );
• Swiftly terminate BOTH one;
• Back to the page you just opened. Leave the inspector open, and the react devtool tab open and active(Important!);
• Refresh the page;
• If all is done right, the react devtool should work normally. You can open Chrome's task manager and check whether there is only one service worker running at the moment (And that is actually what above operations are all about).

So what I suspect is that due to unknown reason, the react devtool service worker instanciates twice, which causes all those problems. I hope this can help out finding the issue, cause the problem is REALLY annoying.

[tassoevan]

@afterwind-io I followed the instructions, but nothing happened. Then, instead of terminating those pesky service workers, I hit "Inspect", ignored the "disconnected" message and read at console something about "Update on reload" option for service workers... I proceeded to Application > Service Workers and unchecked "Update on reload". So far it's working again, but I'm not 100% sure I've stumble on the right issue.