如何在chrome开发工具中使用监视表达式监视角度组件（“ this”对象的属性）中的变量？

Question

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

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

Answer 1

使用Augury

它记录所有控制器变量。

Answer 2

由于在执行过程中将代码转换为js，因此this的引用也会更改。您可以观看_this。它将为您提供要调试的组件/服务的实例。

Answer 3

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

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

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

最后，只要您想查看任何变量 as shown in this image，只需在此函数中添加一个断点即可。