如何使用Webpack在Chrome中调试应用？断点失效问题求助

我已经查阅过Stack Overflow相关问题但没找到有效方案，当前使用的launch.json配置如下：

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome Debugger",
  "port": 9222,
  "url": "http://localhost:3000",
  "webRoot": "${workspaceRoot}/src",
  "sourceMaps": true,
  "timeout": 15000,
  "trace":"verbose"
}

针对Webpack在Chrome中调试时断点被忽略的问题，可尝试以下排查和修复步骤：

1. 核对Webpack的Source Map配置 #

Webpack生成的source map格式直接影响断点映射，开发环境优先用eval-source-map（实时性好），测试环境用source-map（映射更准确），避免用cheap-module-source-map这类简化版：

module.exports = {
  // 其他配置...
  devtool: 'eval-source-map',
};

2. 修正launch.json的路径配置 #

新版VS Code已用${workspaceFolder}替代${workspaceRoot}，同时可添加pathMapping明确源码与打包后资源的映射关系：

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome Debugger",
  "port": 9222,
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "timeout": 15000,
  "trace":"verbose",
  "pathMapping": {
    "/": "${workspaceFolder}/src"
  }
}

3. 清理Chrome缓存 #

打开Chrome DevTools（F12），点击右上角齿轮图标进入设置，勾选Disable cache (while DevTools is open)，然后重启调试会话，同时清理项目的dist/build目录后重新打包。

4. 检查断点位置合理性 #

• 不要在被Webpack tree-shaking移除的代码行打断点，确保断点在实际执行的逻辑代码上；
• 框架项目（如React）避免在JSX语法糖行打断点，优先选择函数内部、变量定义等逻辑行。

5. 验证Source Map是否正常加载 #

打开Chrome DevTools的Sources面板，查看webpack://目录下是否能找到你的源码文件。如果看不到，检查Webpack的output配置是否正确生成了source map文件：

module.exports = {
  output: {
    // 其他配置...
    sourceMapFilename: '[name].js.map'
  }
};

6. 关闭开发环境的代码压缩 #

开发环境开启代码压缩（minify）会打乱行号，导致断点失效，确保Webpack配置中关闭压缩：

module.exports = {
  optimization: {
    minimize: false, // 开发环境设为false
  }
};

内容的提问来源于stack exchange，提问作者Ruslan