Debug the web path

Inspect the Network panel

Find the failing request, inspect URL, initiator, timing, headers, body, status, and response.

10 minute lesson

~~~

When a page misbehaves, the Network panel shows what the browser actually sent and received — not what your code intended. The browser Network panel records requests while it is open, so the first move is always: open the panel, then reload.

Find the request that matters

Start from the first failed or unexpected request, not every red line at once. Failures cascade. One failed script load produces twenty downstream errors, and only the first one is interesting. Sort by time and find the earliest anomaly.

Enable Preserve log when the bug involves navigation or redirects. Without it the panel clears on every page load, and the evidence disappears with it.

Record one request as a compact report:

method and final URL
initiator
status or browser error
request headers and body shape
response headers and body
timing waterfall
redirect chain

Each line answers a distinct question. The final URL catches requests that landed somewhere unexpected after redirects. The initiator column names the code that triggered the request — click it to jump to the exact line. The status distinguishes a server that answered with an error from a request that never completed, which shows a browser error like net::ERR_CONNECTION_REFUSED and no status at all.

Read the timing waterfall

Click a slow request and open the Timing tab. The phases tell different stories:

Stalled            queueing, connection limits
Waiting (TTFB)     the server thinking — backend problem
Content Download   large response or slow network

A request with eight seconds of Waiting is a server-side investigation. Eight seconds of Content Download on a 40 MB JSON response is a payload problem. Same “slow request” symptom, opposite fixes — the waterfall picks the direction.

Sharing what you found

Export a sanitized HAR only when needed: right-click, “Save all as HAR”. HAR files can contain authorization headers, cookies, query secrets, and private response bodies for every recorded request, not just the one you care about. Sanitize before sharing, or share the compact report above instead of the raw capture.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →