使用VSCode调试Angular5应用：断点被忽略问题

我之前在调试Angular 5项目时也踩过一模一样的坑——断点直接被忽略，弹出「Breakpoint ignored because generated code not found (source map problem?)」的提示，结合你给出的.scripts输出（webpack内部路径和本地路径映射异常），大概率是source map的路径匹配或者生成配置出了问题，给你几个亲测有效的解决步骤：

1. 确认Angular的Source Map生成配置 #

Angular 5一般用angular-cli构建，先检查你的配置文件（旧版本是.angular-cli.json，新版本可能是angular.json）里的source map开关是否完全开启：

// .angular-cli.json 示例配置
"defaults": {
  "build": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    }
  }
}

如果是自定义webpack配置，要确保devtool设置为适合调试的值，比如eval-source-map或者source-map，别用eval（会导致source map信息丢失，断点无法映射）。

2. 修正VSCode launch.json的路径映射 #

从你的.scripts输出能看到，webpack把本地路径解析成了webpack:\src\styles.css这种带重复前缀的格式，需要在launch.json里添加sourceMapPathOverrides来修正映射关系：

// 在launch.json的configurations节点内添加以下配置
"sourceMapPathOverrides": {
  "webpack-internal:///./src/*": "${workspaceFolder}/src/*",
  "webpack:///./src/*": "${workspaceFolder}/src/*",
  "webpack:///src/*": "${workspaceFolder}/src/*"
},
"webRoot": "${workspaceFolder}"

webRoot一定要指向你的项目根目录，确保VSCode能正确找到本地源码文件。

3. 清理缓存并重启调试 #

有时候旧的source map缓存会导致新的映射不生效，按以下步骤操作：

• 执行ng clean清理Angular的构建缓存
• 彻底关闭VSCode再重新打开（清除VSCode的调试缓存）
• 重新启动调试会话（F5）

4. 验证Source Map文件有效性 #

去项目的dist文件夹里找到对应的.map文件（比如main.js.map），打开后检查sources字段，确认里面的路径是指向你本地的src目录下的文件，而不是webpack的内部虚拟路径。

额外排查小技巧 #

• 在VSCode调试控制台输入source map命令，查看source map的加载状态，有没有明确的错误提示
• 确保断点打在TypeScript源码文件上，不要打在编译后的JS文件里，Angular5是TS转译JS，只有TS断点才能正确映射到运行时代码

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