通过create-react-app创建的项目，chrome中断点无法进入的解决方法

问题描述：

开发环境为，Ubuntu18，node10.16，npm6.9。

通过react官方文档介绍，运行以下命令创建自己的项目my-app。

npx create-react-app my-app

在通过chrome进行断点调试时，出现一个问题，页面首次加载进来时，断点是可以进来，但是页面热更新后，断点就进不来了。通过查看控制台首次加载时，所打断点的文件显示是source mapped from main.chunk.js,热更新后是显示source mapped from main.xxx.hot-update.js，这个时候断点进不来了。

解决方法：

方法一：

谈过在需要断点停顿的地方加上debugger，这个时候热更新后，断点是可以进来的。

handleClick() {
    debugger
    this.setState(state => ({
        isToggleOn: !state.isToggleOn
    }))
}

方法二：

运行以下命令：

npm install react-app-rewired -D

在项目根目录下面新建文件config-overrides.js,将以下内容复制进去。

module.exports = function override(config, env) {
  if (env !== 'production') {
    config = { ...config, ...{ devtool: 'cheap-module-eval-source-map' } };
  }
  return config;
}

将package.json中scripts中的启动命令改为如下：

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

然后在终端中直接执行以下命令：

npm start

此时热更新后，在chrome中断点无法进入的问题即可解决。希望对你遇到的问题有所帮助，如有不足还望指正。