Inspecting HTTP with Browser Dev Tools

Getting Started: The Network Panel

First things first, let's get acquainted with the tool. The Network panel logs all network activity a page initiates while the developer tools are open. It's your window into the raw data exchange.

To get a solid visual introduction, let's watch a short video from the Chrome Developers team.

The video gives a great overview. For a more detailed textual reference that you can follow along with, the official Chrome documentation provides a step-by-step guide.

By now, you should be comfortable with the main view of the Network panel, where each row represents a single resource requested by the page.

Anatomy of a Request: The Details View

The real power of the Network tab comes from its ability to show you every detail of an individual HTTP exchange. By clicking on any request in the log, you can inspect its headers, body, timing, and more.

Let's look at the most important part: the Headers tab. This is where you'll see the HTTP methods, status codes, and headers we discussed in the last lesson.

Now, let's see how to access and interpret this information in a live example.

The Preview and Response tabs let you see the payload or body of the response. For an HTML file, the Response tab shows you the raw source code, while Preview shows a basic rendering of it. For other resources like images, Preview will show you the image itself.

Hands-On Practice: Let's Investigate

It's time to put your new skills to the test. We'll use the same demo page from the Chrome documentation for a guided investigation.

Please open this page with your DevTools Network tab open: Get Started Demo

Task 1: Analyze the Main Document

The very first request you see should be for getstarted.html. This is the base HTML document. Click on it to open the details view.

Now, find the answers to these questions:

1. General section: What was the Request Method and the Status Code?
2. Response Headers section: What is the value of the content-type header? What does this tell the browser about the data it just received?
3. Request Headers section: Find the user-agent header. What does its value say about your browser and operating system?
4. Response tab: Look at the content in the Response tab. This is the HTML source code your browser received before parsing and rendering it.

Task 2: Analyze an AJAX Request

Modern web pages often fetch data in the background after the initial page load. This is done using a technique called AJAX, which relies on JavaScript to make HTTP requests.

On the demo page, click the "Get Data" button. You'll see a new request appear in your Network log for a file named getstarted.json. Click on this new request.

1. What is the Type of this request, according to the main network log? (Hint: it's not document).
2. In the details view, look at the content-type in the response headers. How is it different from the HTML document's content type?
3. Examine the Preview and Response tabs. You're looking at a JSON object, a common format for exchanging data between a client and a server.

Task 3: Filtering and Searching

Real-world websites can load hundreds of resources, making the network log overwhelming. The Network panel has powerful filtering and searching tools to help you find what you need.

Seeing it in the Wild: A Complex Example

Demo pages are clean and simple. Let's take a quick look at a more realistic scenario. A single page load on a major website can involve dozens of connections to different servers for content, analytics, and ads. It can also involve different versions of the HTTP protocol.

This gives you a glimpse into the depth of information available. As you progress, you'll be able to diagnose complex loading performance issues, debug API calls, and understand the intricate dance of protocols that brings a modern webpage to your screen.

Conclusion

Congratulations! You've moved from understanding HTTP in theory to observing it in practice. The Network tab is no longer just a wall of text; it's a powerful diagnostic tool that you can now navigate with confidence.

Key Takeaways:

• The Network tab must be open before loading a page to capture all traffic.
• Each row in the log represents a request for a single resource (HTML, CSS, JS, image, etc.).
• Clicking a resource reveals detailed Headers, Response Body, and Timing information, allowing you to see the exact HTTP messages exchanged.
• You can use filtering and searching to quickly find specific requests or data within a busy network log.
• The Initiator column and the Waterfall view help you understand what triggered a request and how requests depend on each other.

Preview of the Next Lesson:

So far, we've focused on how the internet's protocols work as designed. But what happens when they are used maliciously? In our next module, we will dive into Network Security. Our first lesson will explore how attackers can exploit the local network with techniques like ARP spoofing to carry out Man-in-the-Middle attacks, a foundational concept in understanding network vulnerabilities.