Devtools - главный инструмент тестировщика

1. Что такое DevTools и как с ним работать

DevTools (Developer Tools) — это встроенный в браузер (например, Google Chrome) набор инструментов для разработчиков и тестировщиков.

С его помощью можно:

смотреть HTML и CSS страницы 🧱
отслеживать запросы к серверу 🌐
проверять ошибки в консоли ⚠️
смотреть и чистить куки, кэш, localStorage 🍪
эмулировать медленный интернет, мобильный экран 📱

👉 Совет:
Когда читаешь этот разбор, открывай DevTools и кликай параллельно. Так информация лучше «приклеится».

Открыть DevTools в Chrome:

Windows: F12 или Ctrl + Shift + I
Mac: Cmd + Option + I

2. Основные вкладки DevTools и зачем они тестировщику

Нам как тестировщику не нужно знать всё на уровне разработчика.
Обычно в работе ты реально будешь использовать 10–20% возможностей, но:

на собесах часто спрашивают: «Что ты делаешь во вкладке Network/Elements/Console?»
в реальной работе это даёт тебе +100 к полезности.

Ниже пойдём по вкладкам.

🔹 Elements — «Разметка и стили страницы»

Что отображается на вкладке Elements?

Вкладка Elements показывает:

структуру страницы (HTML / DOM-дерево),
применённые стили (CSS),
события, свойства, и т.д.

Проще говоря:
👉 Это «скелет» страницы + «одежда» (стили).

Что можно делать тестировщику в Elements?

Смотреть, из чего состоит элемент: текст, теги, атрибуты
Проверять, почему что-то съехало: отступы, размеры, шрифты
Временно менять текст/стили, чтобы проверить гипотезу
(например, если текст лезет за границы блока — «а что, если уменьшить шрифт?»)

Полезные вещи:

🔍 Выбор элемента курсором
В левом верхнем углу DevTools есть иконка стрелочки.
Нажимаешь её — потом кликаешь по любому элементу на странице — и DevTools сразу показывают HTML этого элемента.
🎨 Вкладка Styles справа
Показывает все CSS-правила, которые действуют на выбранный элемент:

применённые
перечёркнутые (переопределены более сильным правилом)

⚡ Вкладки:

Event Listeners — какие события повешены на элемент (click, input и т.п.)
DOM Breakpoints — точки останова (чаще нужно девам)
Properties — свойства элемента

🔹 Console — «Ошибки и сообщения от кода»

Что полезного тестировщик может увидеть во вкладке Console?

Вкладка Console:

показывает ошибки JavaScript (которые ломают функционал) ⚠️
предупреждения (warnings)
любые лог-сообщения, которые разработчик вывел через console.log()
иногда сюда выводят XHR / fetch запросы

Для тестировщика это:

быстрый способ понять:
«Почему кнопка не работает? А, там ошибка JS…»
аргумент в споре:
«Смотри, при этом действии в консоли ошибка, это явно баг».

Полезные вещи:

можно фильтровать сообщения (ошибки, warning, info)
можно очистить консоль 🧹
можно включить Preserve log — чтобы сообщения не очищались при перезагрузке страницы
консоль можно открыть внизу любой вкладки (клавиша Esc)

🔹 Sources — «Файлы и отладка кода» (для QA — эпизодически)

Вкладка Sources:

показывает все файлы, которые загружены на страницу (JS, HTML, CSS и т.п.)
можно:

открыть файл
посмотреть код
поставить брейкпоинт (точку остановки)
дебажить шаг за шагом

Для начинающего тестировщика часто это не обязательно, если ты не лезешь в сложную отладку.

Но понимать идею полезно:

если разработчик говорит: «Поставь брейкпоинт и глянь параметр» — уже не будет паники 😄

🔹 Network — «Все запросы к серверу» 🌐

Это одна из самых важных вкладок для тестировщика.

Что полезного для тестировщика есть во вкладке Network?

список всех HTTP-запросов, которые отправляет страница
по каждому запросу можно узнать:

URL
метод (GET, POST и т.п.)
статус-код (200, 400, 500 и т.п.)
время выполнения
тело запроса (Request)
ответ (Response)

🕒 Где посмотреть, как долго выполнялся HTTP-запрос?

Открой вкладку Network
Обнови страницу (F5) — увидишь таблицу запросов
Кликни по нужному запросу
Перейди во вкладку Timing
Там видно:

сколько времени занял запрос,
где были задержки (DNS, SSL, Waiting и т.п.).

📦 Где посмотреть тело запроса и ответ?

Выбрать запрос в списке
В правой части:

вкладка Headers — общая инфа (URL, метод, код ответа)
вкладка Payload / Request Body — тело запроса (что мы отправили на сервер)
вкладка Response — тело ответа (что вернул сервер)

Это супер полезно при тестировании API через UI:

«Я отправила такие данные — а сервер ответил вот этим»
«В UI ошибка, но в ответе от сервера всё ок — баг фронта»

🚦 Имитация медленного интернета

Как включить имитацию медленного интернета?

На вкладке Network сверху есть поле Throttling.

Там можно выбрать:

Online (без ограничения)
Slow 3G
Fast 3G
Offline (полностью без сети)

Это помогает протестировать:

как ведёт себя сайт при медленном интернете
корректно ли отображается лоудер / спиннер / сообщения о проблемах с сетью

💾 Отключение кэша

На вкладке Network есть чекбокс Disable cache.

Если включить его — браузер не будет использовать кэш
Важно: это работает только пока открыт DevTools

Это удобно при тестировании:

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

