Используйте панель «Элементы» > «Свойства» для просмотра и фильтрации свойств объектов DOM .
Откройте панель свойств.
Чтобы открыть панель «Свойства» , выполните следующие действия:
- Откройте Инструменты разработчика . По умолчанию открывается панель «Элементы» .
- В дереве DOM выберите узел.
- Откройте вкладку «Свойства» . Если вы не видите вкладку, нажмите «Еще» , затем выберите его в раскрывающемся меню.
Найдите собственную недвижимость
На панели «Свойства» сначала сортируются и отображаются собственные свойства объекта, выделенные жирным шрифтом.
Узнайте происхождение унаследованного имущества
Панель «Свойства» оценивает методы доступа для встроенных элементов и отображает их на объекте как унаследованные и обычным шрифтом.
Чтобы найти происхождение унаследованного свойства, разверните объект, затем его [[Prototype]]
, затем вложенный [[Prototype]]
и так далее.
В этом примере вы можете проследить, откуда взялось унаследованное свойство size
, найдя исходное собственное (жирное) свойство в цепочке прототипов вместе с соответствующим методом получения.
Кроме того, свойства, специфичные для прототипа, отображаются только на прототипах, а не на объектах. Это облегчает диагностику объектов.
Свойства фильтра
Чтобы быстро найти свойство, начните вводить его имя или значение в текстовом поле «Фильтр» .
Показать все свойства
По умолчанию на панели «Свойства» не отображаются свойства с null
и undefined
значениями.
Чтобы просмотреть все свойства, установите флажок «Показать все» .
Понять свойства
На панели «Элементы» > «Свойства» отображаются различные свойства.
Простые свойства
Простые свойства — это пары <name>: <value>
.
Объекты и массивы
Складной ( ) свойства — это объекты {}
или массивы []
.
Дополнительную информацию о проверке объектов JavaScript см. в разделе Проверка свойств объекта .
Свойства, соответствующие узлам DOM
Свойства, соответствующие узлам DOM, являются ссылками. Нажмите на ссылку, чтобы выбрать соответствующий узел в дереве DOM.
Собственное и унаследованное имущество
Свойства, выделенные жирным шрифтом, принадлежат объекту. Они определяются непосредственно на объекте.
Свойства, написанные обычным шрифтом, наследуются из цепочки прототипов. Чтобы показать их вам, DevTools оценивает соответствующие средства доступа для встроенных элементов HTML. DevTools сначала сортирует собственные свойства, чтобы их было легче обнаружить.
Перечислимые и неперечислимые свойства
Перечислимые свойства имеют яркий цвет. Неперечислимые свойства отключены. Вы можете перебирать перечисляемые свойства с помощью цикла for … in
или метода Object.keys()
.
Методы
Методы отмечены буквой f ()
.
Дополнительную информацию о функциях см. в разделе Проверка функций через консоль .