The Network Panel

🌐 Lesson 4 — The Network Panel

The Network panel records every HTTP request the browser makes — HTML, CSS, scripts, images, fonts, API calls — and shows you headers, response bodies, and a timing breakdown for each one. Press Ctrl + Shift + E to open it, then reload the page to capture the full load sequence.

🗺️ The Network Panel Interface

🚦 HTTP Status Codes

The Status column is colour-coded. These are the codes you'll see most often in DevTools:

📋 Inspecting a Request — Headers Tab

Click any request to open the detail panel. The Headers tab shows what the browser sent and what the server replied with.

The key things to check in the Headers tab when an API call fails:

⏱️ The Timing Waterfall

Each bar in the Waterfall column is divided into colour-coded segments representing the phases of the HTTP lifecycle. Hover over any bar to see the exact milliseconds per phase.

TTFB (Time to First Byte) — the orange Waiting segment — is the server's processing time. A wide orange bar on /api/orders above tells you the server took 1.2 seconds to respond, not the network. Wide Receiving bars mean a large download; wide DNS/Connect bars mean connection setup isn't being reused.

📦 HAR Files — HTTP Archive

A HAR file (HTTP Archive) is a JSON snapshot of every network request in the Network panel — URLs, methods, headers, response bodies, cookies, and timing data — saved to a portable .har file you can share, replay, or analyse offline.

What a HAR File Looks Like

{
  "log": {
    "version": "1.2",
    "creator": { "name": "Firefox", "version": "125.0" },
    "pages": [{ "id": "page_1", "title": "https://example.com",
                  "pageTimings": { "onContentLoad": 231, "onLoad": 718 } }],
    "entries": [
      {
        "startedDateTime": "2024-11-14T09:31:00.000Z",
        "time": 143.2,
        "request": {
          "method": "GET", "url": "https://example.com/",
          "headers": [{ "name": "Authorization", "value": "Bearer eyJ…" }]
        },
        "response": {
          "status": 200, "statusText": "OK",
          "bodySize": 12288
        },
        "timings": {
          "dns": 8, "connect": 12, "ssl": 18,
          "send": 1, "wait": 91, "receive": 13
        }
      }
      // … one object per request
    ]
  }
}

Creating a HAR File in Firefox

1. Open the Network panel (Ctrl + Shift + E).
2. Reproduce the activity you want to capture — reload the page, complete the user flow, or trigger the API call that's failing.
3. Right-click anywhere in the request list → Save All as HAR, or click the 💾 floppy disk icon in the toolbar.
4. Save the .har file to disk.

Reading and Importing a HAR File

You can replay a captured HAR file directly in Firefox's Network panel:

1. Open the Network panel.
2. Drag and drop the .har file onto the request list — or use the import icon in the toolbar if your Firefox version shows one.
3. All captured requests appear in the list exactly as recorded. Click any row and inspect headers, response bodies, and timings as normal.

You can also read a HAR file programmatically — it's plain JSON:

What HAR Files Are Used For

💡 Practical Tips

✏️ Exercises

• Audit a page's requests. Open the Network panel on any site (Ctrl + Shift + E), reload, and note the total request count and bytes. Filter by XHR/Fetch — how many API calls does the page make?
• Read an API response. Click a fetch or xhr request → Response tab. Read the JSON the server returned. Then click Headers and find the Content-Type response header.
• Investigate a 304. Find a request with status 304 (look in the JS or image rows). Click it → Headers tab. Find the ETag or Cache-Control response header that tells the browser how long to cache this resource.
• Read the timing breakdown. Click any external API request → Timings tab. Identify how long the Waiting (TTFB) phase was. Is most of the time spent waiting for the server or downloading the response?
• Throttle and compare. Set the throttle dropdown to Regular 3G and reload. Note the new total load time. Do loading states appear? Set it back to No throttling.
• Create a HAR file. Open the Network panel, reload a page, right-click the request list → Save All as HAR. Open the file in a text editor. Find the first entry in "entries" and read its "timings" object — what was the TTFB ("wait" value)?
• Import the HAR. Drag the .har file you just saved back onto the Network panel request list. Confirm all requests are replayed and you can click them to inspect headers and responses.

📌 Key Takeaways

• Open the panel before reloading — it only captures requests made while it's open.
• XHR/Fetch filter isolates API calls — the first filter to use when debugging backend communication.
• 304 = caching working correctly; 200 on every reload for a static file = broken cache headers.
• The Response tab shows the actual server error message on 4xx/5xx — the status code alone is not enough.
• The Waiting (orange) bar in the waterfall is TTFB — the server's processing time. A wide bar means a slow backend, not a slow network.
• HAR files are portable JSON snapshots of the entire network trace — share, replay, or analyse them offline.
• HAR files contain credentials — redact Authorization and Cookie headers before sharing externally.
• Network throttling (Regular 3G) reveals loading states and performance issues invisible on a fast dev machine.