The Network tab
The Network tab lists the requests the page sent to the server and the responses it received. It is used to determine whether a defect is in the data returned by the server or in how the page rendered that data.
Reading the list
Each row is one request. The relevant columns are Name (address), Status (response code), Method, Type, Size and Time. For a response served from the cache, the Size column shows from disk cache or from memory cache instead of a size.
Rows highlighted in red
Red marks requests that ended in an error. There are two cases: the server returned an error code, or no response was received at all. The distinction determines where the defect is located.
Red with a status code
The request reached the server and returned 4xx or 5xx. A response exists and can be examined: the Response tab usually contains a message describing the reason for the rejection. The request, the status code and the response body can be attached to a defect report.
Red without a status code
- (failed) — no response was received: no network connection, the host name did not resolve, the connection was refused, or the server is not running. Hovering over the row shows the browser error, for example ERR_CONNECTION_REFUSED.
- CORS error — the request was sent, but the browser did not pass the response to the page. The server is operational; the permission headers are configured incorrectly.
- (blocked:…) — the request was stopped by an extension, an ad blocker or the page security policy. Such cases have to be reproduced in a private window before reporting.
- (canceled) — the request was interrupted, usually because the page navigated elsewhere or the code aborted it. In most cases this is not a defect.
Inside a single request
- Headers — method, full URL, status, request and response headers. Request Headers were sent by the browser (for example Content-Type or Authorization); Response Headers came back from the server (for example Content-Type, Set-Cookie or X-Request-Id).
- Payload — the transmitted data: request body and query parameters.
- Response — the raw response; Preview shows the same data formatted, which is more convenient for JSON.
- Timing — the distribution of time across request phases, used when investigating slow responses.
Three controls
- Filter — Fetch/XHR hides images, fonts and stylesheets and leaves only backend calls.
- Preserve log — keeps the list across page reloads and redirects. Without it, a request that triggers navigation is removed from the list.
- Disable cache — while DevTools is open, all files are requested from the server. Used to confirm that the current version is being tested.
Data for a defect report
Right-click on a request → Copy → Copy as cURL produces the exact request that was sent; it can be replayed from a terminal. The status code, the request body and the response body are the three elements that make a defect report reproducible.
At the interview
These questions check whether the request list can be used to decide which side a defect is on, and whether the data for a report can be collected from it. Try answering before opening the answer.
juniorentry-level knowledge
1. What is Preserve log for?
It keeps the request list across reloads and redirects. Without it, the request that caused the navigation — a form submission that redirects, for example — is cleared along with the previous page, and that is usually the one request worth looking at.
2. What do you attach to a defect report from the Network tab?
The status code, the request body and the response body: the three elements that make a report reproducible. The request itself is easiest to take with a right click → Copy → Copy as cURL, which produces the exact request that was sent and can be replayed from a terminal.
3. What can you look at inside a single request?
A request unfolds on a click, and inside it there are several tabs:
- Headers — the method, the full URL, the status code and the headers: what the browser sent and what the server returned.
- Payload — the request body and the query parameters.
- Response — the raw response; Preview is the same data formatted, which is easier to read for JSON.
- Timing — how the time was spent across the phases of the request, used when a response is slow.
middlea more advanced level
4. How do you tell from the Network tab which side the defect is on?
Compare the response body with what the page displays. If the server returned the correct data and the screen does not show it, the defect is on the frontend. If the data is already wrong in the response, the cause lies earlier: in the request the page sent, or on the server.
5. What does a red row without a status code mean?
That no response was received at all. The reason is in the row itself:
- (failed) — no connection, the host name did not resolve, or the server is not running.
- CORS error — the response arrived, but the browser did not pass it to the page: the permission headers are wrong.
- (blocked:…) — an extension, an ad blocker or the page security policy stopped the request.
- (canceled) — the request was interrupted, usually by navigation. In most cases this is not a defect.
6. How do you make sure you are testing the current version and not the cache?
Turn on Disable cache while DevTools is open, or do a hard reload. In the Size column, a response served from the cache shows from disk cache or from memory cache instead of a size — a sign the file never came from the server.
Questions on the other topics are collected on the QA interview questions on DevTools page.