Visual Studio Code调试Angular

2,533 阅读1分钟

Visual Studio Code调试Angular

环境:

  • nodejs
  • @angular/cli
  • visual studio code

步骤:

1、创建Angular项目;

ng new ClinetApp
cd ClientApp
code . # 使用Visual Studio Code打开文件夹

2、安装调试插件【Debugger for Chrome】或者【Debugger for Microsoft Edge】;

3、按【Ctrl + Shift + ~】打开TERMINAL,输入ng serve运行Angular项目;

4、按【Ctrl + Shift + D】打开Run窗口,点击【create a launch.json file】创建运行配置文件;

5、点击【Add Configuration...】按钮添加配置,选择【Chrome: Launch】项创建Chrome运行配置;

6、修改启动url为【http://localhost:4200】;

7、然后点击如图的按钮,或者按【F5】启动浏览器,即可进行调试。

注:

如若项目为Asp.Net Core + Angular,则需要运行配置【launch.json】中的【webRoot】,将其修改为Angular项目的根目录,否则是无法命中断点的。

也可参考Visual Studio Code官方文档