VSCode 在1.14更新后添加了调试Angularjs应用的功能。

一、环境要求

在VScode中安装插件Debugger for Chrome
确保Chrome安装在默认位置
项目要求使用Angular Cli创建
在项目中安装好必要依赖

二、配置launche.json

安照上面的顺序打开launche.json文件，将这个文件的所有内容替换为下面内容

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

三、开始Debug

这个演示的项目在https://gitee.com/mumu-osc/NiceFish。

我在app.component.ts里的构造函数里面打个断点，像这样

VScode本身自带有终端模拟器，使用Ctrl+`调出，你也可以使用其它终端。

输入ng serve启动项目。

然后从VS Code的debug界面启动Chrome：

接着会打开Chrome，或者你手动进入到localhost:4200，你一定会什么都没有看到，该是什么样子还是什么样子，你需要刷新一下页面才能看到断点。

如果你使用那个项目并设置跟我一样的断点就可以看到这样了。VScode的上面还有一个控制台，当点击那个绿三角时就会继续运行代码了。

国内大多数企业并不做单元测试，我就先不写了吧，如果你想对单元测试代码进行Debug，请参考英文原版https://github.com/weinand/vscode-recipes/tree/master/Angular-CLI ，最后一小节Debug Unit Tests。

根据文章VS Code 1.14发布，可以直接Debug Angular应用修改

一、环境要求

二、配置launche.json

三、开始Debug

相关日志