Currently there’s a bug in recent versions of create-react-app where debug breakpoints aren’t working in Chrome.

The issue is currently worked in here: https://github.com/facebook/create-react-app/issues/6074

In the meantime, you can get breakpoints working again via adding a --no-cache flag to your start script.

In your package.json, change:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

To:

  "scripts": {
    "start": "react-scripts start --no-cache",
    "build": "react-scripts build",
    "test": "react-scripts test --no-cache",
    "eject": "react-scripts eject"
  },

More info here: Chrome debugger breakpoints fail with react-scripts 2.x after hot-update (Github)

And here, where the --no-cache flag is suggested, and Dan Abramov says the fix makes no sense to him: create-react-app test debug not stopping at breakpoint (Github)

Thanks for reading!

Any questions, feedback, or anything that you think I’d be interested in? Please leave a comment below, or get in touch with me directly.