Панель Networ

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

➡️Поймать ошибку, которую не видно глазу. Кнопка нажалась, но ничего не произошло? Загляни в Network! Красный статус 4xx или 5xx (например, 404, 500) сразу укажет на сломанный запрос.

➡️Проверить, что данные ушли верно. Нажали «Отправить заявку»? В Network можно увидеть, какие именно данные (имя, телефон) ушли на сервер и в каком формате.

➡️Найти причину медленной работы. Сайт «тупит»? Визуальный график загрузки (Waterfall) покажет, какой файл (скрипт, картинка) грузился дольше всех и на каком этапе (DNS, сервер, скачивание).

➡️Протестировать API без Postman. Видите запросы типа XHR или Fetch? Это общение с сервером. Можно проверить запрос (Request) и ответ (Response) прямо в браузере.

🔍Основные элементы интерфейса (Что где искать?)

Панель управления (верхняя полоса):

🟡Preserve log — . Сохраняет записи при перезагрузке страницы или переходе по ссылкам. Всегда включайте при тестировании последовательных действий. 🟡Disable cache — Отключает кеш браузера. Помогает тестировать загрузку «свежих» данных, как у нового пользователя. 🟡No Throttling /  Throttling — Позволяет эмулировать медленную сеть (3G) или полное отключение сети. Незаменимо для проверки работы при плохом интернете, таймаутов и отображения лоадеров.

👁️Таблица запросов (основное окно):

Name/URL — что запрашиваем (файл или API) Status — код ответа ✅2xx — успех 🔁3xx — перенаправление 🔴4xx — ошибка клиента (не найден доступ, неверные данные) 🔴5xx — ошибка сервера (сломалось на backend) Type — тип: XHR/Fetch (ваши API), JS, CSS, Img Time — время загрузки (сортируйте ↕️ для поиска «тормозов») Waterfall: Визуальная полоска, показывающая этапы загрузки.

Детальная информация (нижняя панель): Открывается при клике на любой запрос.

- Headers: Заголовки запроса и ответа. Содержат техническую информацию (куки, тип данных, метод запроса — GET/POST). - Payload/Request: ЧТО мы отправили на сервер. Смотрите сюда, если форма передала не те данные. Preview/Response: ЧТО мы получили от сервера. JSON, HTML-фрагмент или сообщение об ошибке. - Timing: Подробная хронология запроса. Показывает, сколько времени ушло на DNS-поиск, подключение, ожидание ответа сервера

👍Лайфхаки

1. Фильтрация — ваш лучший друг Не смотрите на все запросы сразу. Используйте кнопки: ☺️_XHR/Fetch — только API (90% ваших проверок)_ ☺️_JS / CSS — ошибки в скриптах или стилях_ ☺️_Img — проверка загрузки картинок_

Также вводите часть URL в поле фильтра над таблицей.

2. Эмуляция мобильных устройств + Network - Нажмите Ctrl+Shift+M (или иконку 📱 в DevTools). - Выберите конкретный телефон (iPhone 12, Pixel 5). - В панели Network установите Throttling → «Fast 3G». Обновите страницу. Теперь вы видите сайт точно как на телефоне с реальной медленной сетью!

📌ВЫ НАШЛИ ОШИБКУ. ЧТО ДАЛЬШЕ? - Скопируйте/запомните URL запроса и код статуса. - Кликните на запрос и проверьте: - Вкладка Response — текст ошибки от сервера. - Вкладка Payload/Request — какие данные вы отправили (правильные ли?). Опишите в баг-репорте: Шаги: «1. Заполнил форму… 2. Нажал «Отправить»… Факт: «Запрос POST /api/submit вернул статус 500». Детали: «В ответе сервера: {“error”: “Database connection failed”}». Скриншот/файл: Прикрепите скриншот панели Network

Вывод Панель Network не требует знания программирования. Она требует внимательности к деталям:

🔴Красный статус? — Баг. 🐢 Долгая загрузка? — Проблема с производительностью. 📤Данные ушли не те? — Баг на фронтенде. 📥Ответ не тот? — Баг на бэкенде.

Начните с простого: сегодня же откройте любой сайт, Network и нажмите F5. Вы уже сделаете первый шаг

Дополните информацию в посте , комментариями 🤓

#знания