QM - Developer Tools - Network
Created by Alex Avila
What is a network call?
A Network Call is a request made by a client (your browser/app) to an external server to exchange data.
It follows the Request-Response cycle: the client asks for something (a file, a list of users, a login validation), and the server sends back a response (the data or an error message).
| Term | Definition |
|---|---|
What is a network call? | A Network Call is a request made by a client (your browser/app) to an external server to exchange data.
It follows the Request-Response cycle: the client asks for something (a file, a list of users, a login validation), and the server sends back a response (the data or an error message).
|
What does a "403 Forbidden" status code usually indicate? | The server understands the request, but refuses to authorize it.
a 403 means the server knows who you are, but you don't have permission for that specific action. |
What is a composed of? | A network call is made up of two sides:
Request (client → server)
Response (server → client) |
what are the Request components? | URL (Endpoint) – where the request is going
Method – what action to perform (GET, POST, PUT, DELETE, etc.)
Headers – metadata (auth tokens, content type, cookies, etc.)
Body (optional) – data being sent (e.g., JSON payload) |
what are the Response components? | Status Code – result (200, 404, 500, etc.)
Headers – metadata about the response
Body – returned data (HTML, JSON, etc.) |
What is a URL in a network call? | The address of the resource being requested |
What are headers used for? | To send metadata like authentication, content type, and cookie |
Why are network calls important in debugging? | They reveal backend issues, failures, and performance problems affecting the user experience |
What is the Network Stack? | shows detailed information about every network request made during a user session. It lets you inspect not just what calls happened, but also how they behaved over time. |
What is the network call stack used for?
| To view and analyze all network requests and their performance |
Why is call order important? | It shows dependencies and which calls may block others |
What are Request Headers? | "Instructions and Credentials" glued to the outside of your data package.
They tell the server who you are, what you’re sending, and how you want the response delivered. |
How are headers formatted? | As key-value pairs
(e.g., Content-Type: application/json)
server: AmazonS3
|
examples of headers | Request URL:
https://shop.lululemon.com/static/fmodules/dcp/@lululemon/metarouter-plugin/latest/168.js
Request Method: GET
Status Code: 200 OK
Remote Address: 23.37.17.14:443
|
What are response headers? | Response headers are key-value pairs sent back from the server to the client that provide metadata about the response. |
response headers vs request headers | Request Headers are the client’s instructions to the server
Response Headers are the server’s "terms and conditions" sent back to the browser. They tell the browser how to handle the data it just received. |
What is a request body? | Data sent from the client to the server |
What is a response body? | Data returned from the server to the client |
what is the Request Body and Response Body? | Request Body & Response Body are the parts of a network call that carry the actual data |
how does it work with the server? the Request Body and Response Body? | Request body (client → server):
The data being sent to the server
Response body (server → client):
The data returned from the server |
Why is the request body important for debugging? | It shows what data was sent to the server |
Why is the response body important for debugging?
| |
What is the request method? | it defines the specific action the client wants the server to perform on a given resource. |
The Core Request Methods | GET
POST
PUT
PATCH
DELETE |
What is the Initiator? | The Initiator is the link or script that triggered the network request. In the Chrome Network tab, the "Initiator" column provides a stack trace that allows you to work backward from the network call to the exact line of JavaScript that fired it. |
what is a har file? | HAR (HTTP Archive)
It is a JSON-formatted file that contains a detailed log of every single network request and response that occurred while the recorder was running. |
what does a HAR contain? | A HAR file records all the metadata of a browsing session, including:
- Request & Response Headers (Cookies, Auth tokens).
- Payloads (The data you sent).
- Timings (How long each DNS lookup, SSL handshake, and download took).
- Status Codes (Every 200, 404, or 500 error). |
Why is a HAR file better than a video for debugging? | a HAR file shows the hidden data, headers, and timing of every background call that led to that result. |