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应用修改