Skip to main content

Що показує вкладка Network?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

Вкладка Network у Chrome DevTools показує всі мережеві запити, які робить сторінка: які ресурси завантажуються, скільки важать, як довго вантажаться і звідки беруться.

Що відображається:

  1. Тип запиту HTML, JS, CSS, зображення, шрифти, XHR, WebSocket та ін.
  2. Статус і метод 200, 304, 404, 500, GET, POST тощо
  3. Розміри файлів Уся відповідь (Transfer size) і розмір лише тіла (Content size)
  4. Час завантаження
  • DNS lookup
  • з'єднання (TCP)
  • очікування відповіді (TTFB: Time to First Byte)
  • отримання даних
  • загальний час
  1. Джерело З кешу, з мережі, з service worker
  2. Заголовки Request / Response headers: можна дивитися cookies, CORS, кеш тощо
  3. Відповіді JSON, HTML, зображення: прямо в панелі можна відкрити тіло відповіді
  4. Хронологія (Waterfall) Показує, в який момент і як довго вантажився кожен ресурс

Навіщо потрібна:

  • аналізувати швидкість завантаження (що гальмує)
  • бачити блокувальні ресурси (CSS, JS без async/defer)
  • ловити помилки запитів (404, 500, CORS)
  • вимірювати TTFB і час до завантаження критичних ресурсів
  • налагоджувати API (запити/відповіді, параметри, тіло)
  • розуміти, звідки беруться дані (мережа чи кеш)

Висновок: Вкладка Network - це мережевий контрольний центр. Тут видно, як браузер «розмовляє» із сервером і скільки часу витрачає на кожне слово.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку