[DevTools] Allow inspection before streaming has finished in Chrome #34360
Conversation
github-actions
bot
added
the
React Core Team
|
Comparing: ba6590d...591a55f Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
| world: chrome.scripting.ExecutionWorld.ISOLATED, | ||
| }, | ||
| { | ||
| id: '@react-devtools/file-fetcher', | ||
| js: ['build/fileFetcher.js'], | ||
| matches: ['<all_urls>'], | ||
| persistAcrossSessions: true, | ||
| runAt: 'document_end', |
There was a problem hiding this comment.
file-fetcher script is probably best to keep initialized at document_end, no real need for it this early
There was a problem hiding this comment.
Doesn't that keep symbolication in a suspended state while we're still streaming in content?
There was a problem hiding this comment.
Yes, but only as a last-resort option. The browser extension is using browser extensions API first to get resources from the page and only then falls back to the fetch call. To be fair, I am not even sure this still works, we are just relying that the resource is still cached somewhere in fetch implementation.
|
Could you also please test navigation between multiple pages while having DevTools open, incl. bfcache entries? |
older chrome might also be an issue. pagereveal is fairly new so we treat inspecting while streaming as progressive enhancement.
eps1lon
force-pushed
the
sebbie/09-01-_devtools_allow_inspection_before_streaming_has_finished
branch
from
445f6d6 to
591a55f
Compare
eps1lon
deleted the
sebbie/09-01-_devtools_allow_inspection_before_streaming_has_finished
branch
Apps streaming in server-rendered content will have hydrated content before the document is in an idle state. This means content may be interactive before
document_endis reached orpageshowevents are fired. However, the React tree may already be interesting to inspect. Especially larger apps in development can easily take multiple seconds before everything has streamed in.React DevTools used to not display a Component tree before streaming had finished.
We need to start executing multiple things earlier to be able to inspect the React app as early as possible:
proxy.jswhich sends setup instructions to the backend manager is now executed atdocument_start(did the same to the file-fetcher for when you start inspecting elements before everything has streamed in)pagerevealas well aspageshow.pageshowonly fires when everything has loaded on initial load.pagerevealis not implemented in Firefox just yet.Once Firefox implements
pagereveal, you'll be able to inspect the tree before loading has finished.Test plan
soft navs, hard navs and backwards/forwards cache in Chrome and Firefox
Chrome manual testing
CleanShot.2025-09-04.at.11.33.09.mp4
Firefox manual testing
CleanShot.2025-09-04.at.11.27.17.mp4