VSCode 在运行 webpack-dev-server 上调试，跳过断点

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

如果这是原因，我不是 100%，但我写在这里希望它可以帮助其他人。我只是把上面的配置里的devtool改成了"inline-source-map"而不是source map，其他没改，现在可以正常使用了，我放断点的地方就断了。

Answer 2

我在使用 create-react-app 时遇到了同样的问题。在 webpack.config.js 中（弹出后）我更改了 devtool: isEnvProduction?应该使用源映射吗？ "inline-source-map" 而不是 "source-map"，现在我的断点不断命中！

感谢提示！

VSCode 在运行 webpack-dev-server 上调试，跳过断点

VSCode debugging on running webpack-dev-server, skips breakpoints

reactjs

webpack

webpack-dev-server

visual-studio-code

vscode-debugger

VSCode 在 运行 webpack-dev-server 上调试，跳过断点

VSCode debugging on running webpack-dev-server, skips breakpoints

reactjs

webpack

webpack-dev-server

visual-studio-code

vscode-debugger

VSCode 在运行 webpack-dev-server 上调试，跳过断点