Home

Автор: Панкадж Парашар (Pankaj Parashar)
Оригинал статьи
Перевод: Ольга Алифанова

Я провожу в DevTools много времени, как, уверен, и вы. Иногда я даже жонглирую ими, особенно при дебаге кроссбраузерных проблем. DevTools очень похожи на сами браузеры – не все инструменты конкретного браузера схожи или поддерживаются инструментами другого.

Однако ряд функций DevTools будет общим для всех – даже малоизвестные возможности, о которых я вам сейчас расскажу.

Для краткости я говорю Chromium, имея в виду все браузеры на основе Chromium (Chrome, Edge, Opera). DevTools в них, как правило, идентичны, поэтому я объединяю их в одну группу.

Поиск узлов в дереве DOM

Иногда дерево DOM переполнено узлами внутри узлов, которые находятся внутри других узлов, и так далее. В результате довольно трудно найти то, что вы ищете, однако быстро пробежаться по дереву DOM можно при помощи Cmd + F (macOS) или Ctrl + F (Windows).

К тому же можно искать при помощи валидного CSS-селектора вроде .red, или воспользоваться XPath, вроде //div/h1.

Поиск текста в Chrome DevTools (слева), селекторов в Firefox DevTools (по центру), XPath в Safari DevTools (справа).

В Chromium-браузерах фокус автоматически перепрыгивает на совпадающий с поисковым запросом узел по ходу ввода, что может раздражать, если вы работаете с длинными поисковыми запросами или большим деревом DOM. К счастью, это можно отключить: Settings (F1) → Preferences → Global → Search as you type → Disable.

После того, как нужный узел найден, можно пролистать страницу, чтобы подсветить нужный узел – кликните по нему правой кнопкой и нажмите Scroll into view.

Доступ к узлам из консоли

В DevTools можно получить доступ к узлу DOM прямо из консоли различными способами.

К примеру, $0 можно использовать для доступа к узлу, который прямо сейчас выбран в дереве DOM. Chromium-браузеры идут дальше и позволяют получать доступ к выбранным узлам в обратном хронологическом историческом порядке, пользуясь , $1, $2, $3, и т. д.

Chromium-браузеры также позволяют скопировать путь к узлу как JavaScript-выражение в форме document.querySelector: кликните по узлу правой кнопкой и выберите Copy → Copy JS path. Затем можно этим воспользоватья для доступа к узлу через консоль.

Еще один способ получить доступ к узлу DOM прямо из консоли – это временная переменная. Эта возможность доступна по правому клику по узлу с выбором опции. В разных браузерах она называется по-разному:

• Chromium: Правый клик → “Store as global variable”
• Firefox: Правый клик → “Use in Console”
• Safari: Правый клик → “Log Element”

Доступ к узлу через временную переменную в консоли: в Chrome DevTools (слева), Firefox DevTools (по центру), Safari DevTools (справа).

Визуализация элементов при помощи бейджей

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

В Safari кнопка бейджей находится на панели инструментов вкладки Elements и управляет видимостью конкретных бейджей. К примеру, если у узла есть CSS-декларация display: grid или display: inline-grid, то рядом отобразится бейдж grid. Клик по бейджу подсветит области сетки, размеры отступов, номера строк, и т. д.

Оверлей решетки с бейджами в Safari DevTools

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

В Chromium-браузерах можно кликнуть правой кнопкой по любому узлу и выбрать “Badge settings…”: откроется контейнер со всеми доступными бейджами. Скажем, элементы с типом scroll-snap получат scroll-snap-бейдж – по клику на элементе появится scroll-snap-оверлей.

Скриншоты

Некоторые DevTools давно позволяли делать скриншоты, но теперь эта опция доступна везде, включая новые способы сделать снимок всей страницы.

Сначала нужно кликнуть правой кнопкой по узлу DOM, который вы хотите заснять. Затем выберите опцию захвата узла – она по-разному называется в разных DevTools.

Chrome DevTools (слева), Firefox DevTools (по центру), Safari DevTools (справа).

Повторите шаги для узла html, чтобы сделать снимок всей страницы. Тут стоит, однако, отметить, что Safari сохраняет прозрачность фона элемента, а Chromium и Firefox сделают фон белым.

Сравнение скриншотов Safari (слева) и Chromium (справа)

Есть и еще одна опция! Вы можете сделать «отзывчивый» скриншот страницы, позволяющий снять страницу для конкретной ширины экрана. В разных браузерах это делается по-разному:

• Chromium: Cmd + Shift + M (macOS) или Ctrl + Shift + M (Windows). Или клик по иконке “Devices” рядом с иконкой “Inspect”.
• Firefox: Tools → Browser Tools → “Responsive Design Mode”
• Safari: Develop → “Enter Responsive Design Mode”

Запуск режима отзывчивого дизайна в Safari (слева), Firefox (справа), Chromium (внизу)

Совет для Chrome: исследуйте верхний слой

Chrome позволяет визуализировать и исследовать элементы верхнего слоя – диалоговое окно, предупреждение, модальное окно. Когда элемент добавляется в #top-layer, то получает бейдж top-layer: по клику вы попадете в контейнер top-layer, расположенный  сразу после тега </html>.

Порядок элементов в контейнере top-layer следует порядку их компоновки – последний элемент будет сверху. Кликните по бейджу reveal, чтобы вернуться к узлу.

Совет для Firefox: перепрыгните к ID

Firefox связывает элемент, ссылающийся на атрибут ID, с его целевым элементом в том же DOM и подчеркивает его. Используйте CMD + Click (macOS) или CTRL + Click (Windows) для перехода к целевому элементу с этим идентификатором.

Заключение

Неплохо, правда? Здорово, что ряд невероятно полезных опций DevTools поддерживается в Chromium, Firefox и Safari.

Ниже – ресурсы, за которыми я слежу.

• DevTools Tips (Патрик Броссе): коллекция полезных советов по работе с DevTools
• Dev Tips (Умар Ханса): DevTools-подсказки прямо в вашей почте!
• Can I DevTools?: Caniuse для DevTools.

Обсудить в форуме