使用VSCode调试运行中的webpack-dev-server时，断点被跳过。

Question

我已经安装了Chrome扩展程序调试器。我使用它来运行我的应用程序。

webpack-dev-server -d --config webpack.dev.js --inline

我正在运行一个React应用程序，所有源代码都在/src文件夹下。我有js、ts和tsx文件。当我在render函数上设置断点时，编辑器会正确地中断执行，但是当我在按钮的onClick事件上设置断点时，它不会中断，而是继续执行代码。

我的webpack配置相关部分如下：

  mode: 'development',
  devtool: 'source-map',
  entry: {
    bundle: [
      '@babel/polyfill',
      'react-hot-loader/patch',
      `webpack-dev-server/client?http://${host}:${devPort}`,
      'webpack/hot/only-dev-server',
      path.resolve(__dirname, 'src/index.js'),
    ],
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
    filename: '[name].[hash:16].js',
    chunkFilename: '[id].[hash:16].js',
  },
  devServer: {
    inline: true,
    port: devPort,
    contentBase: path.resolve(__dirname, 'public'),
    hot: true,
    writeToDisk: true,
    publicPath: '/',
    historyApiFallback: true,
    host,
  }

我的launch.json如下：

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:///./src/*.js": "${workspaceRoot}/src/*.js",
    "webpack:///./src/*.tsx": "${workspaceRoot}/src/*.tsx",
    "webpack:///./src/*.ts": "${workspaceRoot}/src/*.ts",
    "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*"
  }
}

我错过了什么？

- Ahmet Cetin

Answer 1

我通过在我的配置文件中使用inline-source-map来使其正常工作：

{
    devtool: 'inline-source-map',
    // ....
}

现在它正常工作并且无论我把断点放在哪里都会中断。

- Ahmet Cetin

Answer 2

我在使用create-react-app时遇到了同样的问题。在弹出后的webpack.config.js中，我将devtool:从"source-map"改为"isEnvProduction? shouldUseSourceMap ? "inline-source-map"，现在我的断点不断命中！

感谢您的提示！

- Angelo

Answer 3

另一个简单的解决方法是在launch.json中添加此配置，并在运行下面的调试器之前运行您的项目。

所以在这个配置中会打开一个新的Chrome窗口，显示您指定的url。

{
  "name": "Chrome",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceRoot}/src",
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
},

希望这对你有所帮助！

- Ali Hussnain - alichampion