How to use watch expressions in chrome dev tools to watch variables in an angular component (properties of 'this' object)?

user_4604894 0
Viewed 3059

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?

angular google-chrome-devtools
3 Answers

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.

user_60195630

use Augury

It logs all controller variables.

user_68748080

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.

user_123905240
Related