Firefox's Network Monitor (the Network tab in DevTools) is one of its best-in-class tools for web developers. This guide goes beyond the basics to cover the features most developers don't know about: request editing, HAR analysis, WebSocket inspection, and advanced filtering.
Opening Network Monitor
-
F12→ Network tab -
Ctrl+Shift+Eopens DevTools directly to the Network panel
Important: the Network panel only captures requests made while it's open. Always open it before navigating to the page you want to analyze, or use Ctrl+F5 (hard reload) after opening.
The Request Table
Each row represents a network request. Default columns:
- Status
- Method
- Domain/File
- Type (XHR, JS, CSS, HTML, etc.)
- Size (transferred vs. uncompressed)
- Time
Right-click the column header to add more:
- Protocol: shows HTTP/1.1, h2, h3
- Remote IP: server IP (useful for CDN debugging)
- Priority: fetch priority
- Cookies: cookies sent with request
Filtering Requests
Type filter bar: click CSS, JS, XHR, Fonts, Images, Media, WS, Other buttons to show only that type.
Search box: filters by URL. Supports partial match. Add ! prefix to exclude: !google hides all requests containing "google".
Status code filter: right-click any request → "Filter by Status Code" to show only requests with that status. Or type status-code:404 in the search box.
Method filter: method:POST shows only POST requests.
Regex: prefix with / for regex matching: /api\/(v1|v2)/ matches v1 or v2 API endpoints.
Inspecting a Request
Click any request to open the detail panel with tabs:
Headers: request and response headers. Click the raw toggle to see unformatted headers. The request headers section shows your browser version, cookies sent, Content-Type, and any custom headers.
Cookies: request and response cookies parsed into a table — name, value, domain, path, expiry, Secure, HttpOnly, SameSite. Faster than reading the Cookie header manually.
Request: the request body for POST/PUT requests. Shows form data parsed if application/x-www-form-urlencoded, or raw body for JSON.
Response: the response body with syntax highlighting for JSON/HTML/CSS. You can search within the response. The Raw toggle shows the unformatted bytes.
Timings: breakdown of the request timeline:
- DNS lookup
- Connecting
- TLS handshake
- Sending
- Waiting (TTFB — Time To First Byte)
- Receiving
High TTFB indicates slow server processing. High "Receiving" for small responses indicates network latency. Compare timings across requests to identify bottlenecks.
Security: TLS version, cipher suite, certificate details for HTTPS requests. Shows if HSTS is active.
Editing and Resending Requests
Right-click any request → "Edit and Resend" — opens a form to:
- Change the URL
- Change the method
- Modify headers (add/edit/delete)
- Edit the request body
Press "Send" to replay the modified request. The new request appears in the network log.
This is faster than using curl for quick API exploration — no need to copy the request and figure out all the headers. Especially useful for testing auth tokens, modifying request parameters, or replaying POST requests.
Copy as cURL
Right-click any request → "Copy as cURL" (or "Copy as cURL (POSIX)" or "Copy as cURL (Windows)").
Generates a complete curl command with all headers, cookies, and body — ready to paste in terminal. Works for complex CSRF-protected forms, authenticated API calls, etc.
The POSIX version uses $'...' quoting for special characters. The Windows version uses CMD-compatible quoting.
HAR Export and Import
The Network panel can export all captured requests as a HAR file (HTTP Archive format):
Click the download icon in the toolbar → save as .har file.
HAR files are JSON and can be:
- Shared with teammates for debugging
- Imported into WebPageTest, GTmetrix, or other tools for analysis
- Opened in
har.techor other online HAR viewers for visual analysis - Compared between environments (baseline vs. regression)
To import: about:blank → open Network panel → drag-and-drop a .har file. The requests populate as if they just happened — you can inspect every detail.
WebSocket Inspection
Click the WS filter button to show WebSocket connections. Click a WebSocket connection to see:
- Messages tab: all frames sent and received, with timestamps
- Frame type: text (JSON usually) or binary
- Frame size
- Direction arrows (↑ sent, ↓ received)
The messages tab is a live view during active connections. You can see WebSocket protocol negotiation in the Headers tab.
Throttling Network Speed
The throttle dropdown at the top of the Network panel:
- No throttling
- Good 3G (750 Kbps)
- Regular 3G (250 Kbps)
- Poor 2G (50 Kbps)
Custom: define your own download speed, upload speed, and latency values.
Throttling helps test: loading states, progressive enhancement under slow connections, timeout handling, offline fallbacks.
Cache Behavior
The disable cache checkbox (☐ Disable Cache) prevents Firefox from using cached responses while DevTools is open. Enable this when:
- Testing that your cache-control headers work correctly
- Debugging issues that only appear on first load
- Verifying that new resource versions are actually served
Shift+F5 (super-reload) bypasses cache for a single page load without permanently disabling caching.
Blocking Specific Requests
Right-click any request → "Block URL" → Firefox blocks that URL in future requests (while DevTools is open).
Use this to:
- Test behavior when an analytics script is blocked (simulating uBlock Origin)
- Test error handling when an API endpoint fails
- Check if a third-party script is causing issues by blocking it
The blocked URL appears in the filter panel on the left. Remove it by clicking the X next to the blocked URL.
Performance Analysis
The waterfall view shows request timing relative to page load. Look for:
- Staggered requests: requests waiting for previous ones (dependency chain)
- Long TTFB: server-side performance issues
- Large uncompressed responses: missing gzip/brotli compression
- Render-blocking resources: scripts or stylesheets that block the initial render
Click "Performance" at the top of the Network panel to switch to a summary view showing request counts and sizes by type.
Top comments (0)