Small confession: this site's own newsletter had a bug last week where the sign-up just said
"something went wrong." The fix started exactly here — opening the Network tab, watching the
request to /api/subscribe, and seeing a bare 404 come back. No
guessing. The wire doesn't lie.
01Open the Network tab
Press F12 (or Ctrl+Shift+I /
Cmd+Option+I), then choose Network.
Tick Preserve log so navigations don't wipe your history, and click the
Fetch/XHR filter to hide the noise (images, fonts, scripts) and show just the
API traffic. Now use the app — every click that "does something" lands here as a row.
| Name | Status | Type | Time |
|---|---|---|---|
| login | 200 | xhr | 142 ms |
| devices?page=1 | 200 | fetch | 318 ms |
| stats | 401 | fetch | 88 ms |
| config | 204 | fetch | 61 ms |
The Network tab, filtered to Fetch/XHR — every meaningful click is a real API call, with its status and timing.
02Read one request like an X-ray
Click a row and the panel splits into tabs. This is where troubleshooting gets quick:
- Headers — the request URL, method, and the auth that makes it work
(a
Bearertoken, cookie, or API key) plus the response status. - Payload — exactly what the GUI sent (query params or the JSON body).
- Response / Preview — the raw JSON the page then renders.
- Timing — where the milliseconds went (DNS, TLS, waiting, download).
{
"devices": [
{ "id": 1, "name": "fw-edge-01", "status": "up" },
{ "id": 2, "name": "sw-core-02", "status": "down" }
],
"page": 1, "total": 47
}
One request, fully exposed: URL, method, the auth header, the status, and the JSON the GUI turns into a table.
For troubleshooting, the failing row usually tells you the whole story at a glance: a 401/403 is auth, a 400 is a bad payload (compare it against a request that worked), a 5xx is the server's problem not yours, a CORS error shows in the console, and a slow row points you at the Timing tab. You stop debugging the page and start debugging the request.
03Turn a click into a command
Here's the fun part. Right-click any request → Copy → Copy as cURL (also: Copy as fetch, Copy as PowerShell). You now hold a complete, runnable version of that call — URL, headers, cookies, and body included — that you can paste into a terminal and replay.
Right-click → Copy → “Copy as cURL”. Your click is now a one-line command you can script.
From there it's a short hop to real automation — paste the cURL, confirm it works, then port it to whatever you script in:
# Copied straight from DevTools:
curl 'https://app.example.com/api/devices?page=1' \
-H 'authorization: Bearer eyJhbGciOi…'
# 30 seconds later, in Python:
import requests
r = requests.get(
"https://app.example.com/api/devices",
params={"page": 1},
headers={"authorization": "Bearer eyJhbGciOi…"},
)
for d in r.json()["devices"]:
print(d["name"], d["status"])
$ python3 list_devices.py edge-fw-01 online core-sw-03 online branch-rtr-11 degraded
That's the whole trick: the GUI walked you through discovery, and now a loop does in seconds what a hundred clicks did before — pull every page, export a report, flip a setting across 200 objects.
Play fair. Do this only on systems you own or are authorized to use. That token you copied is a live credential — treat it like a password, and know it will expire. Respect rate limits and the site's terms; a script that hammers an endpoint is a great way to get blocked (or noticed). And if the vendor publishes an official API, prefer it — it won't break the next time they restyle a button.
04Where this pays off for network & security work
- Flaky web apps — prove whether the problem is the front-end or the API, and hand the exact failing request to whoever owns the backend.
- Clicky vendor GUIs — appliance and SaaS dashboards almost always ride on a REST API. Watch the Network tab while you configure one thing, and you've found the call to script the other 199 (bulk objects, backups, audits).
- Repeatable checks — turn a manual "log in, click through five screens" routine into a scheduled script that just hits the endpoints.
- Learning an API fast — the Network tab is living documentation for undocumented or badly-documented interfaces.
The GUI is the demo; the API is the product. Once you're comfortable reading the wire, you'll reach for the Network tab before the ticket queue — and reach for a script before the mouse.