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