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.