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