Network Tab Deep Dive

Understanding the Network Panel

The Network panel in Chrome DevTools records all network activity for a page. Every HTTP request, WebSocket message, server-sent event, and resource fetch is logged with full details including headers, payload, timing, and response. This is indispensable for debugging API calls, diagnosing slow page loads, and understanding how your application communicates with servers.

Request Table Columns

Each row in the Network panel represents a single request. Right-click the column headers to customize which columns are visible. The most useful columns include:

• Name: The filename or last segment of the URL. Hover to see the full URL.
• Status: HTTP status code (200, 301, 404, 500, etc.). Color-coded: green for 2xx, yellow for 3xx, red for 4xx/5xx.
• Type: Resource type (document, stylesheet, script, xhr, fetch, img, font, websocket, etc.).
• Initiator: What triggered the request. Click to jump to the line of code that initiated it.
• Size: Transfer size (compressed) versus resource size (decompressed). A "(from cache)" or "(from service worker)" note indicates cached responses.
• Time: Total time from request start to response completion. Hover for a breakdown (DNS, TCP, TLS, TTFB, content download).
• Waterfall: Visual timeline bar showing when each request started and how long each phase took.

Filtering Requests

The filter bar at the top lets you narrow down requests quickly. You can filter by resource type using the toggle buttons (All, Fetch/XHR, JS, CSS, Img, Media, Font, Doc, WS, Wasm, Manifest, Other) or use the text filter with special operators:

# Text filter examples
api/users              # Match URL containing "api/users"
-favicon               # Exclude requests containing "favicon"
status-code:404        # Show only 404 responses
method:POST            # Show only POST requests
domain:api.example.com # Filter by domain
has-response-header:set-cookie  # Requests that set cookies
larger-than:100k       # Responses larger than 100KB
mime-type:application/json      # Filter by MIME type
is:from-cache          # Show only cached responses
is:running             # Show pending requests

Inspecting Request Details

Click any request to open its detail view with multiple tabs:

Headers Tab

Shows the full request and response headers. The General section shows the URL, method, status code, and remote address. Request Headers show what the browser sent (including cookies, auth tokens, content-type). Response Headers show what the server returned (cache-control, content-encoding, CORS headers).

Payload Tab

For POST/PUT/PATCH requests, the Payload tab shows the request body. If it is JSON, DevTools parses and formats it nicely. Form data is displayed as key-value pairs. You can also see query string parameters for GET requests here.

Preview and Response Tabs

Preview renders the response in a human-friendly format: JSON is syntax-highlighted and collapsible, HTML is rendered, images are displayed. The Response tab shows the raw response text.

Timing Tab

The Timing tab breaks down the request lifecycle into phases:

Waterfall Analysis

The waterfall visualization is the most powerful feature for understanding page load performance. Each horizontal bar represents a request, positioned on a timeline. The length and color of each segment tells you where time is being spent.

• Blue bars: Waiting / TTFB - the server is processing the request
• Green bars: Content download - receiving the response body
• Long gaps between bars: Indicate render-blocking resources or dependency chains
• Parallel bars: Indicate concurrent requests, which is efficient
• Staircase pattern: Indicates sequential dependency chains, a common performance problem

Throttling and Simulation

The Network panel lets you simulate different network conditions to test how your application behaves on slow connections. Use the throttling dropdown to select presets like "Slow 3G," "Fast 3G," or "Offline." You can also create custom profiles:

// Custom throttling profile example
{
  "download": 1500000,  // 1.5 Mbps download
  "upload": 750000,     // 750 Kbps upload
  "latency": 40         // 40ms round-trip latency
}

Blocking Requests

You can block specific requests to test how your application handles missing resources. Right-click a request and choose "Block request URL" or "Block request domain." Alternatively, open the Network Request Blocking drawer (Cmd + Shift + P and type "blocking") to manage block patterns. This is useful for testing graceful degradation when a CDN is down or an API is unavailable.

Replay and Copy Requests

Right-click any request for powerful actions:

• Replay XHR: Re-send the exact same request to test API endpoints
• Copy as cURL: Generates a complete curl command including all headers, cookies, and body. Paste into terminal to reproduce the request.
• Copy as fetch: Generates JavaScript fetch() code you can paste into the Console or your application code.
• Copy response: Copy the full response body to clipboard.
• Copy all as HAR: Export the entire network log as a HAR (HTTP Archive) file for sharing or analysis in tools like WebPageTest.

# Example: copied cURL command from DevTools
curl 'https://api.example.com/users?page=1' \
  -H 'accept: application/json' \
  -H 'authorization: Bearer eyJhbGc...' \
  -H 'content-type: application/json' \
  --compressed

WebSocket Inspection

Filter by "WS" to see WebSocket connections. Click a WebSocket request to see the Messages tab, which logs every frame sent and received in real time. Messages are color-coded: green for sent (outgoing), white for received (incoming). This is essential for debugging real-time features like chat applications, live dashboards, and collaborative editing.

Network Panel Tips