如何用VSCode直接调试Angular代码

就目前来说，从VS Code 1.14版本开始，就能够直接调试Angular代码。

(1)首先就先对环境进行配置。将Chrome安装在默认位置，然后将Debugger for Chrome插件安装在VS Code将@angular/cli安装到全局空间npm install -g @angular/cli，当地用户需使用cnpm进行安装。使用@angular/cli新建一个项目ng new my-app；

用VS Code打开项目，进入项目根目录；

(2)配置launch.json

然后仿照上面的方法打开launch.json配置文件。一般大部分Windows用户就是如以下配置方法进行配置。

配置代码如下：

(3)在app.component.ts的构造函数里弄个断点，如下图所示。

(4)最后打开终端，进入根目录，运行ng serve启动项目，然后从VS Code的debug界面启动Chrome，如下图所示:

同时必须使用F5进行刷新Chrome，才可以进入断点，如下图所示。