如何在VS CODE调试Angular

Chrome Dev Tools 绝对是目前最爽的 JavaScript 调试工具之一，一方面可以通过在代码 debugger 或 直接在 Sources 中添加断点，并且可以直接进入 Typescript 源代码，真的无可挑剔。

然……

我们一般在开发Angular，首先需要在CMD终端 （或VSCODE TERMINAL）启动 ng serve，后打开浏览器，然后打开 Dev Tools，进入断点，此时再回过头VS CODE修改代码；而其实我们在开发过程中需要一直重复以下流程：

修改代码 > 打开Dev Tools > 设置断点 > 调试 > 回到VSCODE

当定位到错误总是需要一直在 Chrome 与 VSCODE 切换。

其实……

我们可以简化这一过程，只需要把调试在VSCODE里面完成，这样当定位错误的时候可以直接修改代码。

怎么做？

两步骤即可。

1、安装 Debugger for Chrome

直接在市场中找就行了。

2、创建 launch.json

在项目根目录下创建 .vscode/launch.json，内容如下：

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome with ng serve",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

并没有什么特别是的，只需要注意 url 添加项目浏览地址即可。

3、启动 ng serve

当然这里最好是在 VSCODE TERMINAL 启动 ng serve 了。

4、调试

在VSCODE按F5进入调试状态，最后打开 Chrome 刷新页面，会直接在 VSCODE 进入断点。

结论

这样你会发现，其实我只打开两个窗口，一是VS CODE、一是Chrome，这样如果你是使用多屏幕或window10的多桌面的话，简直可以浪一把。

而且当我在调试时发现错误，可以直接在VSCODE中修改代码，保存后由于 Angular Cli 自动刷新，并同时进入修改代码后的DEBUG。

爽……

happy coding!