[英]How to use watch expressions in chrome dev tools to watch variables in an angular component (properties of 'this' object)?
I am trying to debug a property which is in an Angular 6 component.我正在尝试调试 Angular 6 组件中的属性。 Naturally it is called in code trough
this
variable -> this.model
.自然地,它在代码中通过
this
变量 -> this.model
被调用。 I am debugging it at the moment and would like to add it as a watch expression in Chrome dev tools so I can see how it changes trough the execution of the code.我目前正在调试它,并希望将它添加为 Chrome 开发工具中的监视表达式,以便我可以通过代码的执行看到它是如何变化的。 I tried just adding
this.model
as a watch expression, however it returns undefined, as this
refers to the window
object, which doesn't have a model
property, so I am getting undefined
on my watch expression.我尝试仅将
this.model
添加为监视表达式,但它返回未定义,因为this
指的是没有model
属性的window
对象,因此我的监视表达式undefined
。
What would be the proper way to watch this.model
?观看
this.model
的正确方法是this.model
?
since the code is transpiled to js while executing, the reference of this
changes.由于代码在执行时被转译为 js,因此
this
的引用发生了变化。 You can watch the _this
instead.您可以改为观看
_this
。 It will give you the instance of the component/service that you want to debug.它将为您提供要调试的组件/服务的实例。
There is one alternative but a little complex way also there by using a life cycle hook DoCheck
.通过使用生命周期钩子
DoCheck
还有一种替代方法,但有点复杂。 It keeps invoking a custom change-detection function ngDoCheck()
.它不断调用自定义更改检测函数
ngDoCheck()
。
So, create this function in your component class and add console.log
inside it.因此,在您的组件类中创建此函数并在其中添加
console.log
。 Eg:例如:
ngDoCheck() {
console.log(this.numberGiven);
}
Finally, just add a breakpoint inside this function whenever you want to watch any variable as shown in this image .最后,只要您想查看此图像中显示的任何变量,只需在此函数中添加一个断点即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.