On this page

Guide · Block 1 · Week 2 · The second interface: APIs

Reading the Network Tab

Every request your browser sends is written down. Open the list, click one, and find the four parts of the request and the two parts of the reply.

After the lessonChrome, nothing to installAbout 20 minutes

What you are looking for

Every request carries an address, an action, a key and a package. Every reply carries a code and a package. The Network tab shows all six. Until now you did not need to read it. Now you do.

01Open It

Your machine

Open DevTools. Right click anywhere on the page, then Inspect. Or the shortcut: F12 or Ctrl+Shift+ICmd+Option+I.
Click the Network tab. If you cannot see it, click » at the top of DevTools.
Filter to Fetch/XHR. These are the requests a page sends by itself, after it has loaded. Images, fonts and styles drop out of the list.
Clear the list. The circle with a line through it, top left. Now the next request you cause is the only one there.
Cause one request, then click it. The right side shows tabs: Headers, Payload, Preview, Response. The six parts live across those tabs.
Keep DevTools open while you work. If you open it after sending, send the request again: the list only records what happens while it is open.

The panels below are drawn in HTML so they read the same on every machine. Real screenshots will be added to this page from assets/images/.

02Part 1: This Site's Own Requests

Start with traffic you made yourself, on a page that hides nothing. This is step 7 of the Request Builder.

Open the Request Builder and go to step 4, Replay Round Three for real. If you have not created a key there yet, do that first.
Open DevTools, then Network, then Fetch/XHR, then clear the list, as in section 01.
Press Send on the diagnosis request in step 4. One line appears in the list, named diagnoses. Click it.
Headers tab. Find Request URL, Request Method and Status Code at the top, then authorization and content-type under Request Headers.
Payload tab. Your package: {"workflow": "..."}.
Response tab. The reply package, with the diagnosis inside. The machine also echoes back what it read from you under you_sent.

AllFetch/XHR1 request

diagnoses201

HeadersPayloadPreviewResponse

Request URL__SITE__/aarav/diagnosesaddress

Request MethodPOSTaction · Create

Status Code201 Createdcode

authorizationBearer aarav_yourkeyherekey

content-typeapplication/jsonthe package's format

Part	Where in the Network tab	What you see
address	Headers → Request URL	__SITE__/aarav/diagnoses
action	Headers → Request Method	`POST`: a Create
key	Headers → Request Headers → `authorization`	`Bearer` and your Aarav key
package	`content-type`, then Payload	`application/json`, then `{"workflow": "..."}`
code	Headers → Status Code	201
reply package	Response	The diagnosis, and `you_sent`

Now break it on purpose with the buttons in step 5 and watch the list. Each failed request shows its code in red, and its Response tab holds the hint that names the part to fix.

03Part 2: Your Own Groq Request

Do this after step 8 of the Request Builder, Put a model behind it.

Open DevTools, then Network, then Fetch/XHR, then clear the list.
Paste your Groq key in step 8. A request named models appears: the Builder asking Groq which models your key can use.
Press Send. A request named completions appears. Click it and read the parts below.

AllFetch/XHR2 requests

models200

completions200

HeadersPayloadResponse

Request URLhttps://api.groq.com/openai/v1/chat/completionsaddress

Request MethodPOSTaction · Create

Status Code200 OKcode

authorizationBearer gsk_yourkeyisrighthere0000key · in plain text

content-typeapplication/jsonthe package's format

The models request above it is a Read: the Builder asked Groq which models your key can use. That was your first GET with a key.

Part	Where	Value
address	Request URL	https://api.groq.com/openai/v1/chat/completions
action	Request Method	`POST`. Create: a reply that did not exist before you asked.
key	Request Headers → `authorization`	`Bearer` and your key. Whoever bears it gets in.
package	Request Headers → `content-type`, then Payload	`application/json`, then `{"model": "openai/gpt-oss-120b", "messages": [...]}`
code	Status Code	200
reply package	Response	The text is at `choices[0].message.content`. Ignore `reasoning`: it is the model's scratchpad.

Now look at the key

