Chrome DevTools - 为什么变量显示在 Watch 中而不显示在 Scope 下？

Question

我正在调试 Chrome v95 中的 AngularJS 应用程序，并在 JavaScript 文件中的断点处暂停。

在“观察”面板中，我为“scope.currentScreenId”添加了一个条目，它显示了该变量的值。

但是当我在“范围”面板中展开项目时，我找不到那个 currentScreenId 变量。它不是局部变量，因此不会出现在“Local”下。在“Global”下，我可以找到“scope”对象，但是当我展开它时，它下面只显示13个对象，不包括“currentScreenId”。最后显示的对象是“[[Prototype]]: Scope”。

当我在“scope”变量上添加一个 Watch 时，它同样只显示它下面的 13 个相同的对象。为什么有些子对象如“currentScreenId”显示为隐藏的，如何浏览这些隐藏的？

如果我转到控制台并键入“scope.”，自动完成弹出窗口 window 会显示更多子变量，包括 currentScreenId。这个列表是我想在 Sources 页面的 Scope and/or Watch 部分看到的。弹出窗口中显示的前 12 个项目与范围面板中显示的项目相匹配。为什么其他人不在那里显示？

在 Microsoft Edge 浏览器 v95 中，它的工作方式与 Chrome 相同，只是“范围”下显示的是 12 个子对象，而不是 13 个。

Answer 1

展开[[Prototype]]: Scope，您将看到父范围属性——您应该在父级或父级的父级等中找到您的属性...

这不是纯粹的 Angularjs 功能——您可以在 JS 控制台中尝试此代码：

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

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

Chrome DevTools - 为什么变量显示在 Watch 中而不显示在 Scope 下？

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

angularjs

google-chrome-devtools