如何在我的项目中使用Chrome调试Angular * ngIf结构化指令? [英] How to debug Angular *ngIf structural directive using Chrome within my project?

问题描述

我想将Angular源代码/源映射附加到生成的Angular CLI项目中，以便可以在Chrome中调试*ngIf之类的指令.

I would like to attach Angular source code / source map to my generated Angular CLI project, so that I can debug directives like *ngIf in Chrome.

是否可以使用一些angular.json配置/源映射以某种方式将调试器附加到ng_if.ts中? 还是有一个设置可以在开发模式下添加源地图，以便我可以逐步浏览附加了源地图的第3方库?

Is it possible to somehow attach debugger into ng_if.ts using some angular.json configuration / source map ...? Or is there a setting to add source map in develop mode so that I can step through any 3rd party library with source map attached?

如果我在Chrome中按 Ctrl + O ，然后键入ngIf或ng_if，则列表菜单中没有此类文件.

If I press Ctrl + O in Chrome and then type ngIf or ng_if there is no such file in the list menu.

提供供应商源地图时的外观(请参见已接受的答案):

推荐答案

这也让我感到好奇.我从不需要调试有角度的源代码，但是为什么不呢?

This made me curious as well. I never did need to debug angular source code, but why not.

似乎在某个时候不推荐使用ng cli的vendorSourceMap标志，而新的实现方式是通过v7.2以后的angular.json文件( https://blog.ninja-squad.com/2019/01/09/angular-cli- 7.2/):

It seems there was a vendorSourceMap flag for the ng cli that was deprecated at some point and the new way of doing this is via the angular.json file since v7.2 (https://blog.ninja-squad.com/2019/01/09/angular-cli-7.2/):

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

这篇关于如何在我的项目中使用Chrome调试Angular * ngIf结构化指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！