如何在VSCode中调试配置了webpack HMR的NestJS应用

解决方案 #

你遇到的断点无法命中问题基本由路径映射或源映射配置错误导致，按以下步骤逐一修正即可：

1. 修正VSCode launch.json 配置 #

你当前配置里的localRoot字段填写错误，该字段指向本地源码根目录而非编译输出目录，调整后完整配置参考：

{
  "name": "Attach",
  "request": "attach",
  "type": "node",
  "restart": true,
  "sourceMaps": true,
  "internalConsoleOptions": "neverOpen",
  // 修正为源码根目录
  "localRoot": "${workspaceFolder}",
  "port": 9229, // 显式指定和webpack配置一致的调试端口
  "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "<node_internals>/**/*.js"
  ],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "autoAttachChildProcesses": true,
  // 新增路径映射规则，解决webpack打包后的路径匹配问题
  "sourceMapPathOverrides": {
    "webpack:///./src/*": "${workspaceFolder}/src/*",
    "webpack:///src/*": "${workspaceFolder}/src/*",
    "webpack:///*": "*"
  }
}

2. 检查tsconfig基础配置 #

确保你的tsconfig.json的compilerOptions中开启了源映射生成：

{
  "compilerOptions": {
    // 必须开启
    "sourceMap": true,
    "inlineSources": true,
    // 其余原有配置保持不变
  }
}

3. 调整Webpack HMR配置 #

• 首先确认你配置文件名的拼写是否正确（你写的webpack-hmt.config.json是笔误，实际应为.js后缀的webpack-hmr.config.js），避免启动时加载错误配置导致调试参数不生效
• 将配置中的devtool: 'inline-source-map'改为devtool: 'source-map'，独立生成的source map文件VSCode识别兼容性更好，inline模式在HMR场景下容易出现映射错位

4. 验证启动命令 #

必须使用webpack watch模式启动应用，命令参考：

nest build --webpack --webpackPath webpack-hmr.config.js --watch

等应用启动完成后再启动VSCode的attach调试，此时断点即可正常命中。

排查技巧 #

如果修改后依然无法命中，可以先临时注释掉Webpack配置里的HotModuleReplacementPlugin相关代码，跑普通编译调试，如果此时断点正常，说明是HMR相关的路径映射问题，再逐步还原HMR配置定位问题点。

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