Firefox includes powerful network inspection tools in DevTools. Here's how to use them effectively for debugging API calls, analyzing performance, and understanding what your web apps are actually sending.
Opening Network Panel
Keyboard: F12 → Network tab (or Ctrl+Shift+E directly to Network)
The panel shows all network requests from the moment it's opened. Reload the page to capture requests from page load.
Tip: Check "Persist Logs" to keep requests across navigation. Useful when debugging form submissions that redirect to new pages.
Request Overview
Each row shows:
- Status: HTTP status code (200, 404, 302, etc.) — color-coded
- Method: GET, POST, PUT, DELETE, etc.
- Domain/File: The URL being requested
- Initiator: What triggered the request (which script/HTML element)
- Type: Document, Script, XHR, Fetch, Image, CSS, etc.
- Transferred: Compressed size received over network
- Size: Uncompressed size
- Time: How long the request took
- Waterfall: Timeline visualization
Filtering Requests
By type (toolbar buttons): All, HTML, CSS, JS, XHR/Fetch, Fonts, Images, Media, WebSocket, Other
By URL search: Type in the filter box to show only matching URLs
By status: Filter box supports status:404, domain:api.example.com
Block specific requests:
Right-click a request → Block URL Pattern
Use patterns like *.analytics.com to block analytics calls and test how the app behaves without them.
Inspecting a Request
Click any request to open the detail pane:
Headers tab
- Request headers: everything your browser sent (including cookies, content-type, authorization)
- Response headers: cache-control, cors headers, content-type
Editing request headers: Firefox Network panel doesn't let you edit and resend directly. Use the Resend option or the "Edit and Resend" feature.
Request tab
Shows the request body for POST/PUT requests:
- Form data parsed into key-value pairs
- JSON body with syntax highlighting
- Raw view
Response tab
Shows the response body:
- JSON: pretty-printed with syntax highlighting and collapsible nodes
- HTML: raw source
- Images: rendered preview
- Binary: hex view available
Timings tab
Breakdown of where time was spent:
- Blocked: Time waiting for network slot
- DNS: DNS resolution time
- Connect: TCP connection establishment
- TLS: TLS handshake time
- Sending: Time to send request
- Waiting (TTFB): Time to first byte (server processing time)
- Receiving: Time to download response
Performance diagnosis: Large TTFB = slow server. Large Receiving = large file. Large TLS = SSL negotiation overhead (first connection to this server).
Security tab
Shows:
- TLS version
- Cipher suite
- Certificate chain
- Key exchange algorithm
XHR/Fetch Requests (API Calls)
Click "XHR" filter button to show only API calls.
For REST API debugging:
- Filter to XHR/Fetch
- Make the action in your app
- Find the relevant request
- Check Request tab (what was sent), Response tab (what came back)
Copying requests:
Right-click → Copy → Copy as cURL
Pastes a full curl command that reproduces the exact request. Useful for:
- Testing from terminal
- Sharing the exact request with a coworker
- Testing with modified headers
Right-click → Copy → Copy as Fetch
Produces fetch() JavaScript code equivalent.
HTTP/2 and HTTP/3
Firefox shows the protocol version in request details.
Enable HTTP/3 visibility: In the request list, right-click column headers → Add "Version" column. Shows HTTP/1.1, HTTP/2, HTTP/3.
HTTP/3 debugging: Firefox supports HTTP/3 over QUIC. If a server sends Alt-Svc: h3=":443", Firefox will upgrade to HTTP/3 on subsequent requests. The Version column shows this.
Force HTTP/2: In about:config, set network.http.http3.enabled = false to disable HTTP/3 and see if connection falls back.
WebSocket Inspection
Click the "WS" filter button to see WebSocket connections.
Click a WebSocket request to see:
- Messages tab: Each message sent and received, with timestamp
- Raw text or binary data
- Direction indicator (arrow up = sent, arrow down = received)
Useful for: Real-time app debugging, socket.io debugging, server-sent events.
Throttling (Network Speed Simulation)
In the toolbar, find the throttling dropdown (usually says "No Throttling").
Options:
- GPRS: 50 Kbps — very slow mobile
- Regular 2G: 250 Kbps
- Good 2G: 450 Kbps
- Regular 3G: 750 Kbps
- Good 3G: 1.5 Mbps
- Regular 4G: 4 Mbps
- DSL: 2 Mbps
- WiFi: 30 Mbps
Custom throttle: Create custom profiles with specific download/upload/latency.
Use throttling to:
- Test loading experience on slow connections
- Identify assets that are too large for mobile
- Test that loading states appear correctly
- Verify lazy loading works as expected
HAR Export and Import
Export as HAR (HTTP Archive):
Right-click any request → Save All As HAR
Or: Network panel toolbar → gear icon → Save All As HAR
HAR is a JSON format capturing all requests, headers, bodies, and timings.
Import HAR: Drag a .har file into the Network panel to replay a captured session.
Use cases:
- Share a network trace with a teammate without them needing to reproduce the issue
- Document API interactions
- Performance analysis in external tools (Google's HAR Analyzer)
Blocking Requests for Testing
Right-click any request → Block URL Pattern
This adds a block rule for the URL pattern. Blocked requests show as "NS_ERROR_FAILURE".
Testing without third-party scripts:
- Block
*.google-analytics.com→ test app behavior without GA - Block your CDN → test fallback behavior
- Block specific API endpoints → test error states
Remove blocks: Network toolbar → gear icon → Manage Blocked URLs.
Performance Analysis from Network Panel
Total load time: Summary bar at the bottom shows total requests, transferred size, total size, finish time, DOMContentLoaded, and load event times.
Request waterfall: The timing bars in the rightmost column show relative timing. Look for:
- Long chains of sequential requests (blocking)
- Requests that could be parallelized
- Very large individual files
- Redirects (often show as 301/302 followed by the final request)
Content breakdown: Right-click column area, add "Type" column — then sort by type to see how much CSS, JS, images each contribute.
Comparing DevTools: Firefox vs Chrome
The Network panels are functionally similar. Firefox-specific advantages:
- Request blocking: More visible in Firefox (right-click menu) vs Chrome
- Edit and Resend: Firefox has this natively; Chrome needs an extension
- Security tab: More detailed TLS info in Firefox's version
- HAR: Both support export
Chrome-only features: Performance Insights tab, custom request blocking UI in the Network panel sidebar.
For most debugging tasks, they're interchangeable. Firefox's Network panel is a complete tool.
Top comments (0)