Что такое DevTools

Современные браузеры — Chrome, Safari, Firefox, Edge, Яндекс и другие — имеют встроенные инструменты разработчика. С их помощью можно посмотреть исходный код сайта, какая информация хранится в cookies, а какая в local storage, проверить, какие запросы отправляет сайт и какие ответы присылает сервер. И многое другое.

Как открыть DevTools

Первый способ. Нажать в браузере правой кнопкой мыши и выбрать последний пункт списка — «Просмотреть код» / Inspect.

Второй способ. Горячие клавиши:

Вкладка Elements

Содержит две кнопки: выбор элемента курсором и переключение в режим выбора устройств. Пригодится для тестирования вёрстки — здесь можно посмотреть размеры любого объекта на экране, его цвет и шрифт текста.

При выборе DOM-элемента на вкладке Styles отображаются все CSS-правила, применяемые к нему, включая неактивные. Правила разбиты на блоки и упорядочены по убыванию специфичности селектора. Значения можно менять на лету, деактивировать и дописывать новые правила — и сразу видеть, как это влияет на отображение.

Что здесь чаще всего делает тестировщик

• Смотрит шрифт, цвет и размер любого элемента на странице
• Проверяет цвет hover-эффекта, зафиксировав состояние через :hov
• Сверяет вёрстку с макетом по пикселям

Toggle Device Toolbar — режим устройств

Позволяет примерно представить, как страница выглядит на телефоне или планшете. На реальном устройстве что-то может отличаться, но для первичной проверки хватает.

1. Выпадающее меню с устройствами — можно выбрать готовое, например iPhone 12 Pro, его разрешение подставится автоматически
2. В полях можно задать любой размер экрана вручную, а также увеличить масштаб, не меняя разрешение
3. Меню throttling — регулирует скорость интернета на устройстве
4. Кнопка Rotate — переключает портретную и альбомную ориентацию

Вкладка Console

Нужна для логирования диагностической информации и работы с JavaScript на странице. Все ошибки JavaScript выводятся здесь с указанием файла и конкретного места, где произошла ошибка. Речь идёт об ошибках на фронтенде.

Уровни сообщений

• Errors — ошибки и проблемы, которые могут привести к некорректной работе приложения. Требуют вмешательства и исправления
• Warnings — предупреждения и потенциальные проблемы, не критические. Неправильное использование, некорректные данные и другие ситуации, требующие внимания
• Info — информация о ходе работы и важных событиях: начало и окончание операций, загрузка ресурсов, отправка и получение запросов, изменение состояния приложения
• Filter — фильтрация вывода по подстроке

Вкладка Network

Позволяет мониторить процесс загрузки страницы и всех файлов, которые подгружаются. Удобна для оптимизации загрузки и наблюдения за запросами.

Панель управления

• Stop Recording Network — останавливает запись запросов и ответов
• Clear Network — очищает историю запросов
• Filter — активирует панель фильтров
• Preserve log — не очищает данные при перезагрузке страницы
• Disable cache — отключает кэш браузера, работает пока открыт DevTools
• Throttling — регулирует скорость интернета
• Fetch/XHR — показывает только запросы к бэкенду
• Export HAR — скачивает все запросы и ответы, файл .HAR открывается в Charles

Колонки

• Name — название запроса или ответа
• Status — статус-код ответа
• Type — тип файла
• Initiator — место в коде, которое вызвало запрос
• Size — вес запроса или ответа
• Time — время загрузки ресурсов

Если провалиться внутрь запроса

• Headers — тип запроса, URL, заголовки запроса и ответа, статус-код
• Payload — тело запроса, если оно есть
• Preview — тело ответа в удобном для человека виде
• Response — то же тело ответа, но неотформатированный исходник
• Cookies — куки, если они есть

Вкладка Performance

Тестировщику в повседневной работе почти не нужна.

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

Вкладка Application

Для инспектирования и очистки всех загруженных ресурсов: баз IndexedDB и Web SQL, local и session storage, куков, кэша, изображений, шрифтов и таблиц стилей.

• Storage — хранилище данных. Кнопка Clear site data очищает кэш и куки
• Local Storage — постоянное хранилище. Данные не удаляются автоматически и не имеют срока действия, на сервер в HTTP-запросе не передаются. Объём для домена в Chrome и Firefox — 5 МБ
• Session Storage — временное хранилище, очищается после закрытия браузера
• Cookies — все куки, их можно изменить или удалить
• Cache storage — весь кэш, который хранится в браузере

Вкладка Lighthouse

Инструмент от Google для проверки производительности сайта. Не просто ставит оценку, а даёт конкретные рекомендации, что улучшить.

• Device — выбор версии страницы для проверки: мобильная или десктопная
• Categories — категории для анализа: производительность, доступность и другие
• Analyse page load — запуск анализа, занимает 10–20 секунд

Параметры оценки

• Performance — скорость загрузки. На оценку влияют время блокировки, загрузка интерактивных элементов, отрисовка стилей, шрифтов и контента
• Accessibility — доступность. Могут ли все пользователи получить доступ к контенту и перемещаться по сайту, в том числе без мыши
• Best Practices — безопасность и современные стандарты: HTTPS, отсутствие устаревших API, правильная кодировка
• SEO — соответствие рекомендациям Google: метатеги, доступ к индексации, атрибуты alt у изображений, адаптированность к мобильным экранам

Полезные ссылки

• Полная документация Chrome DevToolsdeveloper.chrome.com, на английском
• Обзоры инструментов разработчикаHabr
• Полезные функции DevTools для тестировщиковSelectel