Используйте панель «Элементы» для просмотра и редактирования элементов DOM.
Обзор
Панель «Элементы» предоставляет удобный интерфейс для просмотра и манипулирования DOM. Вы можете использовать дерево DOM, напоминающее HTML-документ, для выбора определенных узлов DOM и их изменения с помощью других инструментов.
В панели «Элементы» также имеются следующие вкладки, содержащие соответствующие инструменты:
Стили :
- Просмотр и отладка правил CSS, применяемых к элементу из всех таблиц стилей.
- Найдите все недействительные, переопределенные, неактивные или другие CSS-стили , которые не работают должным образом.
- Редактируйте элементы, добавляя объявление , применяя класс и взаимодействуя с моделью Box .
- Доступ к параметрам редактирования контейнера осуществляется с помощью значков, расположенных в дереве DOM.
Вычисляемые свойства : отображает список разрешенных свойств, применяемых к элементу при его рендеринге в Chrome.
Макет : Содержит параметры для изменения наложений сетки и flexbox .
Обработчики событий : отображает все обработчики событий и их атрибуты. Позволяет найти источник обработчиков событий и отфильтровать их по пассивным или блокирующим обработчикам .
Точки останова DOM : отображает список точек останова изменения DOM , добавленных из панели «Элементы» , и позволяет включать, отключать, удалять или отображать их.
Свойства : Выберите узел DOM, чтобы просмотреть и отсортировать собственные и унаследованные свойства объекта.
Доступность : Отображает список элементов, имеющих метки ARIA, и их свойства. Позволяет переключать и просматривать дерево доступности (экспериментальная функция).
Откройте панель «Элементы».
По умолчанию при открытии инструментов разработчика открывается панель «Элементы». Вы также можете проверить любой узел на странице, чтобы панель «Элементы» открылась автоматически.
Чтобы открыть панель «Элементы» вручную:
- Откройте инструменты разработчика .
- Откройте меню «Команда» , нажав:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P
- Начните вводить
Elements, выберите «Show Elements» и нажмите Enter . DevTools отобразит панель «Elements» в выдвижном меню в нижней части окна DevTools.