Launching/Reloading Chrome debugger with a Breakpoint hangs

john-twigg-ck commented 1 year ago

Describe the bug

The chrome debugger will hang when launched with react-scripts start when there is a breakpoint enabled

Launching with no breakpoints enabled will succeed, however when a breakpoint is hit, subsequent Reload's of the page will cause the browser load to hang. There's no console output.

Did you try recovering your dependencies?

No applicable

Which terms did you search for in User Guide?

chrome, breakpoint, hang

Environment

Environment Info:

  current version of create-react-app: 5.0.1
  running from /Users/john.twigg/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 13.2
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
    npm: 7.24.2 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Edge: Not Found
    Firefox: 110.0.1
    Safari: 16.3
  npmPackages:
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-scripts: 5.0.1 => 5.0.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Very easy repro stepss

npx create-react-app test-debug
npm i

To the App.js I added a button to simplify breakpoint invocation.

    <button onClick={() => {
      console.log("you clicked")
    }}>Click Me</button>

Ensure no breakpoints are enabled
Run npm run start to launch with react-scripts start
Launch a VS Code's Debug configuration to launch chrome debugger

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }

The CRA launch page should load normally in the debug Chrome browser

Verify reloading the page worked in the debugging browser. The CRA launch page should load normally in the debug Chrome browser
Add a breakpoint on the console.log("you clicked")
Reload the page The page will hang when trying to reload

NOTE: Removing the breakpoint now does nothing. The session is corrupted. NOTE: Variations are to launch with a breakpoint enabled, and it hangs as well. NOTE: Verified on 2 mutually exclusive computer setups.

Expected behavior

Reloading debugger with a breakpoint enabled should not hang the debugging session. Especially when the breakpoint is not likely hit, like in a click handler.
Reloading with a breakpoint on launch should invoke the breakpoint.

Actual behavior

Hangs and spins indefinitely.

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

s-t-x commented 1 year ago

I have got exactly the same issue on an existing project. Windows 10, on either Node 16.15.0 or 18.15.0, with a single breakpoint not possibly reachable during reload.

BinarySpike commented 1 year ago

I'm getting this bug on a custom asp.net application and a vanilla create-vite. Both using vscode, with "debugWithChrome" in the launch.json Starting about 2 weeks ago. May be a chrome issue?

See https://stackoverflow.com/questions/75740738/chrome-hangs-when-debugging-in-visual-studio-2022

Looks like it's fixed or a fix is incoming.

facebook / create-react-app