If you've ever wondered why a request is failing, why your API isn't returning data, or why your assets are slow to load, the Network tab in Chrome DevTools is your best friend.
Let's break it down step by step.
1️⃣ Open Chrome DevTools
-
Shortcut:
- Windows/Linux:
Ctrl + Shift + I - Mac:
Cmd + Option + I
- Windows/Linux:
- Or right-click anywhere on the page → Inspect → go to Network tab.
2️⃣ Reload the Page with Network Recording
- Make sure the red circle at the top-left of the Network tab is recording (it’s red by default).
- Reload your page (
F5orCtrl/Cmd + R) to capture all network activity.
3️⃣ Understand the Columns
- Name → file name or request URL
- Status → HTTP status (200, 404, 500, etc.)
- Type → resource type (document, script, xhr, fetch, etc.)
- Initiator → what triggered the request
- Size → file size transferred
- Time → how long the request took
4️⃣ Filter Requests
Use the filter buttons at the top:
- All / XHR / JS / CSS / Img / Media / Font / Doc / WS
- Or type part of a URL in the filter bar to narrow down requests.
5️⃣ Inspect a Request
Click on any request to see:
- Headers → Request & Response headers, cookies
- Preview → parsed response (JSON, HTML, etc.)
- Response → raw response
- Timing → DNS, TCP, request, and response timing
- Cookies → cookies sent or received
6️⃣ Check for Errors
- Look for red entries → failed requests.
-
Status codes help identify issues:
- 404 → Not Found
- 500 → Server Error
- 403 → Forbidden / CORS issue
7️⃣ Useful Tips
- Right-click a request → Copy → Copy as cURL to test in terminal.
- Check Preserve log if you want network requests to persist across page reloads.
- Enable Disable cache while DevTools is open to test fresh requests.
Debugging web requests has never been easier. Mastering the Network tab will save you hours chasing down errors, slow-loading assets, or broken APIs.
👉 Want more quick dev tips? Follow me on X (Twitter) for daily insights.
Top comments (0)