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

Question

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 ?

Answer 1

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.

Answer 2

use Augury

It logs all controller variables.

Answer 3

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 .