使用VS Code调试Angular CLI项目的完整指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00367/article/details/148488468

使用VS Code调试Angular CLI项目的完整指南

vscode-recipes 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-recipes

前言

Angular作为当前主流的前端框架之一，其官方提供的CLI工具极大地简化了项目创建和开发流程。本文将详细介绍如何在VS Code中配置和调试Angular CLI生成的项目，涵盖开发服务器调试、单元测试调试和端到端测试调试三大场景。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

安装最新版本的VS Code编辑器
安装Node.js和npm包管理器
安装Google Chrome或Microsoft Edge浏览器（建议使用最新稳定版）
全局安装Angular CLI 6.0或更高版本：

npm install -g @angular/cli@">=6.0"

注意：不同版本的Angular CLI可能存在调试兼容性问题，建议使用6.0及以上版本。

创建Angular项目

使用Angular CLI创建一个新项目：

ng new my-angular-app
cd my-angular-app
code .

配置调试环境

1. 开发服务器调试配置

在VS Code中打开调试面板（左侧活动栏的虫子图标）
点击齿轮图标创建launch.json文件
选择Chrome作为调试环境

将生成的launch.json内容替换为以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

2. 添加构建任务

在.vscode/tasks.json中添加以下任务配置：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*",
          "endsPattern": "Compiled |Failed to compile."
        }
      }
    }
  ]
}

这个配置实现了：

在后台运行npm start命令
自动检测编译错误并在问题面板显示
当编译完成或失败时通知调试器

开始调试

在app.component.ts中设置断点（如在title属性赋值处）
选择"ng serve"调试配置
按F5启动调试

VS Code将：

启动npm start任务（即ng serve）
等待应用编译完成
自动打开Chrome浏览器
当代码执行到断点处时暂停

调试单元测试

配置单元测试调试

在launch.json中添加以下配置：

{
  "name": "ng test",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:9876/debug.html",
  "webRoot": "${workspaceFolder}",
  "sourceMapPathOverrides": {
    "./src/*": "${workspaceFolder}/src/*"
  }
}

调试步骤

在app.component.spec.ts中设置断点
在终端运行测试：
```
npm run test
```
选择"ng test"调试配置
按F5启动调试
在浏览器中点击特定测试链接触发断点

调试端到端测试

配置端到端测试调试

在launch.json中添加以下配置：

{
  "name": "ng e2e",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
  "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
}