Ever wondered what data a website is actually sending and receiving behind the scenes? Every time a page loads, your browser fires off dozens of network requests — for images, scripts, and API calls carrying real data. Chrome DevTools lets you watch all of it live. Here's how, in plain steps.

What you'll learn

  • How to open the Network tab
  • How to read a single request (headers, response, timing)
  • How to filter to just the requests you care about (like API calls)
  • A few pro tricks that save hours of debugging

Step 1: Open the Network tab

There are three easy ways to open Chrome DevTools:

  • Press F12
  • Press Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac)
  • Right-click anywhere on the page → Inspect

Once DevTools opens, click the Network tab at the top.

Tip: If you see nothing, reload the page (Ctrl + R) while the Network tab is open. DevTools only records requests while it's open.

Step 2: Watch the requests roll in

As the page loads, you'll see a long list fill up. Each row is one request. The key columns:

Column What it tells you
Name The file or endpoint requested
Status The result code (200 = OK, 404 = not found, 500 = server error)
Type What kind of resource (document, script, fetch/xhr, img)
Size How much data came back
Time How long it took

Step 3: Filter to just what matters

The full list is noisy. Use the filter bar at the top of the Network tab:

  • Click Fetch/XHR to see only API calls — this is where the real data lives.
  • Type a keyword in the filter box (e.g. login or user) to narrow it down.
  • Click Img, JS, or CSS to isolate those resource types.

For most debugging, Fetch/XHR is the one you want — it hides images and styling and shows only the data your app is fetching.

Step 4: Read a single request

Click any request in the list. A panel opens with tabs:

  • Headers — the URL, the request method (GET/POST), status code, and all request/response headers.
  • Payload — the data your browser sent (great for checking what a form submitted).
  • Response — the raw data the server sent back (often JSON).
  • Preview — a nicely formatted version of the response — easiest way to read JSON.
  • Timing — a breakdown of exactly where the time went.

To read an API response, click the request → Preview tab. You'll see the JSON laid out in an expandable tree.

Pro tricks

  • Preserve log: check the Preserve log box to keep requests across page reloads and redirects — essential for debugging logins.
  • Copy as cURL: right-click a request → Copy → Copy as cURL to replay it in your terminal or share it.
  • Disable cache: check Disable cache (with DevTools open) to always fetch fresh files.
  • Slow network test: use the throttling dropdown (No throttling → Slow 3G) to see how your site behaves on a slow connection.

Wrapping up

The Network tab is one of the most powerful tools in a developer's kit — for debugging APIs, checking why a page is slow, or just understanding how a site works under the hood. Open it up on any website and start exploring.

Want more short, practical guides like this? I publish new AI-tool and web-dev tutorials every week — grab them below.