vscode怎么调试angular vscode运行angular项目配置-VSCode-PHP中文网

vscode怎么调试angular vscode运行angular项目配置

爱谁谁

发布： 2025-07-10 21:55:02

原创

942人浏览过

要调试 angular 项目在 vscode 中，1. 安装 debugger for chrome 或 microsoft edge tools 扩展；2. 配置 .vscode/launch.json 文件，设置正确的 url 和浏览器类型；3. 使用 ng serve 启动项目并按 f5 开始调试，确保 sourcemap 已启用以支持断点生效。

vscode怎么调试angular vscode运行angular项目配置

调试 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）：

灵云AI开放平台

150

查看详情

{
  "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 改成对应的地址。