В предыдущей статье мы разобрали основные элементы DevTools. В этой статье разберём детальнее каждый элемент, научимся взаимодействовать с элементами.
Elements
При активном пункте меню Elements можно просматривать всё DOM-дерево веб-страницы, изменять свойства HTML-элементов и отслеживать изменения на странице без перезагрузки. При выборе любого DOM-элемента на вкладке Styles отображаются все CSS-правила, применяемые к нему, включая неактивные. Правила разбиты на блоки и упорядочены по убыванию специфичности селектора. Можно мгновенно изменять значения, деактивировать и добавлять новые правила, наблюдая за их влиянием на отображение. Для выбранного DOM-элемента также доступны другие вкладки.
- Event Listeners — содержит все события, связанные с выбранным элементом. Например, если для элемента прописано выполнение определённого JavaScript-кода при нажатии на него, это событие будет обозначено как click в данной вкладке.
- DOM Breakpoints — Точки останова для элемента используются программистами для отладки JavaScript-кода. Программист может добавить остановку выполнения скрипта при изменении DOM, которое затрагивает данный элемент, например, при изменении атрибутов элемента, изменении дочерней структуры DOM или полном удалении элемента.
- Properties — список всех свойств для элемента
Также могут быть дополнительные вкладки, добавляемые расширениями для Chrome.
Ключевые возможности:
- Просмотр и редактирование в реальном времени любого элемента DOM.
- Просмотр и изменение CSS-правил, применяемых к выбранному элементу в панели Styles.
- Просмотр полного списка событий и свойств для элемента на соответствующих вкладках.
Выбор элемента для работы
Способы поиска нужного элемента:
- При наведении курсора на код соответствующий элемент на самой странице автоматически подсвечивается, что позволяет визуально связать код с его представлением на странице. Также отображается название тега элемента и его размер в пикселях, что упрощает понимание структуры и размеров элементов на странице.
Если у элемента есть внутренние и внешние поля, они выделяются цветом:
- Можно выбрать режим «Поиск элемента на странице», нажав Ctrl+Shift+C или на иконку:
Когда этот режим активен, при перемещении курсора по веб-странице в панели разработчиков автоматически показывается нужный элемент.
- Через контекстное меню: на любом компоненте веб-страницы кликаем правой кнопкой мышки и выбираем опцию “Просмотреть код” или Исследовать элемент. Это позволяет быстро перейти к исходному коду, связанному с выбранным элементом, что особенно полезно при отладке и анализе структуры страницы.
- Поиском по DOM-дереву. На панели инструментов нажимаем Ctrl+F и вводим строку для поиска, например, тег, CSS-класс или XPath:
Работа с конкретным элементом
Выбрав конкретный элемент, можно менять его свойства и сразу видеть, как это влияет на страницу. Например, можно изменить имя тега, и закрывающий тег автоматически изменится. Аналогично можно менять названия классов, параметры высоты и ширины, отступы — все поля доступны для редактирования. Изменения применяются сразу после клика вне тега.
Дополнительные функции редактирования доступны при клике на три точки слева от выбранного элемента. Аналогичные функции доступны при правом клике на элемент.
Через это меню можно быстро отредактировать элемент как HTML в текстовом поле для ввода, удалить элемент, спрятать его или добавить к нему атрибуты.
Активация псевдоклассов
Псевдоклассы на элементах могут быть вызваны, чтобы исследовать, как элемент может отреагировать, если на него, например, навести мышку. Мы можем активировать псевдоклассы active, focus, hover и visited.
- Активировать псевдокласс можно через меню, доступное при правом клике на элемент.
Наглядное изменение стилей
Для каждого элемента в панели Elements открывается вкладка Styles, где можно выполнять следующие действия:
- Включать и выключать стили: Можно включать и выключать стили с помощью чекбоксов, что позволяет быстро экспериментировать с различными стилями.
- Редактировать стили: Можно изменять значения стилей с клавиатуры, добавлять новые правила и просматривать их влияние на элемент.
- Менять цвета элементов: Можно изменять цвета элементов, что особенно полезно при настройке дизайна.
- Наглядно видеть параметры внешних и внутренних отступов: В панели отображаются параметры внешних и внутренних отступов элемента, что помогает лучше понять структуру и расположение элементов на странице.
К примеру вы можете увеличить шрифт
Но стоит помнить, что эти изменения нигде не сохраняются. Всё, что вы отредактировали, будет потеряно при перезагрузке страницы.
Если у вас есть вопросы или вы просто хотите стать частью команды тестировщиков, то переходи в ТГ канал, где можем пообщаться с единомышленниками и найти много интересных и полезных знаний!Также если вам нужна индивидуальная консультация, менторство и помощь в создании проекта пишите в ТГ канал!