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}"
        }
    ]
}