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

The issue is being tracked 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!

Enjoyed this article? Follow me on Twitter

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.