Practice: trace a page request

Let’s turn the request and response into something you can see.

Open a page in your browser. You can use this course page.

Then open the browser developer tools and select the Network panel. Reload the page. You will see a list of requests.

Find the first request whose type is document. Click it and look for these details:

• the request URL
• the request method
• the response status
• the Content-Type response header

You should find a GET request, a successful status such as 200, and a content type that includes text/html.

Now open the response tab. This is the HTML the server sent to the browser.

The browser made more requests after receiving it. Those requests fetch stylesheets, scripts, images, and fonts mentioned by the document.

Draw the exchange

Write this on paper or in a text file:

My browser asked for:

The server answered with:

The content type was:

The HTML caused these extra requests:

Fill each line with something you observed.

You do not need to understand every header. The goal is to connect the words browser, request, server, response, and HTML to a real exchange.

If the document request shows a redirect status such as 301 or 302, follow it. The final document response is the one whose body contains HTML.

Compare a live site request with opening a local index.html through file://. The local file has no server in the middle, so the Network panel looks different. That contrast matches what you learned in the browsers-and-servers lesson.

You are done when you can point to the document request and explain which side sent the HTML.