在VS CODE中调试Angular代码

     Chrome Dev Tools 可以调试js程序，但是可能需要和源码之间来回切换。

     如果是使用VS CODE来开发Angular，可以直接在VS CODE中调试。

 

     按照如下的步骤即可：

     第一步，  安装Debugger for Chrome。  同时可以选择安装中文插件，可以将IDE的菜单汉化

     第二步，  项目根目录下如果没有自动创建.vscode/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}"
        }
    ]
}

     ${workspaceRoot}可以写成项目的根目录。例如D:\temp\angluartest。   VS CODE同时引入多个工程的代码时，${workspaceRoot}要写成对应工程的根目录。

     第三步，启动工程，npm start。  在VS CODE按F5进入调试状态，最后打开 Chrome 输入调试工程对应的url，会直接在 VS CODE 中进入断点。

 

      还有一点需要注意的是，不要在F5打开的chrome中再设置断点用F12调试，否则调试时VS CODE和chrome都会进入，调试不方便。

 

       vscode中加入了多个前端工程时，除了需要配置每个工程的launch.json。还需要选择对应的工程后，再按下F5进行调试。