在VS CODE调试Angular

1. 安装Debugger for Chrome扩展
   在VS Code的扩展中搜索Debugger for Chrome，安装后重启。
2. 添加配置文件
   在“调试”菜单中，点击“添加配置”，即可在当前项目文件夹下添加.vscode/launch.json文件，内容如下：

 {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}"
    }
  ]
}

注意其中的url，要修改为你的项目使用的相应地址和端口。

3. 启动项目 npm start

4. 调试
   在VS Code按F5进入调试状态，最后打开 Chrome 刷新页面，在VS Code编辑器中的Typescript代码设置断点，在Chrome中操作时，运行到断点代码时，中断。
   下图是项目运行过程中调试的画面，请注意“变量”面板中可以看到CouterComponent以及其中counter变量的值，无需使用console.log往Chrome输出变量了。当你有一堆变量需要观察的时候，将节省你许多的时间。

   
   
   

   单步调试