Chrome DevTools — почему переменная отображается в часах, но не в области видимости?

#angularjs #google-chrome-devtools

Вопрос:

Я отлаживаю приложение AngularJS в Chrome v95 и делаю паузу на точке останова в файле JavaScript.

На панели «Просмотр» я добавил запись для «scope.currentScreenId», и она отображает значение этой переменной.

Но когда я разворачиваю элементы на панели «Область действия», я не могу найти эту переменную currentScreenId. Это не локальная переменная, поэтому она не отображается в разделе «Локальная». В разделе «Глобальный» я могу найти объект «область действия», но когда я его расширяю, под ним отображается только 13 объектов, не включая «currentScreenId». Последний отображаемый объект «[[Прототип]]: Область действия».

Когда я добавляю наблюдение за переменной «область действия», она также показывает только те же 13 объектов под ней. Почему некоторые дочерние объекты, такие как «currentScreenId», кажутся скрытыми, и как я могу просматривать эти скрытые объекты?

Если я зайду в консоль и наберу «область действия.», во всплывающем окне автозаполнения отобразится множество дополнительных дочерних переменных, включая currentScreenId. Этот список-это то, что я хочу видеть в разделе «Область действия» и/или «Просмотр» на странице «Источники». Первые 12 элементов, отображаемых во всплывающем окне, соответствуют элементам, отображаемым на панели области. Почему другие не отображаются там?

В браузере Microsoft Edge v95 он работает так же, как и в Chrome, за исключением того, что в разделе «область действия» отображаются 12 дочерних объектов, а не 13.

Ответ №1:

Разверните [[Prototype]]: Scope , и вы увидите свойства родительской области-вы должны найти свое свойство в родительской области или в родительской области родителя и т. Д…

Это не чисто функция Angularjs-вы можете попробовать этот код в консоли JS:

 a = {test1: 'test1'} b = {test2: 'test2', __proto__: a}  b gt;gt; {test2: "test2", [[Prototype]]: Object} b.test1 gt;gt; 'test1'