VsCode系列：调试之Angular（支持所有调试）

VsCode调试Angular

---

今天博主跟大家聊一聊如何使用VsCode去调试Angular（其他Vue啊什么的也一样哈），不喜勿喷，如有建议欢迎补充、讨论！

VSCode有没有类似WebStorm那种“傻瓜式”操作，直接点一个按钮就行了。想多了，VSCode相对来说是一个“轻量级”的IDE，还是需要通过Termimal手动输入命令来启动并调试的。自己鼓捣了一阵，这种半自动的方式也挺好，下面开始试验：

---

第一步：安装插件

首先我们需要再VSCode中安装Debugger for chrome插件，这个很简单，在扩展面板中输入名称，点击安装（install）汉化后就是安装了，可以观看博主的这篇文章《下载安装及汉化 》即可：

---

第二步： 配置启动参数：

首先选择一个你要进行调试的项目（文件夹），再点击调试哪里的下拉箭头选择---->“添加配置”，右侧会出现---->下拉选择框，选择---->谷歌（Chrome）,点击如图所示的---->小齿轮，出现---->launch.json

这里说一下VSCode是通过.vscode/launch.json文件来配置管理项目启动的，可以在configurations里面配置多个启动方式，我们这里添加如下代码：

如果你是Windows用户，请把你本地launch.json文件里面的内容先删光，然后把以下内容贴进去：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "启动并打开chrome",
            "url": "http://localhost:3010",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

---

3. 开始调试

在这里我们要开始调试啦和我们平时使用sts、eclipse调试步骤差不多，打断点，打开终端，进入项目根目录，运行ng serve启动项目，然后从VS Code的debug界面“启动并打开Chrome“”：

请注意，一定要用F5再次刷新一下Chrome才能进入断点！

---

最后

VS Code最强的地方在于：单元测试代码也是可以Debug的哦！
国内大多数企业并不做单元测试，我就先不写了吧，如果你想对单元测试代码进行Debug，请参考英文原版 ，最后一小节Debug Unit Tests。

更多参考精彩博文请看这里：陈永佳的博客

喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！