Просмотр свойств объектов 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 () . Метод.

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