Firefox DevTools' Network panel is where you diagnose loading performance, API issues, and request behavior. Here's a practical guide to using it effectively.
The Network Panel Basics
Open: F12 → Network tab
The panel starts recording when opened. Each row is a network request:
- Method (GET, POST, etc.)
- File/URL
- Status code
- Type (document, fetch, script, image, etc.)
- Size (transferred / actual)
- Timing
Click any row to see details.
Request Details: The Four Key Tabs
Headers: Request headers you sent, response headers received. Useful for:
- Checking if cookies were sent
- Verifying Content-Security-Policy headers
- Checking CORS headers (Access-Control-Allow-Origin)
- Checking cache headers (Cache-Control, ETag, Last-Modified)
Response: The response body. For API calls, see the JSON/XML/HTML returned. Can format JSON for readability.
Cookies: Cookies sent with the request and set by the response. Useful for debugging cookie scope/path/SameSite issues.
Timing: Detailed breakdown of the request timing:
- Blocked: Waiting to be sent (connection limit, browser queuing)
- DNS Resolution
- Connecting (TCP handshake)
- TLS Handshake
- Sending (uploading request body)
- Waiting (TTFB - Time to First Byte)
- Receiving (downloading response)
Filtering Requests
By type: Click the filter buttons (HTML, CSS, JS, XHR, Fonts, Images, Media, WS, Other) to show only that type.
By URL substring: Type in the filter box to show only requests whose URL contains that text.
By status: Right-click the filter bar → filter by status code range.
Blocked requests: Red rows are blocked requests. Filter to see only errors.
Finding API Calls
Most useful workflow: filtering for XHR/Fetch to see only API calls.
Click "XHR" filter → see all AJAX requests. Sort by URL or by time to find specific endpoints.
Tip: Click on a row → Right-click → "Copy as cURL" to reproduce the exact request in your terminal with all headers and cookies.
Timing Analysis
Sort by "Duration" (click the column header) to find the slowest requests.
Waterfall column: Shows request timing as a visual timeline. Long bars = slow requests. Multiple bars in parallel = concurrent requests.
DOMContentLoaded marker: Red vertical line. Everything before = blocking resources for initial render.
Load marker: Blue vertical line. Point at which the page load event fires.
Resources between the two lines are loaded after initial content is visible but before the load event.
Cache Behavior
The "Transferred" column shows:
- A size like "12.3 KB" → downloaded from network
- "(cached)" or "disk cache" → served from cache
- "(memory cache)" → served from in-memory cache
To force all requests to go to the network: check "Disable Cache" in the Network panel toolbar (only while DevTools is open).
To test caching behavior: Load a page, check which resources are cached. Hard reload (Ctrl+Shift+R) bypasses cache for one load.
Security Column and Certificate Info
Sort by Security column to see which requests are HTTPS vs HTTP.
Click on a HTTPS request → Security tab → Shows certificate details:
- Who issued it
- Validity period
- Certificate chain
- Any security warnings
Useful for: verifying HTTPS is properly configured, checking certificate expiry, debugging mixed-content warnings.
Request Blocking
Block specific requests for testing:
Right-click any request → "Block URL" → Add the URL or pattern.
Blocked URLs return as errors. Useful for testing how your app behaves when specific APIs or CDNs are unavailable.
Network panel → "Blocked" tab (or "Request Blocking") shows all active blocks.
Throttling
Simulate slower networks: Toolbar dropdown → "No Throttling" → Select:
- DSL (slow broadband)
- 3G
- 2G
- Custom (set upload/download speed and latency)
Test your page on simulated mobile networks to see what users with slow connections experience.
Import/Export HAR
Network panel → … menu → "Save All as HAR" exports the complete request log as HAR (HTTP Archive) format.
HAR files can be:
- Shared with colleagues for debugging
- Imported into other tools (WebPageTest, HAR viewer)
- Opened in Chrome/Edge DevTools Network panel (they understand the same format)
Import a HAR: same menu → "Import HAR"
Cookie and Header Editing (with Extension)
Firefox DevTools itself doesn't have a built-in request editing feature (unlike Chrome's Overrides). For intercepting and modifying requests, use:
- FoxyProxy (for proxy routing)
- Requestly extension (modify headers, redirect URLs, inject scripts)
- Or set up a local proxy (mitmproxy, Charles)
Web Socket Inspection
Filter by "WS" to show WebSocket connections. Click on one to see:
- Connection headers (the upgrade handshake)
- Messages tab: shows all frames sent/received with timestamps
Useful for debugging real-time features using WebSocket or Socket.io.
Source Maps for Script Requests
When source maps are configured, the script name in the Network panel shows the original filename (not bundle.js). Click → opens in Debugger at the source file.
This links performance issues (slow script loading) to the actual source module responsible.
The Practical Debugging Workflow
- Open Network panel before reproducing the issue
- Reproduce the bug
- Filter to the relevant request type (XHR for API, All for load order)
- Look for red rows (errors), missing requests, or unexpectedly slow requests
- Click the relevant request → check Headers (right headers sent?), Response (right data returned?), Timing (which phase is slow?)
For "my API call isn't working": check Headers tab — is the Authorization header present? Is the Content-Type correct? Then Response tab — what exactly is the server returning?
For "page is slow": check the waterfall, find the blocking resources, and look for large files or slow TTFB (server processing time).
The Network panel is the starting point for almost all performance and API debugging.
Top comments (0)