Как вы используете вкладку Network в браузерных DevTools при тестировании веб-приложений?

Вкладка Network — это основной инструмент для анализа сетевой активности веб-приложения, критичный для тестирования API, производительности и безопасности.

Ключевые сценарии использования:

• Валидация API-запросов:

  • Проверка HTTP-методов (GET, POST, PUT, DELETE).
  • Анализ заголовков (Headers) запроса и ответа (Content-Type, Authorization).
  • Проверка тела (Payload) запроса на корректность данных.
  • Контроль статус-кодов ответов (200 OK, 201 Created, 400 Bad Request, 404 Not Found, 500 Internal Server Error).

• Диагностика производительности:

  • Анализ водопада (Waterfall) загрузки ресурсов для выявления «узких мест».
  • Измерение времени загрузки каждого ресурса (TTFB, Content Download).
  • Поиск лишних или дублирующихся запросов.

• Мониторинг безопасности:

  • Проверка, что конфиденциальные данные (пароли, токены) не передаются в URL или в открытом виде.
  • Контроль использования защищенных протоколов (HTTPS).

Практический пример: Проверка запроса на авторизацию

1. Откройте DevTools (F12) → вкладка Network.
2. Включите запись (Record network log).
3. Выполните логин в приложении.
4. Найдите запрос к эндпоинту /login (обычно метод POST).
5. Проверьте:
   • Headers: Content-Type: application/json.
   • Payload: Тело запроса должно содержать зашифрованные или хешированные учетные данные, а не plain-text пароль.
   • Response: Статус 200 или 201 с токеном доступа в ответе (например, в поле access_token).

Совет: Используйте фильтрацию по типу (XHR/JS/Img) или домену, чтобы сфокусироваться на нужных запросах.