13: Observing HTTP in Practice

Browser DevTools: Network Tab

Understanding HTTP theory is important, but seeing HTTP in action makes it concrete. Open DevTools (F12 or Cmd+Option+I on Mac) and click the Network tab. You'll see every HTTP request the page makes in real-time:

Filter by type: Click "Fetch/XHR" to see only API calls, hiding images, scripts, and stylesheets.
Click any request to inspect its headers (request and response), timing, and response body.
Right-click → "Copy as curl" generates a curl command you can paste into your terminal to replay the exact same request.
Timing breakdown shows where time was spent: DNS lookup, TCP connection, TLS handshake, server processing (TTFB), content download.
Preserve log: Check this box to keep requests visible across page navigations (essential for debugging redirects).

curl: The Universal HTTP Tool

curl is installed on virtually every system and is the standard tool for making HTTP requests from the command line.

Flag	What It Does	Example
`-v`	Verbose — show full request and response headers	`curl -v https://example.com`
`-i`	Include response headers in output	`curl -i https://example.com`
`-I`	HEAD request — show headers only, no body	`curl -I https://example.com`
`-H`	Add a custom request header	`curl -H "Accept: application/json" ...`
`-d`	Send data in the body (implies POST)	`curl -d '{"name":"test"}' ...`
`-X`	Specify the HTTP method	`curl -X DELETE ...`
`-L`	Follow redirects (3xx)	`curl -L http://example.com/old`

Practical curl Walkthrough

Using curl -v shows the complete HTTP conversation. Lines starting with > are the request; lines starting with < are the response:

$ curl -v https://httpbin.org/get

* Trying 34.227.213.82:443...
* Connected to httpbin.org port 443
* TLS handshake completed (TLS 1.3)

> GET /get HTTP/2                    ← Request line
> Host: httpbin.org                  ← Required host header
> User-Agent: curl/8.4.0             ← curl identifies itself
> Accept: */*                        ← Accept anything
>                                    ← Blank line (end of headers)

< HTTP/2 200                          ← Status line
< content-type: application/json      ← Response is JSON
< content-length: 256                 ← Body size
< access-control-allow-origin: *      ← CORS: allow all origins
<                                     ← Blank line
{
  "args": {},
  "headers": {
    "Accept": "*/*",
    "Host": "httpbin.org",
    "User-Agent": "curl/8.4.0"
  },
  "url": "https://httpbin.org/get"
}