Expand the authorization line on your own screen, not a shared one. Your key is there in plain text.

The question this page exists to ask

The Builder is your private tool, so this is fine here. If Aarav's product were built the same way, every visitor could open this tab, copy his key, and spend his money. Where should the key live instead? Answer it, then do step 9 of the Request Builder and read Keys.

04Part 3: The Space That Became %20

Open step 2 of the Request Builder with DevTools open, or paste https://httpbin.org/get?text=hello into Chrome's address bar. Then change hello to hello world. Edit the existing address; if you retype it from scratch, Chrome may run a Google search instead.

All1 request

get?text=hello%20world200

HeadersResponse

Request URLhttps://httpbin.org/get?text=hello%20worldaddress

Request MethodGETaction · Read

Status Code200 OKcode

An address cannot hold a space, so the browser translated it to %20 before sending. Look at the Request URL here, not the reply: httpbin decodes the text back to hello world in its answer. Your code will not always do this translation for you. When it does not, the machine replies 400.

05Part 4: A Real Product, ChatGPT

Now the same reading on a product used by hundreds of millions of people. The parts are the same; there is just more noise around them.

Log in to ChatGPT in Chrome, open the Network tab, filter to Fetch/XHR, clear it, and send "hi". Several requests appear. One fires just before the message and carries a name like chat-requirements: the site checking you before it lets the message through. The one you want is named conversation. In recent builds its address ends in /backend-api/f/conversation. The exact name changes from time to time; look for the one sent at the moment you pressed Enter.

If you are logged out, ChatGPT uses different addresses. Log in first.

AllFetch/XHRDocJS5 requests

chat-requirements200

conversation200

conversations?offset=0200

lat/r200

gizmos/bootstrap200

HeadersPayloadPreviewResponse

Request URLhttps://chatgpt.com/backend-api/f/conversationaddress

Request MethodPOSTaction

Status Code200 OKcode

content-typeapplication/json

authorizationBearer eyJhbGciOiJSUzI1NiIsInR5cCI6key · never expand

cookie__Secure-next-auth.session-token= never expand

Headers tab. Before you look at the method, guess: is asking ChatGPT a question a Read or a Create? It is the Google-versus-LLM question from the CRUD quiz.

Find each part

Part	Where in the Network tab	What you see
address	Headers → Request URL	The machine and the door: `chatgpt.com` and `/backend-api/…/conversation`
action	Headers → Request Method	`POST`. A Create: your message and a new reply are added to the conversation. The notes explain why.
key	Headers → Request Headers → `authorization`	Your logged-in session. Do not expand it. Do not copy it.
package	Payload	JSON. Find your "hi" inside it, next to the model name and an id for the conversation.
code	Headers → Status Code	200

Two things you never expand, copy or paste

The authorization header and the cookie header. Together they are your login. Anyone holding them is you, until they expire. Not into a group chat, not into a screenshot, not into an AI chat asking it to "explain this request".

The reply arrives in pieces

Click Response, or EventStream if Chrome shows it. The content type of this reply is text/event-stream. The machine does not send one package at the end. It sends many small ones as the model writes, and the page adds each one to the screen. That is why ChatGPT's words appear one by one.

data: {"message": {"content": {"parts": ["Hi"]}}} data: {"message": {"content": {"parts": ["Hi!"]}}} data: {"message": {"content": {"parts": ["Hi! How can"]}}} data: {"message": {"content": {"parts": ["Hi! How can I help?"]}}} data: [DONE]

Simplified. The real stream carries more fields; the shape is the same.

06Practise

Found all six parts in your own Aarav requestAddress, action, key, package, code, reply package.
Found all five parts in ChatGPT's conversation requestWithout expanding authorization or cookie.
Saw the reply stream in piecesResponse or EventStream tab.
Found your Groq request and its 200And your key in plain text, on your own screen.
Saw %20 in a Request URLThe space, translated.
Opened the Network tab on one app you use every dayPick one request. Name its address, action and code. For any app, the Network tab is the truth.

Done

0 / 6

The Network tab is the truth.Companion pages: keys · troubleshooting · kit