Browser DevTools Network Panel

Read waterfalls, timing phases, headers, throttling, and initiator chains in the Network panel like a production debugger.

beginner3 min readUpdated Aug 4, 2026

browser
devtools
network
performance

The Network panel is ground truth for “what did the browser actually request?” Your memory of a fetch call is not enough — caching, redirects, service workers, CORS preflights, and priority all show up here.

Docs: Chrome DevTools Network, Firefox Network Monitor.

Setup that saves hours

Disable cache while DevTools is open when debugging first-load.
Throttle to Fast 3G (or a custom profile) when reproducing field LCP.
Preserve log across navigations when chasing login redirects.
Filter: Fetch/XHR, JS, Img, Doc, domain regex, status codes.
Enable columns: Priority, Waterfall, Initiator, Size.

Reading a single request

Tab	Use for
Headers	Method, URL, status, request/response headers, CORS
Payload	Body, query string
Preview / Response	Body content
Initiator	What caused the request (parser, script stack)
Timing	Queueing, DNS, connect, TLS, TTFB, download
Cookies	Sent/received cookies

Timing phases

Queueing → DNS → Connect (TCP/TLS) → Request sent → Waiting (TTFB) → Content download

Long Waiting (TTFB) → server/CDN/origin. Long download → payload size or bandwidth. Long queueing → connection limits or contention (more common on HTTP/1.1).

Waterfall patterns

Serial JS chain: A loads, then discovers B, then C — discovery problem; preload critical resources.
Many small domains: connection overhead; consolidate or preconnect carefully.
OPTIONS before POST: expected non-simple CORS; fix allow headers if failing.
(from disk/memory cache): HTTP cache working for repeat views.
ServiceWorker: response may be SW-mediated — compare to network size/time.

CORS debugging checklist

Failed OPTIONS? Read response Access-Control-Allow-*.
Real request 200 but JS throws? Missing Access-Control-Allow-Origin on the response.
Error status and CORS noise? Error responses must also send ACAO.
credentials: 'include' with Allow-Origin: *? Invalid — need a specific origin.

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Credentials: true
Vary: Origin

Headers worth scanning every time

cache-control: public, max-age=31536000, immutable
content-encoding: br
content-type: application/javascript; charset=utf-8
vary: Accept-Encoding

Missing compression on large JS/CSS is free performance left on the table. Wrong Content-Type breaks MIME handling and can interact with sniffing policies — see Content-Type and MIME sniffing.

Copy as…

Right-click → Copy as fetch / cURL for backend repro. HAR export for other teams (strip cookies/auth before pasting publicly).

Interview out-loud

“Network panel shows waterfall, timing phases, initiator, and cache status. I separate TTFB vs download vs discovery delay, confirm CORS preflights, and verify cache headers — not just whether fetch resolved.”

End-to-end exercise

Load the page with cache disabled and Fast 3G.
Sort by Waterfall start time — which request is on the critical path before LCP?
Click the LCP candidate image — Timing: is delay in queueing, TTFB, or download?
Filter Fetch/XHR — any chatty polling that competes with LCP?
Re-enable cache, hard reload once, soft reload once — confirm hashed assets hit disk cache and HTML revalidates.

Export a HAR when filing a bug against a backend team; strip Authorization and cookie headers before attaching to a public ticket.