VSCode调试Angular需先手动运行ng serve，再安装Debugger for Chrome/Edge扩展、配置launch.json中webRoot为"${workspaceFolder}/src"、将.html文件语言模式设为Angular HTML，并确保tsconfig.json启用Angular语言服务插件。
VSCode 本身不启动 Angular 应用，ng serve 必须手动运行；调试器只负责连接已运行的 dev server 并注入断点逻辑——跳过这步，F5 按了也白按。
必须装 Debugger for Chrome / Edge 扩展
Angular 调试依赖浏览器调试协议，VSCode 自带的 Node 调试器对前端代码无效。不装这个扩展，launch.json 配再全也没用。
- 在 VSCode 扩展市场搜
Debugger for Chrome（Chrome 用户）或Microsoft Edge Tools（Edge 用户），认准官方发布者（Google 或 Microsoft） - 装完必须重启 VSCode，否则插件不会注册调试类型
chrome或msedge - Mac 用户若用 Safari，别白费劲——它不支持 VSCode 的 source map 映射，断点基本失效
launch.json 里 webRoot 必须指向 src 目录
webRoot 错了，断点能打上但永远不命中：浏览器加载的是 http://localhost:4200/ 下的资源，而 source map 映射路径默认从 src/ 开始解析。设成 ${workspaceFolder} 会导致所有 TS/HTML 断点偏移。
- 正确写法：
"webRoot": "${workspaceFolder}/src" - 如果项目用了自定义输出路径（比如
ng build --output-path dist/my-app），webRoot仍保持为/src，因为 source map 是编译时生成的映射关系，不是运行时目录 - Windows 用户注意路径斜杠方向：VSCode 内部统一用正斜杠
/，哪怕系统是，别手抖写成"${workspaceFolder}\src"
模板文件（.html）断点不生效？先切语言模式
VSCode 默认把 .html 文件当普通 HTML 处理，Angular Language Service 的模板支持压根没加载——所以你在 *ngIf 里打的断点，浏览器根本不知道那是 Angular 指令。
- 打开任意组件的 .html 文件，看右下角状态栏，点击当前语言标识（显示 “HTML”）
- 选 “Configure File Association for '.html'”，然后输入
Angular HTML并回车 - 如果没这个选项，说明
Angular Language Service插件未激活：按Ctrl+Shift+P输入Angular: Restart Angular Language Service手动重启 - 确认
tsconfig.json中有"plugins": [{ "name": "@angular/language-service" }]，否则模板语法检查和断点映射都不可用
preLaunchTask 自动拉起 ng serve 很诱人，但容易掉坑
虽然 launch.json 支持 preLaunchTask 自动执行 npm start 或 ng serve，但实际开发中它常导致两个问题：热更新卡死、端口冲突。
- VSCode 任务系统和 Angular CLI 的 webpack-dev-server 进程管理机制不兼容，尤其 Windows + WSL 场景下，
preLaunchTask启动后 CLI 可能无法响应 HMR 请求 - 如果上次
ng serve没正常退出（比如 Ctrl+C 中断不彻底），preLaunchTask会尝试重用 4200 端口，直接报错ERROR: Port 4200 is already in use - 更稳的做法：终端里先跑
ng serve，再点 VSCode 调试器的 ▶️ 启动按钮——多一步，少三小时排查时间
真正难调的从来不是配置项，而是那些不报错却让断点静默失效的细节：webRoot 路径差一级、HTML 语言模式没切、source map 在 ng build --prod 下被默认关闭……这些地方没对齐，你看到的就只是“点了 F5，浏览器开了，但光标永远停不到那行代码上”。