📊 Итоговая сводка по Network

Внизу вкладки Network обычно видно:

количество запросов
общий объём загруженных данных
время:

загрузки DOM
полной загрузки страницы

Это помогает понять:

«Почему сайт тормозит? Потому что грузится 5 МБ картинок и 300 запросов.»

🔹 Performance — «Производительность страницы» ⚙️

Вкладка Performance показывает:

выполнение JS-кода
загрузку ресурсов
FPS
загрузку CPU
задержки анимаций

Обычно её используют:

чтобы анализировать, почему страница тормозит
чтобы понять, где узкие места

Для начинающего тестировщика:
можно пока знать, что она существует, и что это про производительность.

🔹 Memory / JavaScript Profiler — «Память и нагрузка» 🧠

Эти вкладки используют для:

поиска утечек памяти
анализа, какие объекты «зависают» и не освобождаются
профилирования работы JS-кода по CPU

Для ручного тестировщика-джуна это не базовый навык, но круто, если хотя бы:

знаешь, что Memory — про память и утечки
JS Profiler — про нагрузку на процессор

🔹 Application — «Хранилища, кэш, куки, данные сайта» 📦

Это очень полезная вкладка для тестировщика.

Что можно посмотреть во вкладке Application?

Cookies — куки сайта 🍪
Local Storage и Session Storage
IndexedDB, Web SQL
кэш приложения
шрифты, картинки и т.д.

🧼 Как очистить данные сайта через DevTools?

Вкладка Application → обычно слева есть раздел "Clear storage" (или аналог):

там можно:

очистить куки
очистить localStorage
очистить sessionStorage
очистить кэш

Либо можно очистить каждый тип данных отдельно:

Cookies → правый клик → Clear all
Local Storage → очистить конкретные записи

Это полезно, когда:

нужно проверить поведение «как у нового пользователя»
сломалась авторизация и нужно «сбросить состояние»
что-то закэшировалось и не обновляется

❓ Что такое кэш и зачем он нужен?

Кэш — это место, где браузер хранит копии файлов с сайта:

картинки
скрипты
стили

Зачем?

чтобы ускорить загрузку сайта при повторном открытии
не качать одни и те же файлы каждый раз по сети

Но для тестировщика это может быть проблемой:

разработчик что-то обновил,
а ты видишь старую версию из кэша.

Поэтому мы иногда чистим кэш или включаем Disable cache в Network.

❓ Что такое куки и зачем они нужны?

Cookies (куки) — это маленькие файлы/записи, которые сайт сохраняет в браузере.

Обычно в куках хранят:

сессию пользователя (например, токен авторизации)
настройки (язык, тема)
иногда данные для аналитики

Для тестировщика куки важны, потому что:

если удалить куки — пользователю часто нужно войти заново
по кукам можно понять:

авторизован ли пользователь
какая у него сессия

❓ Зачем тестировщику чистить кэш?

Иногда:

у тебя открыта «половина старого кода» или старые стили
сайт ведёт себя странно
разработчик говорит: «А у меня всё норм»

В таких случаях:

чистим кэш / включаем Disable cache
чистим куки, localStorage
заново логинимся

И проверяем ещё раз — уже на «чистых» данных.

🔹 Security — «Безопасность и сертификаты» 🔒

Вкладка Security показывает:

безопасно ли соединение (HTTPS / не HTTPS)
какой сертификат используется
есть ли проблемы с mixed content (когда часть ресурсов грузится по http, часть по https)

Тестировщику это может пригодиться:

если задача связана с безопасностью, SSL, сертификатами
если в браузере появляются предупреждения «Сайт небезопасен»

🔹 Audits (Lighthouse) — «Аудит качества страницы» 🚦

Во вкладке Audits (иногда называется Lighthouse) можно:

запустить анализ страницы
получить отчёт по:

производительности
доступности (accessibility)
SEO
best practices

После запуска анализа DevTools покажет:

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

Для тестировщика-джуна это не must-have, но иногда прикольно показать:

«Я проверил через Lighthouse, у нас низкий рейтинг по performance».

📱 Как включить мобильную версию сайта?

В DevTools есть режим эмуляции устройства.

Открой DevTools
В панели сверху нажми на кнопку Toggle device toolbar
(иконка смартфона/планшета, обычно рядом с Select Element)
Выбери устройство (iPhone, Pixel и т.п.) или задай размеры вручную

В этом режиме можно:

проверить адаптивность
увидеть, как сайт выглядит на маленьком экране
тестировать мобильную вёрстку без настоящего телефона

❓ Какую вкладку чаще всего держим открытой при функциональном тестировании?

На практике тестировщик чаще всего держит открытыми:

Network — чтобы смотреть запросы, ошибки, статусы
Console — чтобы видеть JavaScript-ошибки

Если нужно выбрать прям одну, то чаще полезнее Network,
потому что там:

видно все запросы
видно, где именно всё сломалось (сервер / фронт)
видно статусы и ошибки

Но идеальный вариант: Network + Console.

🧪 Тренажёр для DevTools

У тебя в плане указан тренажёр по DevTools.
Рекомендация: проходить упражнения уже после того, как:ты покликал DevTools руками,почитал эту теорию,попробовал сам:переключить мобильный режим,посмотреть запрос в Network,найти куки в Application,включить Slow 3G.

Дополнительно посмотри тут:

https://youtu.be/4iIryVM77HM?si=ZKl_ZDMjjE3-Etlv

а почитай здесь:

https://habr.com/ru/companies/fuse8/articles/799601/