Suggest an edit

Improve this article

Refine the answer for “What does the Network tab show?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**The Network tab** in Chrome DevTools shows all the network requests a page makes: which resources load, how much they weigh, how long they take, and where they come from.

---

### What is shown:

1. **Request type**
HTML, JS, CSS, images, fonts, XHR, WebSocket, and others
2. **Status and method**
200, 304, 404, 500, GET, POST, and so on
3. **File sizes**
The full response (Transfer size) and the body-only size (Content size)
4. **Load time**
  - DNS lookup
  - connection (TCP)
  - waiting for response (TTFB: Time to First Byte)
  - receiving data
  - total time
5. **Source**
From cache, from network, from service worker
6. **Headers**
Request / Response headers: you can view cookies, CORS, cache, and so on
7. **Responses**
JSON, HTML, images: you can open the response body right in the panel
8. **Timeline (Waterfall)**
Shows when and how long each resource took to load

---

### Why it's needed:

- analyzing load speed (what is slowing things down)
- seeing blocking resources (CSS, JS without `async/defer`)
- catching request errors (404, 500, CORS)
- measuring TTFB and time to load critical resources
- debugging APIs (requests/responses, parameters, body)
- understanding where data comes from (network or cache)

---

**Conclusion:**
The Network tab is a network control center. Here you can see how the browser "talks" to the server and how much time it spends on every word.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts233 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.