When data does not show up, the question is: did the request happen, and what came back? The Network panel answers it.
Opening it
DevTools (F12) → Network tab. Reload the page (or trigger the action) with the panel open, because it only records while open.
Useful filters: Fetch/XHR (API requests), JS, CSS, Img, and the search/filter box.
What each row tells you
| Column | Meaning |
|---|---|
| Name | the resource (click for details) |
| Status | 200 OK, 404 not found, 500 server error, (failed) the request never completed |
| Type | fetch, xhr, script, document… |
| Size | bytes transferred (and uncompressed size) |
| Time | how long it took |
| Waterfall | a timeline of the stages |
Inspecting one request
Click a request. The tabs show:
- Headers: the URL, method, status, request headers (such as
Authorization) and response headers (such asContent-Type, CORS headers). - Payload: what you sent (query parameters, form data, JSON body).
- Preview / Response: what the server returned, formatted or raw.
- Timing: DNS, connection, waiting for the server, download.
A debugging checklist for fetch
- Is the request there at all? If not, your code never ran it, or it ran before you opened the panel.
- Right URL and method? Check typos, missing path parts,
GETvsPOST(fetch). - Status code?
404: wrong URL.401/403: not logged in, or not allowed.400: your payload is wrong (read the response body for details).500: a server bug.(failed)or red: network failure or CORS.
- Request headers and payload? Did you send the JSON you expected, with the right
Content-Type? - Response body? Is it JSON? Or HTML (an error page), which explains
Unexpected token <?
Seeing HTTP errors
Remember that fetch does not throw on 404 or 500 (HTTP Errors), so the Network panel is where you see them. If the status is not 2xx but your code kept going, check response.ok.
CORS problems
A blocked cross-origin request shows an error in the console, and often a failed or opaque request in the Network panel. Look at the response headers for Access-Control-Allow-Origin. If it is missing or does not match your origin, the server must change (CORS basics).
Preserve log, and disable cache
- Preserve log: keep requests when the page navigates or reloads.
- Disable cache (while DevTools is open): see fresh responses while you work.
Throttling
Use the throttling dropdown (“Slow 4G”, “Offline”) to see how your loading and error states behave on a bad connection (Loading and Error States). Offline is a quick way to test your error handling.
Copy as fetch / cURL
Right-click a request → Copy → Copy as fetch or Copy as cURL gives you code that repeats it, which is handy for testing.
Block a request
Right-click → Block request URL to see how the page behaves if a script or API fails.
Do not share secrets
Requests copied from the Network panel can contain tokens and cookies. Remove them before pasting into a chat or a bug report.