Chrome debugger breakpoints not working with create-react-app

A few days ago I came across a weird issue with my Chrome debugger when I was working on my ReactJS application created using create-react-app(3.4.1) and I did some logical error so as always I kept a breakpoint at the line of suspicion to check the issue and kept updating the code as the server was running. For some reason, the debugger was not pausing at the breakpoint. I went around searching the internet to find if any other person has faced a similar issue or it was just me.

I found an open issue in create-react-app with the Chrome debugger breakpoints https://github.com/facebook/create-react-app/issues/6074. A fix was released but later reverted due to an issue with Webpack.

One suggested workaround is to add --no-cache in your package.json which worked for me

From

"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"
}

If this does not work for you, you can try other suggestions under the issue in the GitHub.

From the ongoing discussion it seems like we will have to wait for a while for the issue to be fixed.

Comments

[Ulises Castro]

For my case I just have to add the following property to my launch's configuration.

"sourceMapPathOverrides": {
  "webpack:///src/*": "${webRoot}/*"
}

[Parthiban]

Good sharing and got insight, I would suggest you to keep posting like this interesting stories.

[realraif]

Brilliant! Thank you :)