Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Issues
  • #13060
Closed
Open
Issue created Mar 13, 2023 by John Twigg@john-twigg-ck

Launching/Reloading Chrome debugger with a Breakpoint hangs

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

  1. npx create-react-app test-debug
  2. npm i
  3. To the App.js I added a button to simplify breakpoint invocation.
        <button onClick={() => {
          console.log("you clicked")
        }}>Click Me</button>
  1. Ensure no breakpoints are enabled
  2. Run npm run start to launch with react-scripts start
  3. 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** 7. Verify reloading the page worked in the debugging browser. ** The CRA launch page should load normally in the debug Chrome browser** 9. Add a breakpoint on the console.log("you clicked") 10. 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.

image

Reproducible demo

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

Assignee
Assign to
Time tracking