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

[SomervilleTom]

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:

1. Wait until the page renders ("Rendered page")
2. Open Profiler tab in Chrome Developer Tools ("Initial Profiler tab")
3. Click the "record" button ("Profiling in progress")
4. 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").
5. Wait until the page renders. Note the console errors at the bottom ("Stable after re-rendering completes, two console complaints")
6. 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: b566064 on 4/15/2024

Screenshots follow:

Rendered page

Initial Profiler tab

Profiling in progress

Flashing while re-rendering

**Stable after re-rendering completes, two console complaints"

Profiler tab now says "Profiling not supported"

Steps To Reproduce

See above

Link to code example:

Too hard to create, see screenshots above

The current behavior

See screenshots above

The expected behavior

I expect to see a profile report