debugging 如何在我的项目中使用Chrome调试Angular *ngIf结构指令?

kupeojn6  于 2022-11-14  发布在  Angular
关注(0)|答案(3)|浏览(239)

我想将Angular源代码/源代码Map附加到我生成的Angular CLI项目中,这样我就可以在Chrome中调试像*ngIf这样的指令。
有没有可能使用一些angular.json配置/源Map以某种方式将调试器附加到ng_if.ts中...?或者是否有一个设置在开发模式中添加源Map,以便我可以使用附加的源Map单步执行任何第三方库?

如果我在Chrome中按Ctrl + O,然后键入ngIfng_if,列表菜单中就没有这样的文件。

编辑:提供供应商源Map时的外观(请参阅已接受的答案):

zpgglvta

zpgglvta1#

这也让我很好奇。我从来不需要调试Angular 源代码,但为什么不呢?
ng cli似乎有一个vendorSourceMap标志,该标志在某个时候被弃用,执行此操作的新方法是通过v7.2(https://blog.ninja-squad.com/2019/01/09/angular-cli-7.2/)之后的angular.json文件:

"serve": {
  "options": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    },
  ...
}
2cmtqfgy

2cmtqfgy2#

在开发人员源代码面板中,按Ctrl + P并输入angular/common模块中ngIf指令exesis的模块名称,因此输入common.js

然后查找NgIF的类名,然后可以设置断点

你看到的是javascript版本,所有核心模块都已经构建好了,所以看起来可能会让人不知所措,但是你可以在github上检查NgIf的源代码来查看typescript源代码。

jhdbpxl9

jhdbpxl93#

您可以转到html代码,然后在ngIf上放置标记,单击键盘上的F12或ctrl,然后单击鼠标找到ngIf文件,然后转到浏览器,转到检查,转到源代码选项卡,使用ctrl + p找到您之前找到的文件名,并放置断点。

相关问题