Frontend Beauty
ESC

Type to search the knowledge base.

Network Tab Debugging Interview

Read the browser Network panel under interview pressure — waterfalls, CORS, caching, waterfalls for LCP, and out-loud diagnosis.

intermediate3 min read
  • interview
  • network-tab

Network-tab rounds (or “debug this slow page”) test whether you can read evidence. Guessing “maybe CDN?” without opening DevTools is a fail signal.

What interviewers score

  1. Orientation — filter, waterfalls, initiator
  2. Status literacy — 3xx/4xx/5xx + CORS errors
  3. Caching — from disk/memory vs network
  4. Priority & ordering — render-blocking resources
  5. Clear diagnosis — root cause + fix proposal

Panel overview: Browser DevTools Network panel.

60-second orientation

  1. Open Network; Disable cache when reproducing cold loads
  2. Preserve log if navigations clear the list
  3. Reproduce the bug
  4. Sort by Waterfall or Size/Time
  5. Click a suspect → Headers, Preview, Timing

Columns that matter

Column Use
Name Endpoint / asset
Status HTTP code; (failed) CORS/mixed
Type xhr/fetch, script, stylesheet, img
Initiator Who requested (parser, script stack)
Size Transferred vs resource; cached hints
Time Total duration
Waterfall Queueing, TTFB, download

Waterfall reading: Network waterfall.

Timing tab (one request)

Phase Meaning
Queueing Browser connection limits / priority
DNS / SSL / Connecting Connection setup cost
Request sent Usually tiny
Waiting (TTFB) Server / proxy / cold start
Content download Bandwidth / size

TTFB-heavy → server or API issue. Download-heavy → payload size / compression — Compression.

Scenario playbook

1. CORS failure

Symptoms: status (failed), console CORS message; sometimes opaque.

Check:

  • Access-Control-Allow-Origin
  • Credentials + * mismatch
  • Preflight OPTIONS 404/403

Learn: CORS · Preflight.

Out loud: “Browser blocked JS from reading the response; Postman wouldn’t show this.”

2. Slow LCP image

  • Find LCP candidate in Performance or large img in Network
  • Late discovery (injected by JS) vs huge file vs no priority

Fixes: preload, proper srcset, CDN, don’t lazy the LCP image — LCP tactics.

3. API 401 after login

  • Cookie not stored: Set-Cookie flags (Secure, SameSite)
  • Request missing credentials: 'include'
  • Wrong domain / path

Secure cookie flags.

4. Everything redownloads every navigation

  • Missing Cache-Control / fingerprinting
  • no-store on static assets
  • Service worker bypass confusion

HTTP caching headers · Caching static assets.

5. Spinners forever

  • Pending request (server hang)
  • Wrong URL 404 HTML
  • Client never handles error
  • Mixed content blocked on HTTPS page

6. Duplicate requests

  • React Strict Mode double invoke in dev
  • Missing debounce on search
  • Effect deps thrashing

Filtering tricks

  • Fetch/XHR only for API chases
  • Domain filter for third parties — Third-party cost
  • -status-code:200 style filters (Chrome) to see failures
  • Search header values for correlation IDs

Interview monologue template

1. What user sees
2. Which request is on the critical path
3. Status + timing evidence
4. Root cause hypothesis
5. Fix + how to verify

Example:
“LCP is the hero JPEG: 2.4MB, discovered late after JS. TTFB fine; download 1.8s on Fast 3G throttle. Fix: compressed WebP + preload + width/height. Verify LCP in Performance panel.”

Throttling

Use CPU/Network throttle for realism — Throttling. Don’t only test on fiber + MBP.

Further reading

The Network panel is a primary source. Quote status codes and timings; leave “I feel like the backend is slow” at the door.