今天是 “教师节”，借用我女儿小班 QQ 群内家长们发的祝福语，献给各行各业辛勤而伟大的老师们：
今天是教师节，感谢我的孩子遇到的每一位老师，是你们无私的付出让孩子有了无比精彩的人生！—— 老师是这个世界上唯一一个与你的孩子没有血缘关系，却愿意因您的孩子进步而高兴，退步而着急，满怀期待，助其成才，舍小家顾大家并且无怨无悔的人代表孩子祝老师们节日快乐 ，老师们辛苦了！
好的，现在我们步入正题。Visual Studio Code （简称 VS Code / VSC） 是一款由微软开发的跨平台编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码比对、Git 命令等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。
对于很多 Angular 的开发者来说，VSCode 是他们手中一把利器。此外对于大多数前端开发者来说，他们手中还有另一把利器，那就是 Chrome 浏览器。接下来，我们将介绍一下在 VSCode 中如何利用 Chrome 浏览器调试 Angular 应用。
首先，我们需要在 Chrome 商店中安装 Debugger for Chrome 扩展插件，成功安装后让我们重新加载一下编辑器。安装完插件只是第一步，下一步我们需要添加相应的配置文件。在 Mac 环境下按下 Command Shift D，然后点击左侧栏的齿轮图标，然后在下拉列表中选择 “Chrome”：
之后，在项目的根目录下会生成一个 .vscode 目录，该目录下也会自动生成一个 launch.json 文件：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}其中 url 是 Angular 应用程序的地址，通常情况下，在开发阶段我们会使用 Angular CLI 来辅助开发，使用 Angular CLI 我们可以运行以下命令来启动本地服务器：
代码语言：javascript复制$ ng serve因为该服务器的默认端口是 4200，所以我们需要更新一下 launch.json 文件中默认的 url 配置：
"url": "http://localhost:4200"最后我们就可以进入调试面板，点击运行按钮开始调试 Angular 应用程序：
上面我们已经介绍如何使用 VSCode 和 Chrome 调试 Angular 应用程序。其实除了 Chrome 浏览器之外，在 VSCode 中我们也可以使用 Firefox 或 Edge 浏览器。跟之前一样，在调试前我们也得安装对应的扩展：Debugger for Firefox 和 Debugger for Edge。如果是首次配置的话，与 Debugger for Chrome 扩展的配置类似。
因为我们已经配置过 Debugger for Chrome，所以要配置 Debugger for Firefox 和 Debugger for Edge 扩展时，我们只需打开 .vscode 目录下的 launch.json 文件，然后点击界面中 “添加配置” 按钮，在下拉列表中选择 “Firefox: Launch (server)” 选项，具体如下：
之后，我们还需要更新一下默认生成的配置信息，具体如下：
代码语言：javascript复制{
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Launch Firefox against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200 against localhost",
"webRoot": "${workspaceFolder}"
}
]
}Edge 浏览器的配置方式类似，这里就不再展开，有需要的同学自行尝试一下。
