Мы проводим много времени в 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 >
Другие статьи по теме:
Веб-сайты служат базовой цифровой идентичностью компаний или брендов. Следовательно, они должны быть спроектированы и поддерживаться наилучшим образом. За прошедшие годы важность визуально привлекательного и высокофункционального веб-сайта многократно возросла...
Даже самые красивые сайты могут разочаровать пользователей, если они будут сбиты с толку, потеряются или не справятся с нагрузкой. В этой статье мы рассмотрим пять распространённых ошибок в UX-дизайне и покажем, как их исправить...
К сожалению, у вас нет целого дня, чтобы впечатлять посетителей своим сайтом. У вас может быть лучший контент в мире, но и его можно игнорировать. Важны первые несколько секунд, когда клиент попадает на ваш сайт. Вам нужно убедиться, что вы сразу привлекаете их внимание, прежде чем они даже перейдут к вашему контенту.
Вы неравнодушны к красному цвету? Тогда эта статья для вас. Смотрите и комментируйте.
Создание сайта - трудный и требующий внимания, креативности и умственных способностей процесс. Если вы уже перерыли интернет и прониклись хоть чуть-чуть в тему создания сайта, то для Вас не станет удивлением наличие такого фактора, как юзабилити, иначе говоря удобство сайта. Прежде всего, сайт должен быть удобным для посетителей - это самая главная "фишка"...
