CODEWITHSUNDEEP
angularjsgoogle-chrome-devtools
Djinn
Djinn

Reputation: 326

Chrome DevTools - why does variable display in Watch but not under Scope?

I am debugging an AngularJS application in Chrome v95 and am paused on a breakpoint in a JavaScript file.

In the "Watch" panel, I have added an entry for "scope.currentScreenId", and it displays the value of that variable.

But when I expand the items in the "Scope" panel, I can't find that currentScreenId variable. It is not a local variable, so doesn't show up under "Local". Under "Global", I can find the "scope" object, but when I expand it, it only displays 13 objects under it, not including "currentScreenId". The last object displayed is "[[Prototype]]: Scope".

When I add a Watch on the "scope" variable, it likewise shows only those same 13 objects under it. Why do some of the child objects like "currentScreenId" appear to be hidden, and how can I browse these hidden ones?

If I go to the Console and type "scope.", the auto-completion popup window displays many more child variables, including currentScreenId. This list is what I want to see in the Scope and/or Watch section on the Sources page. The first 12 items that are displayed in the popup match the ones displayed in the Scope panel. Why don't the others display there?

In the Microsoft Edge browser v95, it works the same as in Chrome except that 12 child objects are displayed under "scope" rather than 13.

Upvotes: 0

Views: 843

Answers (1)

Petr Averyanov
Petr Averyanov

Reputation: 9486

Expand [[Prototype]]: Scope and you will see parent scope properties -- you should find your property in parent or in parent of parent etc...

This is not pure Angularjs feature -- you can try this code in JS console:

a = {test1: 'test1'}
b = {test2: 'test2', __proto__: a}

b >> {test2: "test2", [[Prototype]]: Object}
b.test1 >> 'test1'

Upvotes: 1

Related Questions