如何在 chrome 开发工具中使用监视表达式来监视角度组件中的变量("this"对象的属性)？

Question

>我正在尝试调试 Angular 6 组件中的属性。自然地，它在代码槽中被称为变量this> this.model。我目前正在调试它，并希望将其添加为 Chrome 开发工具中的监视表达式，以便我可以看到它如何通过代码执行而变化。我尝试仅将this.model添加为监视表达式，但是它返回未定义，因为this引用没有model属性的window对象，因此我的监视表达式undefined。

观看this.model的正确方法是什么？

Answer 1

由于代码在执行时被转译为 JS，因此this引用会发生变化。您可以改为观看_this。它将为您提供要调试的组件/服务的实例。

Answer 2

使用 Augury

它记录所有控制器变量。

Answer 3

有一种替代方法，但也有一点复杂的方法，即使用生命周期钩子DoCheck。它不断调用自定义更改检测函数ngDoCheck()。

因此，在组件类中创建此函数并在其中添加console.log。例如：

ngDoCheck() {
    console.log(this.numberGiven);
  }

最后，只要您想监视任何变量，只需在此函数中添加一个断点，如下图所示。