HTTP basics: reading requests and responses in the browser · Lesson 4 of 6

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 12.

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.
  • Size — how much data was transferred.
  • Time — how long the request took 2.

The top row is usually the main HTML document.

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 1.

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:

http
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.

Footnotes

  1. Chrome DevTools: Inspect network activity — https://developer.chrome.com/docs/devtools/network ↩ ↩2

  2. Chrome DevTools: Network panel overview — https://developer.chrome.com/docs/devtools/network/overview ↩ ↩2

Exercises

01

Open DevTools and the Network panel. Reload any web page. How many rows appear in the request list?

Level 1 (warm-up)
Done criteria · checked locally
02

Click the top row in the Network list and open the Headers tab. Copy the first line of the request and the first line of the response.

Level 2 (advanced)
Done criteria · checked locally