Javascript debugging in Chrome Inspector: variables are shown undefined in watches and console but can be inspected when hovered

Question

While debugging AngularJS in Chrome inspector I often face the situation when I know that some variables are defined, and I can inspected them by hovering a mouse over them in Chrome inspector. They also appear in 'locals' tab. However, when I try to add them to watch tab or evaluate them in console by typing the variable name I get "undefined". See picture(notice variable 'xhr').

Can anyone explain the reason why sometimes variables are shown as undefined in watch tab and console, when they aren't actually undefined in current scope? And, if it's possible, how to make watch window and console to display values of the variables correctly all the time? See picture(notice variable 'xhr'). Thanks

Answer 1

Source mapped variables will not show the resolved names in the debugger, as this functionality has yet to be implemented. The interesting part is that the map file does contain a names array, containing the original names. However, the browser has yet to use this. There was an experimental feature in Canary, but that doesn't appear to exist anymore.

You can follow the display source map variable names in Developer Tools thread.

In the meantime, I recommend switching to the un-minified version of the library to debug your particular problem(s), but switch it out in production. Not ideal I know.