Мы привыкли воспринимать DevTools как инструмент для разработчиков и тестировщиков. Но на практике это хороший источник информации и для других специалистов: через него можно понять, как устроена страница, где возникают проблемы и как интерфейс ведет себя в разных сценариях.
Попросили Костю, frontend-разработчика Naumen, рассказать, какие возможности DevTools он использует в работе и на что стоит обращать внимание.
1️⃣ Как открыть DevTools, если F12 не сработал
Самый простой способ — клавиша F12 для Windows/Linux. На macOS сочетание отличается, но открыть DevTools можно не только с клавиатуры.
Например, через контекстное меню — нажать правой кнопкой мыши на элемент страницы и выбрать «Исследовать элемент». DevTools откроются сразу на нужном месте.
Иногда DevTools пытаются ограничить на уровне страницы, и стандартный способ не работает. В таких случаях выручают браузерные расширения с похожими возможностями.
2️⃣ Как работать с версткой во вкладке Элементы
Вкладка Элементы показывает DOM-дерево страницы — структуру документа, из которого собран интерфейс.
Здесь можно:
навести курсор на элемент и посмотреть, где он находится на странице
быстро найти нужный блок через селектор
посмотреть размеры, фон и отступы
А еще можно посмотреть доступность — как элементы переключаются через Tab.
3️⃣ Как находить итоговые стили
Если у элемента много CSS-правил, я перехожу во вкладку Вычисленные.
Там собраны все итоговые стили элемента — включая те, что пришли через наследование или заданы браузером. Можно быстро найти нужное свойство, например, border-radius, и понять, какое значение реально применяется.
4️⃣ Как проверять изменения без правок в коде
Элементы можно менять прямо в браузере: редактировать текст, менять цвет, удалять элементы или добавлять их — можно вручную вставить длинный текст и посмотреть, не ломается ли верстка.
После обновления страницы все возвращается как было.
5️⃣ Как разбирать запросы во вкладке Сеть
Во вкладке Сеть видно, какие запросы отправляет страница и что приходит в ответ. А еще в этой вкладке есть не только список запросов, но и инструменты для фильтрации, поиска и просмотра этапов выполнения. Если нужно исключить что‑то из поиска, можно использовать инверсию или минус в строке фильтра.
Также можно сохранить HAR-файл и передать его разработчику — в нем будет вся история сетевых запросов. Но в HAR попадут только те запросы, которые видны с учетом текущих фильтров.
6️⃣ Как подменять ответ бэка
В DevTools можно изменить ответ запроса и посмотреть, как на него отреагирует интерфейс.
Я использую это, когда нужно проверить нестандартный кейс. Например, подставить более длинный текст или другие данные и посмотреть, что произойдет на странице.
7️⃣ Как проверять работу при медленном интернете
DevTools позволяют проверить, как работает интерфейс при плохом соединении. Во вкладке Сеть можно:
выбрать готовые профили — 3G, 4G
настроить собственную скорость сети
протестировать поведение приложения в режиме офлайн
8️⃣ Как работать с локальными данными
Во вкладке Приложение можно посмотреть данные, которые браузер сохраняет на стороне пользователя:
Локальное хранилище — данные, которые сохраняются надолго и не исчезают после перезагрузки страницы.
Сессионное хранилище — данные, которые живут только пока открыта вкладка.
Файлы cookie — похожи на локальное хранилище, но у них есть срок жизни и дополнительные ограничения по источнику.
Все это можно просматривать, изменять и очищать.
9️⃣ Как менять геолокацию и часовой пояс
DevTools позволяют изменить геолокацию и часовой пояс, не меняя настройки операционной системы.
Можно выбрать готовую точку или указать координаты вручную. Полезно, когда нужно проверить поведение элементов в другом городе, регионе или стране.
🔟 Как записывать пользовательские сценарии
Инструмент Регистратор умеет записывать действия пользователя на странице — фиксируются шаги, например, клики и переходы по интерфейсу.
После записи сценарий можно воспроизвести, отредактировать, сохранить и отправить коллегам.
