What you'll learn

  1. Quick answer
  2. The columns that matter
  3. Filtering a noisy log
  4. Preserve log and Disable cache
  5. Reading the timing breakdown
  6. Copy as cURL, throttling and HAR
  7. FAQ

Quick Answer

Open DevTools and select the Network panel, then reload. Each row is one request; the columns to watch are Status, Type, Initiator, Size and Time, with the Waterfall showing when each request happened. Filter with the text box and type buttons, turn on Preserve log to survive page navigations, and hover a Waterfall bar or open the Timing tab to see where the time went. Right-click a request and Copy as cURL to reproduce it in a terminal.

The columns that matter

By default the Network log shows Name, Status, Type, Initiator, Size, Time and the Waterfall.

  • Status is the HTTP code. Watch for unexpected 3xx redirects, 401 and 403, and 200s that were actually served (from disk cache) or (from memory cache), which shows in the Size column.
  • Initiator tells you what caused the request. Click it to jump to the line of JavaScript that fired it.
  • Size shows bytes transferred over the wire on top and the uncompressed resource size below, so a large gap means compression is working and no gap means it is not.
  • Time is the total duration of the request.

Right-click the column header to add more: Protocol (h2, h3), Priority, Domain, Method. Click a column to sort; sorting by Size or Time surfaces the worst offender on the page immediately.

Filtering a noisy log

A real page fires hundreds of requests. The filter box above the log accepts:

  • Plain text, matched as a substring of the URL: api, .json.
  • A leading - to exclude: -.js hides scripts.
  • A regular expression between slashes: /\.(woff2?|ttf)$/.
  • Property filters: domain:api.example.com, status-code:404, method:POST, larger-than:100k, mime-type:application/json, has-response-header:content-encoding, resource-type:websocket.

Next to the box are the type buttons: Fetch/XHR, Doc, CSS, JS, Font, Img, Media, WS, Wasm, Manifest and Other. Click Fetch/XHR when you only care about API calls. Hold Ctrl or Cmd to select several types at once. Put together, show me every failed POST to this host is three clicks and a keyword.

Preserve log and Disable cache

Two checkboxes at the top of the panel change how it behaves.

Preserve log stops the request list clearing when the page navigates or reloads. Turn it on to debug anything that leaves the current page: a login form that POSTs and redirects, an OAuth flow that bounces through several URLs, a logout, or a payment callback. Without it, the requests you needed to see are wiped the moment the new page loads.

Disable cache forces every request to actually hit the network while DevTools is open, ignoring the browser cache. Use it to reproduce what a first-time visitor experiences, or when you have just changed an asset and want to be sure you are testing the new version rather than a cached copy. Keep track of which mode you are in: a fast reload with cache on and a slow one with it off are both correct, they just answer different questions.

Reading the timing breakdown

Click a request and open its Timing tab, or hover its bar in the Waterfall. The phases, in order:

  • Queueing and Stalled: the request is waiting, often because the browser is holding it behind higher-priority requests or has run out of connections to that host. Long stalls point to too many parallel requests or HTTP/1.1 connection limits.
  • DNS Lookup, Initial connection, SSL: setting up the connection. Paid once per host, then reused.
  • Request sent: uploading the request. Usually negligible unless you are POSTing a large body.
  • Waiting for server response (TTFB): time from request sent to the first byte back. This is your backend's thinking time. A large TTFB means the server or database is slow, not the network.
  • Content Download: receiving the response body. Large here means a big payload or a bandwidth limit.

The shape tells you where to look: TTFB is a backend problem, Content Download is a payload problem, Stalled is a request-scheduling problem.

Copy as cURL, throttling and HAR

Right-click any request and open the Copy submenu. Copy as cURL gives you the full command with method, headers, cookies and body, ready to paste into a terminal to reproduce the exact call outside the browser. There is a PowerShell variant, plus Copy as fetch and Copy as fetch (Node.js) for scripting, and Copy response for the body.

The throttling dropdown simulates slower connections such as Slow 4G and 3G, and lets you add a custom profile with your own latency and bandwidth, so you can feel what users on a weak mobile network get. Block request URL, from the right-click menu, lets you test how the page behaves when a script or endpoint fails.

The summary bar at the bottom shows total requests, bytes transferred versus resource size, and the DOMContentLoaded and Load times. To hand a bug to someone else, right-click and export the whole session as a HAR file; they can import it into their own Network panel and see exactly what you saw.

Frequently Asked Questions

What does a long Waiting for server response time mean? That phase, also called TTFB, is the gap between the request leaving the browser and the first response byte arriving. A large value means the server spent that time working, usually slow application code or a slow database query. It is not a network problem.
How do I keep network requests visible after the page reloads? Turn on the Preserve log checkbox at the top of the Network panel. The request list then carries across navigations and reloads, which is necessary for debugging redirects, form submissions and login flows.
How do I copy an API request from DevTools to run in my terminal? Right-click the request, open the Copy submenu and choose Copy as cURL. The command includes the method, headers, cookies and body. Paste it into a terminal to reproduce the call. Copy as fetch does the same for JavaScript.
What is the difference between transferred size and resource size? Transferred size is the bytes that actually went over the network, after compression. Resource size is the uncompressed content. A big difference means gzip or brotli is working; no difference means the response was not compressed.
How do I simulate a slow connection? Use the throttling dropdown in the Network panel and pick a preset like Slow 4G, or add a custom profile with your own latency and throughput. Combine it with Disable cache to approximate a first visit on a weak mobile network.