[DevTools Bug]: Chrome extension gets disconnected from the page after 30sec of inactivity

[jimousse]

Website or app

https://react.dev/

Repro steps

Steps:

1. go to a react page like https://react.dev/
2. open the devtools Components tab, everything works correctly.
3. change tab (a non react one) and wait 30 sec - 5 min (not super exact)
4. go back to the tab that has the react page you're debugging
5. the Components does not work anywore: you can't select and view components on the page.

My guess is that it's related to Chrome killing the service worker after inactivity on the page. See https://bugs.chromium.org/p/chromium/issues/detail?id=1152255#c185

Going back to the page doesn't seem to wake the serviceworker up.

Chrome: Version 114.0.5735.198 (Official Build) (x86_64)
React Extension: 4.28.0
macOS: 13.4.1

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

[bharathkalyans]

Or could it be that some extensions are causing this issue?

[jimousse]

Google made some changes on the lifetime of a service worker since Chrome 110: https://developer.chrome.com/docs/extensions/whatsnew/#m110-sw-idle
It seems to me that the extension is not prepared to deal with an inactive service worker.

[MrWangJustToDo]

🙏

[iwanderer]

Yes, me too..

[hoxyq]

React DevTools extension v4.28.4 has been recently released in Chrome Web store. This version includes various fixes to port and service worker management, so this issue should no longer be reproducible.

Any feedback is much appreciated.