When I'm debugging AngularJS in Chrome inspector, I often encounter a frustrating situation. I know that certain variables are defined because I can hover my mouse over them in Chrome inspector and see them in the 'locals' tab. However, when I attempt to add them to the watch tab or evaluate them in the console by typing their names, they show up as "undefined". Take a look at the picture (notice the variable 'xhr').
Can someone please clarify why variables sometimes appear as undefined in the watch tab and console, even though they are not actually undefined in the current scope? And, if possible, provide guidance on how to ensure that the watch window and console consistently display the correct values of these variables? See picture (notice the variable 'xhr'). https://i.sstatic.net/LeAn9.png Thanks!