DevTools — основной инструмент веб-тестировщика в буквальном смысле: не работать с ним в этой профессии не получится. Открывается панель клавишей F12, правой кнопкой мыши через «Inspect» или из меню браузера. В предыдущей статье мы разобрали, как браузер превращает HTML в картинку на экране, — теперь пройдёмся по вкладкам, которыми тестировщик пользуется на практике каждый день: от эмуляции устройств до автоматического аудита сайта.
Device Toolbar — эмуляция мобильных устройств
Иконка в верхнем левом углу DevTools включает режим адаптивной проверки. Здесь доступен свободный Responsive-режим с произвольной шириной и высотой, готовые пресеты популярных устройств (iPad Pro, iPhone, Galaxy и другие), а также возможность задать кастомные размеры экрана и user agent вручную. Отдельно полезны throttling — искусственное замедление скорости интернета (Fast 3G, Slow 3G, Offline или свой профиль) — и поворот экрана, важный при проверке адаптивной вёрстки. Стандартные брейкпоинты в пресетах — 320px для мобильных, 375 и 425, 768 для планшетов, 1024 для ноутбуков, 1440 для десктопа и вплоть до 4K.
Важный нюанс: эмуляция в DevTools — это лишь имитация размеров экрана, без движка настоящего мобильного браузера. Если баг воспроизводится на настоящем телефоне, но не в этой эмуляции, помогает удалённая отладка через chrome://inspect и подключение устройства по USB.
Важный нюанс: эмуляция в DevTools — это лишь имитация размеров экрана, без движка настоящего мобильного браузера. Если баг воспроизводится на настоящем телефоне, но не в этой эмуляции, помогает удалённая отладка через chrome://inspect и подключение устройства по USB.
Elements и Console — HTML, стили и ошибки JavaScript
Elements показывает DOM-дерево страницы вместе с панелью Styles и блочной моделью — это представление HTML, которое браузер строит сам для себя, чтобы эффективно работать со структурой страницы. Именно здесь тестировщик сверяет фактическую вёрстку с тем, что задумано в макете.
Console — журнал событий браузера. Здесь видны ошибки JavaScript вроде Uncaught TypeError, логи, которые разработчики выводят через console.log(), и целых четыре уровня важности сообщений — error, warn, info, verbose. Консоль можно использовать и как интерпретатор JS прямо на лету: выполнить произвольный код или вызвать alert(). В работе тестировщика типичный сценарий выглядит так: воспроизвели баг на сайте, консоль упала красным текстом ошибки — делаем скриншот вместе с вкладками Network и Console и отправляем разработчику. Отдельно стоит помнить про XSS-инъекции: если сайт позволяет ввести в поле произвольный код, который потом выполнится в браузере, — это серьёзная уязвимость безопасности.
Console — журнал событий браузера. Здесь видны ошибки JavaScript вроде Uncaught TypeError, логи, которые разработчики выводят через console.log(), и целых четыре уровня важности сообщений — error, warn, info, verbose. Консоль можно использовать и как интерпретатор JS прямо на лету: выполнить произвольный код или вызвать alert(). В работе тестировщика типичный сценарий выглядит так: воспроизвели баг на сайте, консоль упала красным текстом ошибки — делаем скриншот вместе с вкладками Network и Console и отправляем разработчику. Отдельно стоит помнить про XSS-инъекции: если сайт позволяет ввести в поле произвольный код, который потом выполнится в браузере, — это серьёзная уязвимость безопасности.
Network — ключевая вкладка для тестировщика
Если выбирать одну вкладку DevTools, без которой веб-тестировщику не обойтись, это Network: здесь видна вся интеграция клиента с сервером — запросы и ответы. Запись идёт автоматически, но если DevTools был закрыт в момент загрузки страницы, часть запросов не попадёт в лог — страницу нужно перезагрузить при открытой панели.
Полезные возможности вкладки: фильтры по типу запроса (XHR/Fetch, JS, CSS, картинки, шрифты, документы, WebSocket), поиск по названию, throttling скорости интернета, подмена user agent, а также чекбокс Disable cache, который заставляет браузер каждый раз обращаться к серверу заново.
Кэш заслуживает отдельного внимания — это классическая причина, по которой тестировщик открывает сайт после того, как разработчик пофиксил баг, и видит старую версию. Браузер просто взял HTML из локального хранилища вместо того чтобы запросить его у сервера заново. Решений три: жёсткая перезагрузка (Ctrl+Shift+R), включение Disable cache во вкладке Network или тестирование в режиме инкогнито, где кэш по умолчанию отключён — это и есть рекомендованный способ для повседневной работы.
При клике на конкретный запрос открывается пять вкладок с деталями: Headers (URL, метод, статус ответа, заголовки запроса и ответа), Payload (данные формы или query-параметры), Preview (красиво отформатированный ответ, например развёрнутый JSON), Response (сырой текст ответа сервера) и Cookies (куки конкретного запроса). Полезная функция по правому клику — Copy as cURL, которая позволяет скопировать запрос и воспроизвести его в терминале вне браузера, а Block request URL даёт возможность заблокировать конкретный ресурс и проверить, например, что происходит, если картинка не загрузилась.
Полезные возможности вкладки: фильтры по типу запроса (XHR/Fetch, JS, CSS, картинки, шрифты, документы, WebSocket), поиск по названию, throttling скорости интернета, подмена user agent, а также чекбокс Disable cache, который заставляет браузер каждый раз обращаться к серверу заново.
Кэш заслуживает отдельного внимания — это классическая причина, по которой тестировщик открывает сайт после того, как разработчик пофиксил баг, и видит старую версию. Браузер просто взял HTML из локального хранилища вместо того чтобы запросить его у сервера заново. Решений три: жёсткая перезагрузка (Ctrl+Shift+R), включение Disable cache во вкладке Network или тестирование в режиме инкогнито, где кэш по умолчанию отключён — это и есть рекомендованный способ для повседневной работы.
При клике на конкретный запрос открывается пять вкладок с деталями: Headers (URL, метод, статус ответа, заголовки запроса и ответа), Payload (данные формы или query-параметры), Preview (красиво отформатированный ответ, например развёрнутый JSON), Response (сырой текст ответа сервера) и Cookies (куки конкретного запроса). Полезная функция по правому клику — Copy as cURL, которая позволяет скопировать запрос и воспроизвести его в терминале вне браузера, а Block request URL даёт возможность заблокировать конкретный ресурс и проверить, например, что происходит, если картинка не загрузилась.
Application — где браузер хранит данные
Application отвечает за хранилища браузера, и тестировщику важно понимать разницу между ними. Cookies занимают немного места, но автоматически отправляются на сервер с каждым запросом к своему домену в заголовке Cookie — сюда чаще всего кладут токены авторизации. Local Storage и Session Storage измеряются мегабайтами, но на сервер не отправляются никогда — доступ к ним только вручную через JavaScript; разница между ними в том, что Session Storage стирается при закрытии вкладки, а Local Storage сохраняется. Реже используются IndexedDB и Cache Storage для больших объёмов клиентских данных и PWA-кэша соответственно.
Практический приём для поиска, где именно хранится токен авторизации: зайти на сайт авторизованным пользователем, открыть Application и поочерёдно очищать Session Storage, Local Storage и Cookies, наблюдая, после какого действия сайт разлогинивает. В большинстве случаев токен обнаруживается именно в Cookies.
Каждая кука имеет набор атрибутов, которые стоит проверять на реальных проектах: домен и путь, к которым она привязана, срок жизни (Expires/Max-Age), флаг HttpOnly (недоступность из JavaScript — защита от XSS), флаг Secure (передача только по HTTPS) и SameSite (защита от CSRF-атак). Отсутствие нужных флагов на чувствительных куках — повод для отдельного бага в сторону безопасности.
Практический приём для поиска, где именно хранится токен авторизации: зайти на сайт авторизованным пользователем, открыть Application и поочерёдно очищать Session Storage, Local Storage и Cookies, наблюдая, после какого действия сайт разлогинивает. В большинстве случаев токен обнаруживается именно в Cookies.
Каждая кука имеет набор атрибутов, которые стоит проверять на реальных проектах: домен и путь, к которым она привязана, срок жизни (Expires/Max-Age), флаг HttpOnly (недоступность из JavaScript — защита от XSS), флаг Secure (передача только по HTTPS) и SameSite (защита от CSRF-атак). Отсутствие нужных флагов на чувствительных куках — повод для отдельного бага в сторону безопасности.
Security и Lighthouse — аудит сайта
Security показывает информацию о SSL/TLS-сертификате: кем выдан, когда истекает — публичные данные, но иногда полезные при проверке продакшн-окружения.
Lighthouse — встроенный в Chrome автоматический аудит сайта, который стоит знать каждому тестировщику. Настраивается тип устройства (Desktop или Mobile) и категории проверки — Performance, Accessibility, Best Practices, SEO, PWA. После нажатия «Analyze page load» Lighthouse несколько раз перезагружает страницу, собирает метрики и выдаёт отчёт с баллами от 0 до 100 по каждой категории. Инструмент находит медленную первую загрузку с конкретными рекомендациями по ускорению, неиспользуемый JS и CSS с указанием, сколько килобайт можно сэкономить, слишком большие картинки, изображения без атрибута alt, недостаточную контрастность текста и проблемы с SEO-метатегами. Отчёт можно экспортировать в JSON или HTML и отправить разработчику или заказчику как основание для доработок.
Из менее востребованных в ручном тестировании вкладок стоит хотя бы знать про существование: Sources показывает все ресурсы, которые подгружает сайт (полезно, когда нужно понять, с скольких серверов вообще собирается страница), а Performance визуализирует этапы рендеринга в виде временной шкалы — на практике в ручном QA используется редко, но на собеседовании спросить могут.
Если собрать всё воедино, три вкладки, в которых тестировщику стоит ориентироваться уверенно, — это Elements (клиентская часть), Network (серверная интеграция) и Application (хранилища). Остальные — Console, Sources, Security, Lighthouse — дополняют картину и всплывают по мере необходимости на конкретных задачах.
Уверенная работа с DevTools — инструмент, которым тестировщик пользуется каждый день на реальном проекте. На курсе «Инженер по ручному тестированию» в Quality Academy этому посвящён отдельный блок практики на реальных сайтах.
-------
Lighthouse — встроенный в Chrome автоматический аудит сайта, который стоит знать каждому тестировщику. Настраивается тип устройства (Desktop или Mobile) и категории проверки — Performance, Accessibility, Best Practices, SEO, PWA. После нажатия «Analyze page load» Lighthouse несколько раз перезагружает страницу, собирает метрики и выдаёт отчёт с баллами от 0 до 100 по каждой категории. Инструмент находит медленную первую загрузку с конкретными рекомендациями по ускорению, неиспользуемый JS и CSS с указанием, сколько килобайт можно сэкономить, слишком большие картинки, изображения без атрибута alt, недостаточную контрастность текста и проблемы с SEO-метатегами. Отчёт можно экспортировать в JSON или HTML и отправить разработчику или заказчику как основание для доработок.
Из менее востребованных в ручном тестировании вкладок стоит хотя бы знать про существование: Sources показывает все ресурсы, которые подгружает сайт (полезно, когда нужно понять, с скольких серверов вообще собирается страница), а Performance визуализирует этапы рендеринга в виде временной шкалы — на практике в ручном QA используется редко, но на собеседовании спросить могут.
Если собрать всё воедино, три вкладки, в которых тестировщику стоит ориентироваться уверенно, — это Elements (клиентская часть), Network (серверная интеграция) и Application (хранилища). Остальные — Console, Sources, Security, Lighthouse — дополняют картину и всплывают по мере необходимости на конкретных задачах.
Уверенная работа с DevTools — инструмент, которым тестировщик пользуется каждый день на реальном проекте. На курсе «Инженер по ручному тестированию» в Quality Academy этому посвящён отдельный блок практики на реальных сайтах.
-------
Полезные ссылки школы
Сайт Quality Academy:
https://quality-academy.ru/main
Telegram-канал:
https://t.me/quality_academy
YouTube-канал:
https://www.youtube.com/@quality_academy
ВКонтакте:
https://vk.com/quality_academy
Канал отзывов учеников (58+ отзывов):
https://t.me/quality_academy_reviews
Задать вопрос менеджеру:
https://t.me/quality_academy_bot
Тест «Подойдёт ли вам тестирование»:
https://quiz.quality-academy.ru
5000+ вопросов с собесов тестировщика — бот-тренажёр:
https://t.me/quality_academy_interview_bot
3 практические задачи и дорожная карта:
https://t.me/quality_academy_tasks_bot
Бесплатные тренажёры — SQL Arena, Playwright Arena, Python Arena:
SQL Arena · Playwright Arena · Python Arena
https://quality-academy.ru/main
Telegram-канал:
https://t.me/quality_academy
YouTube-канал:
https://www.youtube.com/@quality_academy
ВКонтакте:
https://vk.com/quality_academy
Канал отзывов учеников (58+ отзывов):
https://t.me/quality_academy_reviews
Задать вопрос менеджеру:
https://t.me/quality_academy_bot
Тест «Подойдёт ли вам тестирование»:
https://quiz.quality-academy.ru
5000+ вопросов с собесов тестировщика — бот-тренажёр:
https://t.me/quality_academy_interview_bot
3 практические задачи и дорожная карта:
https://t.me/quality_academy_tasks_bot
Бесплатные тренажёры — SQL Arena, Playwright Arena, Python Arena:
SQL Arena · Playwright Arena · Python Arena