Bug: "React Developer Tools" Chrome Extension unable to profile page rendering

Open SomervilleTom opened this issue 1 year ago • 0 comments

I'm unable to profile the rendering of a page in a Chrome browser launched from Visual Studio Code ("VSC"). I think I'm using the most recent stable versions of Chrome and the "React Developer Tools" extension.

I'm attaching screenshots to help explain the behavior I'm seeing.

The page I'm rendering takes less than a second to render in "production" mode (created by "yarn build") and more than 90 seconds to render when launched from VSC. I want to profile the development version in hopes of finding a workaround to whatever is causing this 100x slowdown.

Here is what I'm seeing:

Wait until the page renders ("Rendered page")
Open Profiler tab in Chrome Developer Tools ("Initial Profiler tab")
Click the "record" button ("Profiling in progress")
Enter "CNTRL r" to cause a reload. The developer tools is stuck on the "Sources" tab and flashes uncontrollably, apparently as source files are loaded ("Flashing while re-rendering").
Wait until the page renders. Note the console errors at the bottom ("Stable after re-rendering completes, two console complaints")
Attempt to open the "Profiler" tab -- it now says "Profiling not supported" ("Profiler tab now says "Profiling not supported"")

I note that the complaint in the final screenshot references a very old version of React (16.5+). Its embedded link goes to an old and stale React documentation page.

React version: "^18.2.0" React DeveloperTools version: b566064da on 4/15/2024

Screenshots follow:

Rendered page