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

Posted 2023-03-07

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

【英文标题】：How to use watch expressions in chrome dev tools to watch variables in an angular component (properties of 'this' object)?

【发布时间】：2019-06-06 08:42:03

【问题描述】：

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

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

【问题讨论】：

另见Live Expressions。与 Watch Expressions 相同的想法，但在控制台中。此功能不能解决this 周围的问题...您需要找到对组件范围的稳定引用。这只是监视您可能比 Watch Expressions 更喜欢的值的另一种方式。

【参考方案1】：

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

【参考方案2】：

使用Augury

它记录所有控制器变量。

【参考方案3】：

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

所以，在你的组件类中创建这个函数并在里面添加console.log。 例如：

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

最后，只要你想观察任何变量as shown in this image，只需在这个函数中添加一个断点。