Просмотр свойств объектов DOM

София Емельянова
Sofia Emelianova

Используйте панель «Элементы» > «Свойства» для просмотра и фильтрации свойств объектов DOM .

Откройте панель свойств.

Чтобы открыть панель «Свойства» , выполните следующие действия:

  1. Откройте Инструменты разработчика . По умолчанию открывается панель «Элементы» .
  2. В дереве DOM выберите узел.
  3. Откройте вкладку «Свойства» . Если вы не видите вкладку, нажмите «Еще» Более , затем выберите его в раскрывающемся меню.

Панель «Элементы» открыта на вкладке «Свойства».

Найдите собственную недвижимость

На панели «Свойства» сначала сортируются и отображаются собственные свойства объекта, выделенные жирным шрифтом.

ALT_TEXT_ЗДЕСЬ

Узнайте происхождение унаследованного имущества

Панель «Свойства» оценивает методы доступа для встроенных элементов и отображает их на объекте как унаследованные и обычным шрифтом.

Чтобы найти происхождение унаследованного свойства, разверните объект, затем его [[Prototype]] , затем вложенный [[Prototype]] и так далее.

Отслеживание свойства размера до его получателя в цепочке прототипов.

В этом примере вы можете проследить, откуда взялось унаследованное свойство size , найдя исходное собственное (жирное) свойство в цепочке прототипов вместе с соответствующим методом получения.

Кроме того, свойства, специфичные для прототипа, отображаются только на прототипах, а не на объектах. Это облегчает диагностику объектов.

Свойства, специфичные для прототипа.

Свойства фильтра

Чтобы быстро найти свойство, начните вводить его имя или значение в текстовом поле «Фильтр» .

Фильтр

Показать все свойства

По умолчанию на панели «Свойства» не отображаются свойства с null и undefined значениями.

Чтобы просмотреть все свойства, установите флажок «Показать все» .

Свойства с нулевыми значениями.

Понять свойства

На панели «Элементы» > «Свойства» отображаются различные свойства.

Простые свойства

Простые свойства — это пары <name>: <value> . Простые свойства.

Объекты и массивы

Складной ( Стрелка вправо. ) свойства — это объекты {} или массивы [] . Складные свойства.

Дополнительную информацию о проверке объектов JavaScript см. в разделе Проверка свойств объекта .

Свойства, соответствующие узлам DOM

Свойства, соответствующие узлам DOM, являются ссылками. Нажмите на ссылку, чтобы выбрать соответствующий узел в дереве DOM. Ссылка на головной узел DOM.

Собственное и унаследованное имущество

Свойства, выделенные жирным шрифтом, принадлежат объекту. Они определяются непосредственно на объекте.

Свойства, написанные обычным шрифтом, наследуются из цепочки прототипов. Чтобы показать их вам, DevTools оценивает соответствующие средства доступа для встроенных элементов HTML. Собственное и унаследованное имущество. DevTools сначала сортирует собственные свойства, чтобы их было легче обнаружить.

Перечислимые и неперечислимые свойства

Перечислимые свойства имеют яркий цвет. Неперечислимые свойства отключены. Перечислимые и неперечислимые свойства. Вы можете перебирать перечисляемые свойства с помощью цикла for … in или метода Object.keys() .

Методы

Методы отмечены буквой f () . Метод.

Дополнительную информацию о функциях см. в разделе Проверка функций через консоль .