PrepBro
← Назад к вопросам

Что видно в network?

2.2 Middle🔥 191 комментариев
#JavaScript Core

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Анализ инструмента Network в браузерных DevTools

Инструмент Network в DevTools браузера (Chrome, Firefox, Edge и др.) — это мощный инструмент для анализа сетевой активности веб-приложения. Он позволяет разработчикам видеть детальную информацию о всех HTTP-запросах и ответах, что критически важно для оптимизации производительности, диагностики проблем и понимания взаимодействия клиента с сервером.

Основные элементы, видимые в Network Tab

1. Панель запросов (Requests Table) Это основная таблица, где каждый сетевой запрос представлен как отдельная строка. Она включает:

  • Name/Path: URL ресурса (например, /api/users, main.js).
  • Method: HTTP-метод (GET, POST, PUT, DELETE).
  • Status: HTTP-код ответа (200, 404, 500, 304).
  • Type: Тип ресурса (document, script, font, xhr, image).
  • Initiator: Что вызвало запрос (парсер HTML, другой скрипт, fetch()).
  • Size: Размер ответа (как переданный, так и реальный размер после декодирования).
  • Time: Общее время запроса, включая задержки.

2. Временная диаграмма (Timeline/Waterfall) Каждая строка запроса сопровождается горизонтальной диаграммой (водопадом), которая визуализирует фазы выполнения запроса:

  • Stalled/Blocked: Время, когда запрос ожидает (например, из-за ограничения браузера на количество одновременных запросов к одному домену).
  • DNS Lookup: Время разрешения доменного имени в IP-адрес.
  • Initial connection/TCP Handshake: Время установки TCP-соединения (особенно важно для HTTPS, включает TLS-negotiation).
  • SSL/TLS Handshake: Время установки безопасного соединения (для HTTPS).
  • Request Sent: Время отправки запроса на сервер.
  • Waiting (TTFB): Time To First Byte — время от отправки запроса до получения первого байта ответа. Ключевой показатель скорости сервера.
  • Content Download: Время скачивания тела ответа (зависит от размера ресурса и скорости сети).

3. Фильтрация и сортировка Инструмент позволяет фильтровать запросы по типу (XHR, JS, CSS) или домену, что удобно при анализе специфичных проблем (например, только API-вызовы).

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

Headers

Полные HTTP-заголовки запроса и ответа. Например:

Request Headers:
GET /api/data HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Authorization: Bearer token123

Response Headers:
HTTP/1.1 200 OK
Content-Type: application/json
Cache-Control: max-age=3600

Preview/Response

Показывает тело ответа в удобном формате (JSON, HTML, изображение). Для JSON-ответов это особенно полезно для проверки структуры данных.

{
  "users": [
    { "id": 1, "name": "Alice" }
  ]
}

Timing

Детальный разбор временных показателей по фазам (те же данные, что в водопаде, но в цифрах).

Initiator и Call Stack

Показывает, где именно в коде был вызван запрос (стек вызовов). Это критически важно для отладки неожиданных или повторяющихся запросов.

// Пример: в стеке может быть указано, что запрос вызван в файле `app.js` в функции `fetchData()`
fetchData() // app.js:15

Практическое применение для Frontend Developer

  • Оптимизация производительности: Анализ водопада помогает найти "узкие места" — долгие TTFB (проблема сервера), большие размеры ресурсов (нужна компрессия), много последовательных запросов (можно объединить). Видно, какие ресурсы блокируют рендеринг.
  • Диагностика ошибок: Прямой просмотр статусов 4xx/5xx, заголовков и тел ответов при ошибках API. Можно проверить, корректно ли отправляются авторизационные токены или Cookies.
  • Анализ кэширования: Проверка заголовков Cache-Control, ETag, Last-Modified. Можно увидеть, когда ресурс берется из кэша (status 304) и когда делается новый запрос.
  • Мониторинг API-интеграции: Убедиться, что запросы к бэкенду отправляются с правильными методами, телами и заголовками.
  • Отладка "неожиданных" запросов: Используя Initiator, можно найти код, который вызывает лишние или повторяющиеся запросы (например, из-за неправильной логики в useEffect в React).

Пример сценария использования

Вы заметили, что страница грузится медленно. Открываете Network, включаете фильтр на JS. Видите, что один из скриптов vendor.js имеет большой размер (2MB) и долгое время Content Download. Это указывает на необходимость:

  1. Разбить код (code splitting).
  2. Применить компрессию (gzip/Brotli) на сервере.
  3. Включить эффективное кэширование.

Или, при работе с API, вы видите, что POST-запрос возвращает 400 Bad Request. Открывая детали запроса, в секции Request проверяете, что в Payload отправлены все необходимые поля, а в Headers видите, что заголовок Content-Type: application/json установлен корректно.

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

Что видно в network? | PrepBro