要调试 angular 项目在 vscode 中，1. 安装 debugger for chrome 或 microsoft edge tools 扩展；2. 配置 .vscode/launch.json 文件，设置正确的 url 和浏览器类型；3. 使用 ng serve 启动项目并按 f5 开始调试，确保 sourcemap 已启用以支持断点生效。
调试 Angular 项目在 VSCode 中其实挺常见的，尤其对于本地开发来说，配置好了调试器可以省去很多手动刷新和打断点的麻烦。VSCode 自带调试功能，结合 Chrome 或 Edge 的调试器插件，可以实现断点、变量查看等操作。
安装必要的扩展
首先确保你已经安装了 VSCode 的调试扩展，最常用的是 Debugger for Chrome 和 Microsoft Edge Tools for VS Code。虽然现在 Chrome 已经内置了开发者工具，但用 VSCode 直接调试会更方便一些。
- 打开 VSCode，点击左侧活动栏的“扩展”图标（或使用快捷键
Ctrl+Shift+X） - 搜索关键词：
Debugger for Chrome或Edge Tools - 选择一个评分高、更新频繁的版本安装即可
一般来说，如果你主要用 Chrome 浏览器开发，那就装 Debugger for Chrome；如果习惯用 Edge，那装 Microsoft Edge Tools 就行。
配置 launch.json 文件
VSCode 的调试配置是通过 .vscode/launch.json 文件来设置的。你需要先确保这个文件存在，或者手动创建它。
- 在 VSCode 中按下
F5或者点击顶部菜单的运行和调试按钮 - 如果没有配置文件，系统会提示你创建一个，选择环境（Chrome 或 Edge）后自动生成
- 修改配置项中的 URL（默认一般是
http://localhost:4200）
示例配置（Chrome）：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}如果你改了端口，比如用了 ng serve --port 4201，记得把 url 改成对应的地址。
启动 Angular 项目并开始调试
调试的前提是你已经在本地启动了 Angular 项目。你可以使用以下命令：
ng serve
这样项目就会运行在 localhost:4200 上。然后回到 VSCode：
- 打开你想调试的组件 TypeScript 文件
- 在代码行号左边单击添加断点
- 按下
F5或点击运行和调试侧边栏的启动按钮 - 浏览器会自动打开，并在断点处暂停执行
这时候你就可以查看调用栈、作用域变量、表达式求值等等。
小贴士：如果你发现断点不生效，可能是 sourcemap 没有正确加载。检查一下 angular.json 中的 sourceMap 是否为 true。
常见问题及建议
- 浏览器没反应？ 确保没有其他 Chrome 实例在运行，尤其是后台进程。
- 断点不生效？ 检查是否启用了 source map，以及是否在正确的文件中设置了断点。
-
换了端口没生效？ 修改完
launch.json后需要重新启动调试器。 - 不想每次按 F5？ 可以配置快捷键或保存时自动重载。
基本上就这些。调试 Angular 项目并不复杂，但有些细节容易忽略，比如路径匹配、浏览器兼容性等。只要配置一次成功，以后基本都能复用。
