📖 E3 · Reading a Request: Headers / Payload / Preview / Response / Timing

E3 · Reading a Request: Headers /: The 5 tabs (`Headers`, `Payload`, `Preview`, `Response`, `Timing`) that open when you click a Network row are like **opening an envelope layer

The 5 tabs (`Headers`, `Payload`, `Preview`, `Response`, `Timing`) that open when you click a Network row are like **opening an envelope layer by layer**: `Headers` is the address/stamp info on the outside of the envelope (metadata — Content-Type, Authorization); `Payload` is the letter inside as YOU sent it (the request body); `Response` is the RAW form of the letter that came back from the server (unparsed text); `Preview` is the same letter's READABLE, formatted form (JSON nicely indented); `Timing` is how long it took from posting to delivery. So why do we need `Preview` when `Response` exists — don't they show the same data? Yes, they show the same data, but `Response` is raw text (tiring on the eyes in a large JSON), while `Preview` is the browser PARSING and presenting it nicely for you — small differences (a missing field, a wrongly typed value) are caught much faster in `Preview`. The Java equivalent is an `HttpResponse` object's `headers()`, `body()` fields — `Payload` maps to an `HttpRequest.BodyPublisher`, `Response` to an `HttpResponse `, `Timing` to what a profiler measures. For QA, knowing these 5 tabs separately is critical because a bug shows up differently in different tabs: a wrong `Content-Type` hides in `Headers`, a missing field in `Payload`, an unexpected `passwordHash` field in `Response`.

Opening the Envelope Layer by Layer

Clicking a row opens these 5 tabs in the side panel. The `Preview` tab shows the JSON the server returned in a readable tree structure — this is the first tab to check, especially for large responses.

A Request's 5 Tabs (Preview selected)

🎬 Which Bug Hides in Which Tab?

Click the Network row

Headers: wrong Content-Type

Payload: what you sent

Response: leaked passwordHash

The tester clicks a row in the Network panel — a 5-tab panel opens.

The `Headers` tab shows `Content-Type: text/plain` — but JSON was supposed to be sent, the first suspicious clue.

The `Payload` tab shows exactly what the tester sent — the answer to "what did I send?"

The `Response` tab reveals an unexpected field: `passwordHash` — a leak that should NOT be in the contract.

The lesson — each tab answers a different question: Headers "is the metadata correct", Payload "what did I send", Response "what did the server REALLY return", Timing "how long did it take". All must be checked SEPARATELY.