Lesson 4: Open the browser's X-ray: the Network panel

Lesson objectives:

• Open the developer tools in a browser.
• Switch to the Network panel.
• Read the request list and identify a single request.

Previous << 3 | Next 5 >>

Every browser hides a flight-recorder for every page

You do not need special software to see HTTP requests. Every major browser has a built-in tool called developer tools (or DevTools). Inside it is a Network panel that logs every request the browser sends while the tools are open ¹².

Explanation

How to open DevTools

The exact shortcut depends on your browser and operating system:

• Chrome / Edge / Firefox on Windows: press Ctrl + Shift + I or F12.
• Chrome / Edge / Firefox on macOS: press Cmd + Option + I.
• Safari: first enable the Develop menu in Preferences, then press Cmd + Option + I.

Once DevTools is open, click the Network tab.

The request list

The Network panel shows a table. Each row is one request. The default columns include:

• Name — the file name of the requested resource.
• Status — the HTTP status code.
• Type — the kind of resource, such as document, stylesheet, or image.
• Initiator — what caused this request: the parser reading the HTML, another script, or a redirect.
• Size — how much data was transferred.
• Time — how long the request took ².

The top row is usually the main HTML document.

Two of these columns repay a closer look. Initiator is how you answer "why was this even requested?" — it points back at the line of HTML or JavaScript that triggered it ². Size is a transfer figure, not a file size: when the browser answers from its own cache it reports something like "(disk cache)" instead of a byte count, because nothing crossed the network ³.

Inspecting one request

Click a row to open a detail view. The Headers tab shows the request line, request headers, and response headers. The Response tab shows the body the server sent back ¹.

One habit worth forming early: the panel only records while it is open ¹. If you open DevTools after the page has loaded, the list is empty, and reloading is the fix. For flows that navigate away — a login that redirects — turn on Preserve log so the earlier requests survive the navigation instead of being cleared ¹.

Worked example (follow along)

1. Open Chrome, Edge, Firefox, or Safari.
2. Press Cmd + Option + I (macOS) or Ctrl + Shift + I (Windows/Linux).
3. Click the Network tab.
4. Type https://example.com in the address bar and press Enter.
5. You will see a row with the name example.com or index.html. Its Type will probably be document. Its Status will be 200.

Click that row. The Headers tab will show:

Request Method: GETStatus Code: 200 OK

Your turn (faded example)

Look at the Network panel after reloading a page. Find the row whose Type is document. What is the Status value for that row?

Answer: it is usually 200.

Summary + what's next

The Network panel is your window into the HTTP conversation. Each row is a request, and clicking a row reveals the request and response headers. Next, you will read the whole story of a page load.