Angular 工具篇之VSCode调试

今天是 “教师节”，借用我女儿小班 QQ 群内家长们发的祝福语，献给各行各业辛勤而伟大的老师们：

今天是教师节，感谢我的孩子遇到的每一位老师，是你们无私的付出让孩子有了无比精彩的人生！—— 老师是这个世界上唯一一个与你的孩子没有血缘关系，却愿意因您的孩子进步而高兴，退步而着急，满怀期待，助其成才，舍小家顾大家并且无怨无悔的人代表孩子祝老师们节日快乐 ，老师们辛苦了！

好的，现在我们步入正题。Visual Studio Code （简称 VS Code / VSC） 是一款由微软开发的跨平台编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码比对、Git 命令等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

对于很多 Angular 的开发者来说，VSCode 是他们手中一把利器。此外对于大多数前端开发者来说，他们手中还有另一把利器，那就是 Chrome 浏览器。接下来，我们将介绍一下在 VSCode 中如何利用 Chrome 浏览器调试 Angular 应用。

首先，我们需要在 Chrome 商店中安装 Debugger for Chrome 扩展插件，成功安装后让我们重新加载一下编辑器。安装完插件只是第一步，下一步我们需要添加相应的配置文件。在 Mac 环境下按下 Command + Shift + D，然后点击左侧栏的齿轮图标，然后在下拉列表中选择 “Chrome”：

debugger-for-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 我们可以运行以下命令来启动本地服务器：

$ ng serve

因为该服务器的默认端口是 4200，所以我们需要更新一下 launch.json 文件中默认的 url 配置：

"url": "http://localhost:4200"

最后我们就可以进入调试面板，点击运行按钮开始调试 Angular 应用程序：

launch-chrome-debugger

上面我们已经介绍如何使用 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)” 选项，具体如下：

debugger-for-firefox

之后，我们还需要更新一下默认生成的配置信息，具体如下：

{
    "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 浏览器的配置方式类似，这里就不再展开，有需要的同学自行尝试一下。