Мы проводим много времени в DevTools, и уверены, что вы тоже. Иногда даже переключаемся между ними, особенно когда отлаживаем кроссбраузерные проблемы. DevTools во многом похожи на сами браузеры — не все функции DevTools одного браузера будут такими же или поддерживаться в DevTools другого браузера.
Но существует довольно много функций DevTools, которые совместимы, даже некоторые менее известные, которыми мы собираемся поделиться с вами.
Для краткости будем использовать “Chromium” для обозначения всех браузеров на базе Chromium, таких как Chrome, Edge, Opera и Яндекс.Браузер. Многие из используемых в них DevTools предлагают абсолютно те же функции и возможности, что и друг у друга, так что это просто сокращение для обозначения их всех сразу.
Иногда дерево 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 каждого браузера эта опция обозначена по-разному:
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 будут отображать его как белый фон.
Есть еще один вариант! Вы можете сделать “адаптивный” снимок экрана страницы, который позволяет захватить страницу с определенной шириной окна просмотра. Как и следовало ожидать, у каждого браузера есть разные способы добраться туда.
Cmd + Shift + M (macOS) или Ctrl + Shift + M (Windows). Или щелкните значок “Устройства” рядом со значком “Проверить”.
Chrome позволяет визуализировать и проверять элементы верхнего уровня, такие как диалоговое окно, оповещение или модальный. Когда элемент добавляется в #top-layer, рядом с ним появляется top-layer значок, который при нажатии переводит вас в контейнер верхнего уровня, расположенный сразу после </html> тега.
Порядок элементов в top-layer контейнере соответствует порядку размещения, что означает, что последний находится сверху. Щелкните по reveal значку, чтобы вернуться к узлу.
Firefox связывает элемент, ссылающийся на атрибут ID, с его целевым элементом в том же DOM и выделяет его подчеркиванием. Используйте CMD + Click (macOS) или CTRL + Click (Windows) ) для перехода к целевому элементу с идентификатором.
Довольно много всего, не так ли? Потрясающе, что есть несколько невероятно полезных функций DevTools, которые поддерживаются как в Chromium, так и в Firefox и Safari. Есть ли какие-либо другие менее известные функции, поддерживаемые всеми тремя, которые вам нравятся?
Еще советы по DevTools в нашей группе Вконтакте - DevTools >
Другие статьи по теме:
На каждое действие в Интернете должна быть реакция. Обратная связь может сообщить пользователю, было ли действие успешным или нет, но в идеале она расскажет ему больше, например, что делать дальше или почему действие занимает так много времени.
2026 год не обещает быть революционным. Похоже, что он будет восстанавливающим. Потому что веб не должен становиться умнее в следующем году. Просто всё должно снова ощущаться реальным.
Дословно лендинг пейдж переводится с английского (landing page) как целевая страница. В Рунете можно встретить еще один перевод термина лендинг пейдж – посадочная страница...
Люди больше не интересуются общими веб-сайтами. Несмотря на то, что сайт эстетически и навигационно приятен, он должен быть привлекательным для пользователя. Большинство брендов уже начали работать над этим и наняли дизайнеров веб-сайтов, которые могли бы им помочь.
Сегодня веб-дизайн представляет собой смесь технологий и этики. Новые технологии, такие как виртуальная и дополненная реальность, создают иммерсивный опыт, сочетая цифровое и материальное. В то же время мы вновь сосредоточились на этических соображениях, включая конфиденциальность пользователей, доступность и инклюзивность.
Дизайн пользовательского интерфейса в 2026 году — это не про красивые экраны, а про устранение препятствий, которые пользователи не могут объяснить, но сразу чувствуют.
