How to Use the Network Tab in Chrome DevTools: Find Failed Requests, Payload and Response #Shorts
How to use the Network tab in Chrome DevTools: open DevTools, reload the page, filter to Fetch/XHR, then click a request to read its Headers, Payload and Response. A status in the 400s or 500s tells you which request failed.
STEPS Open DevTools: Command+Option+I on a Mac, F12 (or Ctrl+Shift+I) on Windows. Click the Network tab. Reload the page. Each row is one request, with its Status, Type, Size and Time. Click Fetch/XHR to see only your API calls (fetch and XHR requests). Click a request. Headers shows the Request URL, the method and the Status Code. Open Payload to see what you sent (query string or request body) and Response to see what the server sent back. Look at the Status column: 4xx or 5xx means the request failed. Start your debugging there. Tick Keep log so requests stay in the list after a reload or a redirect.
READING A ROW
Name: the file or endpoint. Status: the HTTP code (200 OK, 201 Created, 404 Not Found, 500 Server Error). Type: fetch, script, stylesheet, document. Size: what was transferred. Time: how long the request took from start to last byte.
GOOD TO KNOW
- DevTools records only while it is open, so open it before you reload.
- The filter box also accepts text, for example part of a URL like api/checkout.
- Failed requests are easier to spot when you sort by the Status column.
- Right-click a request and choose Copy as cURL to replay it outside the browser.
FAQ
How do I open the Network tab in Chrome?
Press Command+Option+I on a Mac or F12 / Ctrl+Shift+I on Windows to open DevTools, then click Network. DevTools opens on the last panel you used.
Why is the Network tab empty?
DevTools only records requests while it is open. Open it first, then reload the page.
What does Fetch/XHR show?
Only fetch() and XMLHttpRequest calls, which are usually your API calls. Images, CSS and scripts are hidden.
Where do I see the request body I sent?
Click the request and open the Payload tab. It shows query string parameters and the request body.
Where is the response?
Open the Response tab for the raw body, or Preview for a formatted view of JSON.
Which status codes mean an error?
4xx codes are client errors (for example 401, 403, 404). 5xx codes are server errors (for example 500, 502, 503).
Is Keep log the same as Preserve log?
Yes. Current Chrome labels the checkbox Keep log; the Chrome docs and older versions call it Preserve log. It keeps requests across page loads and redirects.
How do I copy a request?
Right-click the row and choose Copy, then Copy as cURL or Copy as fetch, to replay it in a terminal or in code.
What do Size and Time mean?
Size is the response headers plus body as delivered by the server. Time is the total duration from the start of the request to the last byte.
Can I simulate a slow connection?
Yes. Use the throttling menu (No throttling) in the Network toolbar to pick a slower network profile.
How do I show only failed requests?
Type status-code:500 (or any code) in the filter box, or sort the table by the Status column.
What is the difference between Preview and Response?
Response shows the raw body exactly as received. Preview shows a formatted version, such as expandable JSON or a rendered image.
What does the Timing tab show?
How long the request spent queued, waiting for the server's first byte and downloading the content.
What does Disable cache do?
While DevTools is open, the page loads every file from the network instead of the browser cache, like a first visit.
ABOUT THIS VIDEO
This is an animated explainer. Every DevTools screen is a real capture of Chrome DevTools on a local demo page with fictional data (the checkout call returns 500 on purpose). Narration is an AI voice.
The Network tab shows what happens in your browser. When a call fails on your users' devices, you can't open DevTools there. Bugfender collects your app's logs and errors remotely from the devices where the bug happened, so you can see the failing request with its device context. Get started for free: https://bugfender.com
RELATED VIDEOS
"Google Chrome DevTools: Payload in Network Tab"
"How to Turn On Dark Mode in Chrome DevTools"
LINKS
Chrome DevTools Network panel (official): https://developer.chrome.com/docs/devtools/network
Network features reference: https://developer.chrome.com/docs/devtools/network/reference
Open Chrome DevTools (shortcuts): https://developer.chrome.com/docs/devtools/open
Bugfender: https://bugfender.com
#Shorts #ChromeDevTools #WebDev