[英]How to use watch expressions in chrome dev tools to watch variables in an angular component (properties of 'this' object)?
我正在尝试调试 Angular 6 组件中的属性。 自然地,它在代码中通过this
变量 -> this.model
被调用。 我目前正在调试它,并希望将它添加为 Chrome 开发工具中的监视表达式,以便我可以通过代码的执行看到它是如何变化的。 我尝试仅将this.model
添加为监视表达式,但它返回未定义,因为this
指的是没有model
属性的window
对象,因此我的监视表达式undefined
。
观看this.model
的正确方法是this.model
?
由于代码在执行时被转译为 js,因此this
的引用发生了变化。 您可以改为观看_this
。 它将为您提供要调试的组件/服务的实例。
使用占卜
它记录所有控制器变量。
通过使用生命周期钩子DoCheck
还有一种替代方法,但有点复杂。 它不断调用自定义更改检测函数ngDoCheck()
。
因此,在您的组件类中创建此函数并在其中添加console.log
。 例如:
ngDoCheck() {
console.log(this.numberGiven);
}
最后,只要您想查看此图像中显示的任何变量,只需在此函数中添加一个断点即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.