# 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](/guide/it-network),
[HTTP](/guide/it-http), [APIs](/guide/it-api)) 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.**

```
□ 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](/guide/it-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 |

```
□ 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.

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

You get a block of text. That is [JSON](/guide/it-data-formats), a response
**meant for a program**, not a browser.

```
□ 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.

```
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](/guide/it-http)**.

Now ask for something that needs a key.

```
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.

```
□ 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.

```
□ 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](/guide/it-data-formats)