What does the Network tab show?

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.