how to show this.variable value in observer callback function in chrome debug mode

Question

In angular application, given the following code:

this.f55Service.getByFormDeif55Key(this.formDeif55Key).subscribe(data => {
          this.stiFormDeif55Dto = data.body; 
          console.log(data.body);
});

this.f55Service.getByFormDeif55Key(this.formDeif55Key) returns an Observable, I set an breakpoint in

console.log(data.body);

so to ensure that

this.stiFormDeif55Dto = data.body; 

is run, then in chrome debug console, I type this.stiFormDeif55Dto but it returns undefined, if I point the mouse cursor to stiFormDeif55Dto variable in the line

this.stiFormDeif55Dto = data.body; 

it also returns undefined.

So how to show the value of the variable this.stiFormDeif55Dto in debug mode console?

Answer 1

Since the variable is defined within the scope of that component, unfortunately you can't access it while debugging in the chrome developer console.

However there is a neat extension, suggested by Angular, (Angular DevTools) you could install on either chrome or firefox.

Once installed, go into developer tools and select the Angular tab. There you will be able to see the components listed in a tree. Click on your component and on the right side, your properties such as stiFormDeif55Dto will be listed with the current value of it.

You can even edit and modify the value of the property!

Have fun!