🔍 E1 · Network Panel Anatomy

E1 · Network Panel Anatomy: The DevTools Network panel is like an **air traffic control tower's radar screen**: every flight (request) appears as a row on screen — where it is go

The DevTools Network panel is like an **air traffic control tower's radar screen**: every flight (request) appears as a row on screen — where it is going (Name), whether it landed successfully (Status), what it is carrying (Type), how much space it takes (Size), and how long it took (Time) are all visible at a glance. So if Postman already exists, why look at the browser's own radar? Because Postman runs when YOU send the request — but in a real user experience, requests are triggered by the UI itself (JavaScript), without you knowing; the Network panel is the ONLY place that shows what REALLY happens BEHIND the UI. The closest Java equivalent is an `HttpClient` logging interceptor — like OkHttp's `HttpLoggingInterceptor`, which writes every outgoing request and incoming response to the console; DevTools Network is the browser's GUI-based, automatic interceptor. For QA this panel becomes one of the most-used tools in your career because you WILL repeatedly face this scenario: everything looks normal on screen, the button says "Success!" — but opening the Network panel, a red 500 row is waiting for you. The UI can mislead you, the Network panel does not.

Five Columns: A Request's Summary at a Glance

Each row is one HTTP request. **Name** shows the path/filename, **Status** the server's answer (200/404/500...), **Type** the request kind (`fetch`/`xhr`/`img`/`css`), **Size** the response size, **Time** how long it took. An API request like `/api/v1/bugs` is usually of type `fetch` or `xhr` — this is the basis of the filter you will use in E2.

Network Panel — Columns and Sample Rows

🎬 How a Request Appears in the Network Panel

Network panel adds a row

Tester inspects the row

The user (or tester) clicks "Refresh Bugs".

The JavaScript behind the button calls `fetch('/api/v1/bugs')` — this is the moment DevTools CAPTURES.

The Network panel instantly adds a new row — Name is filled but Status/Size/Time still look "pending".

When the server responds, the Status (200/500), Size, and Time columns update instantly.

The lesson — a tester reads this row with their own eyes, WITHOUT trusting what the UI says; even if the UI says "success", the Status column may tell a different story.

Opening DevTools and Seeing the First Request

F12 or right-click → Inspect, then switch to the Network tab.