Reading the request list

Every row in the Network panel represents one HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. Ask AI for more request. The columns give you an immediate overview:

Click "Fetch/XHR" in the filter bar to show only APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more calls. This immediately hides all static assets (images, stylesheets, scripts) and lets you focus on the requests AI generated.

HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. Ask AI for more status codes, what they mean for your AI code

When an AI-generated fetch call fails, the status codeWhat is status code?A three-digit number in an HTTP response that tells the client what happened: 200 means success, 404 means not found, 500 means the server broke. Ask AI for more tells you exactly what went wrong.

// Copilot generated this - but it returns 401
const response = await fetch('/api/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
    // BUG: Copilot forgot the Authorization header!
  }
});

Inspecting a request in detail

Click any request to open a detail pane with several tabs:

Headers tab

Shows the request method, URL, status codeWhat is status code?A three-digit number in an HTTP response that tells the client what happened: 200 means success, 404 means not found, 500 means the server broke. Ask AI for more, and all headers. This is where you check for:

• Missing Authorization header (most common AI mistake)
• Wrong Content-Type (AI sends text/plain instead of application/json)
• CORSWhat is cors?Cross-Origin Resource Sharing - a browser security rule that blocks web pages from making requests to a different domain unless that domain explicitly allows it. Ask AI for more errors (missing Access-Control-Allow-Origin in response headers)

Request Headers (what your browser sent):
  Authorization: Bearer eyJhbG...   ← Is this present? Is the token valid?
  Content-Type: application/json    ← Is this correct for the API?

Response Headers (what the server returned):
  Access-Control-Allow-Origin: *    ← Is CORS configured?
  Set-Cookie: session=abc123        ← Is the session being set?

PayloadWhat is payload?The data sent in the body of an HTTP request, such as the JSON object you include when creating a resource through a POST request. Ask AI for more tab

Shows the body of the request, the JSONWhat is json?A text format for exchanging data between systems. It uses key-value pairs and arrays, and every programming language can read and write it. Ask AI for more you sent in a POST or PUT. If the APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more is rejecting your request, compare what you sent against what the API expects.

// ChatGPT generated this POST body
// But the API expects "email", not "mail"
{
  "name": "Alice",
  "mail": "alice@example.com"  // Wrong field name!
}

Preview and Response tabs

Preview shows the response body formatted and syntax-highlighted. Response shows the raw text. If the server returned an error message, it is here, often with specific details about what was wrong.

Timing tab

Breaks down where the time was spent:

Debugging CORSWhat is cors?Cross-Origin Resource Sharing - a browser security rule that blocks web pages from making requests to a different domain unless that domain explicitly allows it. Ask AI for more errors

CORS errors are one of the most common problems with AI-generated fetch calls. The browser blocks the request, the Console shows a red error, and the Network panel shows the request as failed.

Access to fetch at 'https://api.example.com/users' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present.

In the Network panel, look for a preflight OPTIONS request that appears before your actual request. If the OPTIONS request fails or is missing the right headers, the real request never fires.

// Claude generated this fetch - but it triggers CORS
// because it added a custom header
const response = await fetch('https://api.example.com/users', {
  headers: {
    'X-Custom-Header': 'value'  // This triggers a CORS preflight
  }
});
// Fix: remove custom headers, or configure CORS on the server

Copying and replaying requests

Right-clicking any request gives you options for extracting and replaying it:

# "Copy as cURL" gives you something like:
curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer eyJ...' \
  -H 'Content-Type: application/json' \
  --data '{"page":1,"limit":20}'

Paste that directly into your terminalWhat is terminal?A text-based interface where you type commands to interact with your computer. Also called the command line or shell. Ask AI for more to replay the request with all original headers and cookies. This removes the browser as a variable and lets you test the APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more independently.

"Copy as fetch" gives you the same request formatted as JavaScript you can paste into the Console and run directly, useful for testing modifications to the request.

Quick reference