На вкладке «Элементы» в инструментах разработчика Chrome много интересных функций, поддерживающих отладку и ускоряющих работу. К сожалению, начинающие веб-мастера им уделяют недостаточно внимания. В этой статье мы напомним про полезные функции.

Эта статья для начинающих разработчиков. Таких, кто начал заниматься веб-разработкой с нуля и относительно недавно, поэтому под спойлером — очевидные сведения.

Чтобы не запутаться в самом начале

Откройте сайт, который требует отладки, в Chrome.

Если вы хотите отредактировать элемент, щёлкните на нём правой кнопкой.

Нажмите «Просмотреть код». Откроются инструменты разработчика. 

Теперь чётко виден макет:

A — элемент, который надо редактировать 

B — команда вызова кода

C — HTML элемента

D — вкладка «Стиль»

1. Брейкпоинты (точки останова) DOM

Вы можете добавлять брейкпоинты к элементам DOM. Эта функция была в Chrome с 2017 года, но далеко не все её вообще заметили.

Это способ отладки кода, при котором вы можете установить брейкпоинт, отладить код, а потом вернуться к тому месту выполнения кода, где произошёл останов.

Шаги следующие.

1. Щёлкните правой кнопкой на элементе, для которого вы хотите установить брейкпоинт.

2. Выберите пункт меню «Останов на»

3. Затем выберите нужный пункт: модификации поддерева, модификации атрибутов или удаления узла.

Типы брейкпойнтов при изменении DOM:

• Модификации поддерева. Отвечает за удаление или добавление дочернего элемента выбранного узла или за изменения содержимого дочернего элемента.

• Модификации атрибутов. Срабатывает, когда атрибут  (класс, идентификатор, имя) добавляется или удаляется в текущем выбранном узле, или когда значение атрибута изменяется.

• Удаление узла. Срабатывает при удалении выбранного узла из DOM.

2. Сохранить как глобальную переменную

Предположим, вы хотите получить ссылку на элемент в браузере для отладки. Обычно для этого используют методы DOM, такие как document.getElementById или document.getElementsByClassName,  чтобы получить ссылку на узел элемента. Но то же самое делает функция «Сохранить как глобальную переменную» — и всего за один клик.

Используйте контекстное меню, чтобы выбрать параметр «Сохранить как глобальную переменную» при выборе элемента в дереве DOM.

Введите temp1 в консоль, чтобы увидеть выражение.

3. Прокрутить в видимую область

Если существует узел DOM, который не отображается в области просмотра, вы можете изменить положение области просмотра. Для этого нужна функция прокрутки в видимую область.

Функция пригодится, когда вы занимались отладкой и забыли, где были, или не можете найти нужный элемент на странице.

Щёлкните на узле правой кнопкой мыши и выберите «Прокрутить до просмотра». Окно просмотра прокручивается назад, до места с выбранным узлом.

4. Копировать путь JS

Если вы проводите автоматическое тестирование, необходимо скопировать пусть JavaScript путь узла. Делается это через контекстное меню: правый клик на нужном элементе → копировать — копировать путь JS.

Результаты вставляются в консоль (Ctrl + V).

5. Принудительные псевдоклассы для элементов

Вы также можете переключить псевдокласс между :active, :focus, :hover, :loaded, :focus-within или :focus-visible.

Как это делается:

• перейдите на вкладку «Стили»

• выберите :hov

• отметьте псевдокласс

6. Вкладка «Стиль»

Объявления CSS для выбранного элемента можно динамически обновлять, используя вкладки «Стиль» и «Вычисленные» на панели «Элементы».

Селекторы, которые не соответствуют никаким элементам в документе, маркированы сероватым цветом.

Новые стили CSS добавляются на той же вкладке — их можно ввести вручную. По мере ввода будут появляться подсказки-предложения.

Кроме того, можно изменить иерархию DOM, переместив элемент с панели «Элементы» туда, куда требуется.

Используйте палитру, когда присваиваете значения цвета свойствам. Если зажать Shift и кликнуть на цветное поле, получится переключиться между форматами цветопередачи. 

7. Скрыть элемент

Тут всё очевидно: вызываем контекстное меню на вкладке «Элементы», выбираем опцию «Скрыть элемент». А еще для этого есть горячая клавиша — просто h.

8. Удалить элемент

Снова вызываем контекстное меню на вкладке «Элементы, в этот раз — чтобы полностью удалить элемент из DOM. На Mac можно использовать Control+Z или Command+Z.

9. Найти элемент

Перед тем как начать поиск, убедитесь, что вкладка активна. Затем просто нажмите Ctrl+F, и в нижней части дерева DOM появится панель поиска. (Панель поиска поддерживает селекторы CSS и XPath.)

В Chrome DevTools много полезных функций, которые ускоряют работу и в целом дают больше возможностей. Конечно, чтобы всё это применять, нужно практиковаться и вырабатывать привычку мыслить как разработчик.