Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DevTools Bug]: Components Tab does not show up #25806

Closed
antonisprovidakis opened this issue Dec 5, 2022 · 11 comments
Closed

[DevTools Bug]: Components Tab does not show up #25806

antonisprovidakis opened this issue Dec 5, 2022 · 11 comments
Labels
Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug

Comments

@antonisprovidakis
Copy link

antonisprovidakis commented Dec 5, 2022 •
edited

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.

Screenshot 2022-12-05 at 12 42 04

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 antonisprovidakis added Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug labels Dec 5, 2022
@antonisprovidakis
Copy link
Author

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:

Screenshot 2022-12-05 at 12 49 36

@antonisprovidakis
Copy link
Author

antonisprovidakis commented Dec 5, 2022 •
edited

Some times this show up too:

error: Loading React Element Tree...

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

@mondaychen
Copy link
Contributor

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
Copy link
Author

antonisprovidakis commented Dec 5, 2022 •
edited

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
Copy link
Author

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

dev_tools_issue.mp4

@mondaychen
Copy link
Contributor

@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
Copy link

SmoothJM commented Dec 7, 2022

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

@afterwind-io
Copy link

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
Copy link

@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.

@mondaychen mondaychen mentioned this issue Jan 27, 2023
Merged
mondaychen added a commit that referenced this issue Feb 7, 2023
@mondaychen
[DevTools] improve error handling in extension (#26068)
c12194f 
## Summary

This is to fix some edge cases I recently observed when developing and
using the extension:
- When you reload the page, there's a chance that a port (most likely
the devtools one) is not properly unloaded. In this case, the React
DevTools will stop working unless you create a new tab.
- For unknown reasons, Chrome sometimes spins up two service worker
processes. In this case, an error will be thrown "duplicate ID when
registering content script" and sometimes interrupt the execution of the
rest of service worker.

This is an attempt to make the logic more robust 
- Automatically shutting down the double pipe if the message fails, and
allowing the runtime to rebuild the double pipe.
- Log the error message so Chrome believes we've handled it and will not
interrupt the execution.

This also seems to be helpful in fixing #25806.
github-actions bot pushed a commit that referenced this issue Feb 7, 2023
@mondaychen
[DevTools] improve error handling in extension (#26068)
c2b52ad 
## Summary

This is to fix some edge cases I recently observed when developing and
using the extension:
- When you reload the page, there's a chance that a port (most likely
the devtools one) is not properly unloaded. In this case, the React
DevTools will stop working unless you create a new tab.
- For unknown reasons, Chrome sometimes spins up two service worker
processes. In this case, an error will be thrown "duplicate ID when
registering content script" and sometimes interrupt the execution of the
rest of service worker.

This is an attempt to make the logic more robust
- Automatically shutting down the double pipe if the message fails, and
allowing the runtime to rebuild the double pipe.
- Log the error message so Chrome believes we've handled it and will not
interrupt the execution.

This also seems to be helpful in fixing #25806.

DiffTrain build for [c12194f](c12194f)
[View git log for this commit](https://github.com/facebook/react/commits/c12194f7485f298fadc1e51cfffb93e63d61ad96)
@mondaychen
Copy link
Contributor

Hi everyone. While I was never able to reproduce the issue you were experiencing, I did patch a few places that might have caused this issue. Does the new version (4.27.2) improve things for you?

@tassoevan
Copy link

@mondaychen So far so good.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@mondaychen @tassoevan @afterwind-io @SmoothJM @antonisprovidakis and others