在VSCode中调试angular的方法，vscode调试angular

在VSCode中调试angular的方法，vscode调试angular

近期学习angular，今天刚刚在电脑端安装VSCode，使用VSCode打开一个ng new出来的一个angular项目，想要调试，但不知道该怎么操作了。

跟同事交流一下，问问VSCode有没有类似WebStorm那种“傻瓜式”操作，直接点一个按钮就行了。他们说我想多了，VSCode相对来说是一个“轻”的IDE，还是需要通过termimal手动输入命令来启动并调试的，想一想也好，锻炼一下使用angular命令吧。自己鼓捣了一阵，这种半自动的方式也挺好，分享出来：

1. 安装插件：

首先我们需要再VSCode中安装Debugger for chrome插件，这个很简单，在扩展面板中输入名称，点击install即可：

2. 配置启动参数：

在VSCode中，打开调试面板，点击齿轮按钮，VSCode是通过.vscode/launch.json文件来配置管理项目启动的，可以在configurations里面配置多个启动方式，我们这里添加如下代码：

        {
            "type": "chrome",
            "request": "launch",
            "name": "启动并打开chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }

3. 开始调试

打开控制台面板，Terminal，执行口令：

ng serve

口令执行完成，会有显示：Compiled successfully，说明编译成功。

然后在调试面板里面，点击绿色的启动按钮：

启动后，chrome浏览器会自动打开，看到如下首页效果：

PS：如果想要重启，可以在这个控件上直接点击：