Take one request apart

The reading stops here. This chapter is for doing. Twenty minutes. Nothing to install, no account, no key — a browser is enough.

The last three chapters (networks, HTTP, APIs) described this in words. Now look at it. The page you are reading was itself built from requests and responses.

Step 1 — open developer tools (5 min)

Do this on this very page.

OS	Shortcut
Windows · Linux	`F12` or `Ctrl-Shift-I`
macOS	`⌘⌥I`

Choose the Network tab and reload the page. The list floods. That is every request it took to draw this one screen.

text

□ How many rows — usually dozens□ Can you see 200 in the Status column□ Is the Type column a mix of document · script · fetch

Seeing nothing means you did not reload. Developer tools must be open before the reload to capture what happens in between.

Step 2 — expand one request (5 min)

Click the top row (type document). Details open on the right. Find the four pieces from the HTTP table.

On screen	Which piece
Request URL	the address
Request Method	the method — it will be `GET`
Status Code	the status — `200`
Request Headers	headers — the browser introducing itself
Response	what the server sent back

text

□ Request Method is GET□ You found User-Agent among the headers (the browser naming itself)□ You opened Response and saw actual content

From here on, "request and response" is no longer an abstraction.

Step 3 — call an API yourself (10 min)

This time open the counter built for programs rather than the one for people. Paste this into the address bar.

text

https://api.github.com/users/github

You get a block of text. That is JSON, a response meant for a program, not a browser.

text

□ Inside { } there are "name": value pairs□ You can spot login · name · public_repos

Get the status code wrong on purpose

Ask for an address that does not exist.

text

https://api.github.com/users/surely-no-such-account-1234567

You get 404 with "message": "Not Found". This is you confirming that 404 is an address problem.

Now ask for something that needs a key.

text

https://api.github.com/user

You get 401. The address is right — you simply did not say who you are. That the previous 404 and this 401 are different problems is the point of this exercise.

text

□ You got a 404 — the address was wrong□ You got a 401 — the key was missing□ Neither was a 500 — the server was fine both times

Once you have done it

You can now answer these three yourself.

text

□ I saw how many requests it takes to open this page□ I found the four pieces of a request (method · address · headers · body) on screen□ I produced a 404 and a 401 and can say what each one asks me to fix

If you are blocked, your office network may filter api.github.com. Steps 1 and 2 alone still deliver the point of this chapter.

Next, how to read that block of text → Shapes of data — JSON, CSV, documents