I built a Firefox sidebar extension called NetLens for the moments when I want to see what API calls a page is making.
The main idea is simple: it starts recording at document_start, so requests fired during page load are already there when you open the sidebar. The Network tab only records while DevTools is open, so you'd have to reload and hope the problem repeats.
What it does:
- Shows fetch/XHR calls with headers, payloads and responses. Search by URL, headers or body, as plain text or /regex/
- Also captures WebSocket and EventSource traffic
- Copy any request as curl or fetch(), or replay it with the page's real session and diff the response
- Click an element on the page to see which API response its data came from
- Decodes Base64, JWT and similar values inline
How it works: it doesn't use any debugger or devtools APIs. It wraps the page's own fetch, XHR and WebSocket, so it doesn't depend on browser internals. Nothing is sent anywhere, and the manifest declares no data collection.
Memory: each tab keeps at most 200 requests or 64 MB. Bodies are cut off at 200 KB by default, and binary and streaming responses are skipped.
Firefox notes:
- Needs Firefox 128+
- It's a sidebar (View > Sidebar, or the toolbar button)
- It can't capture on about: pages or addons.mozilla.org, or see requests from service workers and other extensions
- On-page toast alerts work, but clicking one can't open the sidebar for you, because Firefox doesn't allow that
Link: https://addons.mozilla.org/en-US/firefox/addon/netlens-api-inspector/
Source: https://github.com/Armstain/NetLens
It's not trying to replace DevTools. If F12 already does what you need, it's the right tool. Feedback welcome, especially on which parts are useful and which feel unnecessary.