Вебсправочник
Основы веб-разработки

Вкладка Network: что на самом деле загрузил браузер

Находим лишние запросы, ошибки ресурсов, кеширование и неожиданные перенаправления.

Зачем это нужно

Network показывает сетевые запросы страницы. Это помогает отличить ошибку разметки от ошибки загрузки файла. Если CSS не пришёл или вместо JSON вернулся HTML, изменение селектора не решит проблему.

Перезагрузите с открытой панелью

Откройте Network до загрузки нужного сценария. Отфильтруйте документы, CSS, JavaScript или изображения. Выберите запрос и изучите URL, статус, заголовки и ответ.

Разберите время

Общее ожидание складывается из нескольких этапов. Большой TTFB и большой файл требуют разных исправлений. Не делайте вывод о сервере только по одному медленному запросу на нестабильной сети.

Сравните кеш и холодную загрузку

Отключение кеша в инструментах меняет сценарий. Измерьте первый визит и повторный отдельно. Сохраняйте условия сравнения, иначе два числа могут описывать разные ситуации.

Важное ограничение

Экспорт сетевого журнала может содержать cookie, заголовки авторизации и личные данные. Не публикуйте HAR без проверки и очистки чувствительных значений.

Контрольная проверка

  • Ресурс найден по точному URL.
  • Статус и Content-Type соответствуют ожиданию.
  • Проверено тело проблемного ответа.
  • Условия измерения записаны.

Продолжить изучение: статусы, кеш.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.