CODEWITHSUNDEEP
angulargoogle-chrome-devtools
Stromwerk
Stromwerk

Reputation: 780

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. Naturally it is called in code trough this variable -> 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. 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.

What would be the proper way to watch this.model?

Upvotes: 5

Views: 5071

Answers (3)

Rahul Chouhan
Rahul Chouhan

Reputation: 129

There is one alternative but a little complex way also there by using a life cycle hook DoCheck. It keeps invoking a custom change-detection function ngDoCheck().

So, create this function in your component class and add console.log inside it. 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.

Upvotes: 0

Sachin Gupta
Sachin Gupta

Reputation: 5301

since the code is transpiled to js while executing, the reference of this changes. You can watch the _this instead. It will give you the instance of the component/service that you want to debug.

Upvotes: 4

m arcs kumar
m arcs kumar

Reputation: 47

use Augury

It logs all controller variables.

Upvotes: 3

Related Questions