Что смотреть во вкладке Network в DevTools?

Основные элементы вкладки Network

Вкладка Network в инструментах разработчика браузера показывает все сетевые запросы, которые выполняет веб-страница. Это ключевой инструмент для отладки и оптимизации производительности.

Что стоит анализировать

• Статус ответа (Status) — код HTTP, например 200 (успех), 404 (не найдено), 500 (ошибка сервера). Позволяет быстро выявить проблемы с загрузкой ресурсов.
• Тип запроса (Type) — document, script, stylesheet, xhr/fetch, image и т.д. Помогает понять, какие ресурсы загружаются.
• Время загрузки (Time / Waterfall) — показывает, сколько времени занял каждый этап: DNS, соединение, отправка, ожидание, получение. Полезно для поиска узких мест.
• Размер (Size) — размер переданных данных (сжатый и несжатый). Большие файлы могут замедлять загрузку.
• Заголовки (Headers) — информация о запросе и ответе: Content-Type, Cache-Control, Authorization и другие. Важно для отладки API и кэширования.
• Payload / Preview / Response — тело запроса (для POST) и ответа. Позволяет проверить, какие данные отправляются и приходят.

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

Допустим, страница не загружает изображение. Открываем Network, находим запрос с типом image и статусом 404. Смотрим URL — возможно, путь указан неверно. Или видим, что запрос к API возвращает 500 — значит, проблема на сервере.

// Пример: проверка ответа API через fetch
fetch('/api/users')
  .then(response => {
    if (!response.ok) {
      console.error('Ошибка:', response.status);
    }
    return response.json();
  })
  .then(data => console.log(data));

В Network можно увидеть этот запрос, его статус, заголовки и тело ответа.

Вывод

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