Некоторые функции кросс-браузерных DevTools или "инструментов разработчика", о которых вы, возможно, не знаете

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

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

Для краткости будем использовать “Chromium” для обозначения всех браузеров на базе Chromium, таких как Chrome, Edge, Opera и Яндекс.Браузер. Многие из используемых в них DevTools предлагают абсолютно те же функции и возможности, что и друг у друга, так что это просто сокращение для обозначения их всех сразу.

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

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

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

В браузерах Chromium фокус автоматически переходит к узлу, который соответствует критериям поиска при вводе текста, что может раздражать, если вы работаете с более длинными поисковыми запросами или большим деревом DOM. К счастью, вы можете отключить это поведение, перейдя в Настройки (F1) → Настройки → Глобальный → Поиск по мере ввода → Отключить.

После того, как вы определили местоположение узла в дереве DOM, вы можете прокрутить страницу, чтобы вывести узел в область просмотра, щелкнув правой кнопкой мыши на узле и выбрав “Перейти в режим просмотра”.

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

DevTools предоставляет множество различных способов доступа к DOM-узлу непосредственно с консоли.

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

Еще одна вещь, которую браузеры Chromium позволяют вам сделать, это скопировать путь к узлу в виде выражения JavaScript в форме document.querySelector, щелкнув правой кнопкой мыши по узлу и выбрав Копировать → Скопировать путь JS, который затем можно использовать для доступа к узлу в консоли.

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

• Chromium: щелкните правой кнопкой мыши → “Сохранить как глобальную переменную”
• Firefox: щелкните правой кнопкой мыши → “Использовать в консоли”
• Safari: щелкните правой кнопкой мыши → “Элемент журнала”

Визуализируйте элементы с помощью значков

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

В Safari на панели инструментов панели элементов есть кнопка "Значок", с помощью которой можно переключать видимость определенных значков. Например, если к узлу применено объявление CSS display: grid или display: inline-grid, рядом с ним отображается grid значок. При нажатии на значок на странице выделяются области сетки, размеры дорожек, номера строк и многое другое.

Значки, которые в настоящее время поддерживаются в DevTools Firefox, перечислены в исходных документах Firefox. Например, scroll значок указывает на прокручиваемый элемент. Щелчок по значку выделяет элемент, вызывающий переполнение, с overflow значком рядом с ним.

В браузерах Chromium вы можете щелкнуть правой кнопкой мыши на любом узле и выбрать “Настройки значков ...”, чтобы открыть контейнер со списком всех доступных значков. Например, элементы с scroll-snap-type будут иметь scroll-snap значок рядом с ним, который при нажатии переключает scroll-snap наложение на этот элемент.

Создание скриншотов

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

Процесс начинается с щелчка правой кнопкой мыши на DOM-узле, который вы хотите захватить. Затем выберите опцию для захвата узла, который помечается по-разному в зависимости от того, какие DevTools вы используете.

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

Есть еще один вариант! Вы можете сделать “адаптивный” снимок экрана страницы, который позволяет захватить страницу с определенной шириной окна просмотра. Как и следовало ожидать, у каждого браузера есть разные способы добраться туда.

• Chromium: Cmd + Shift + M (macOS) или Ctrl + Shift + M (Windows). Или щелкните значок “Устройства” рядом со значком “Проверить”.
• Firefox: Инструменты → Инструменты браузера → “Режим адаптивного дизайна”
• Safari: разработка → “Войдите в режим адаптивного дизайна”

Совет Chrome: осмотрите верхний слой

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

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

Совет Firefox: перейдите к ID

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

Подведение итогов

Довольно много всего, не так ли? Потрясающе, что есть несколько невероятно полезных функций DevTools, которые поддерживаются как в Chromium, так и в Firefox и Safari. Есть ли какие-либо другие менее известные функции, поддерживаемые всеми тремя, которые вам нравятся?

Еще советы по DevTools в нашей группе Вконтакте - DevTools >