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

Покращити цю статтю

Допрацюйте відповідь до «Що показує вкладка Network?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Вкладка 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)
  - отримання даних
  - загальний час
5. **Джерело**
З кешу, з мережі, з service worker
6. **Заголовки**
Request / Response headers: можна дивитися cookies, CORS, кеш тощо
7. **Відповіді**
JSON, HTML, зображення: прямо в панелі можна відкрити тіло відповіді
8. **Хронологія (Waterfall)**
Показує, в який момент і як довго вантажився кожен ресурс

---

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

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

---

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати203 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.