reactjs - 运行 webpack-dev-server 时的 VSCode 调试，跳过断点

Question

我安装了 chrome 扩展调试器。我使用

运行我的应用程序

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

我正在运行一个 React 应用程序，所有源代码都在/src 文件夹下。我有 js、ts 和 tsx 文件。当我在渲染函数上放置断点时，编辑器会正确地中断执行，但是当我在按钮的 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/*"
  }
}

我错过了什么？

Answer 1

我通过在我的配置文件中使用 inline-source-map 让它工作:

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

现在它可以正常工作并在我放置断点的任何地方中断。