Fetch Inspector

See every HTTP call your server makes — request, response, and a cURL you can actually run.

Your browser's network tab shows you what the browser sends. It cannot show the calls your server makes: the payment API, the LLM provider, the internal service, the webhook. Those usually get debugged with console.log(JSON.stringify(body)) and a lot of scrolling.

Fetch Inspector records them and puts them in a panel next to your code.

Nothing goes in your project

No package to install. No code to add. No config file.

Type your dev command into the panel — npm run dev — and press ▶ Run. The extension starts it in a normal terminal with a recorder attached to the Node process, and calls start appearing.

That's the whole setup. Your repository is untouched, so there is nothing to remember to remove before you commit.

What you get

Everything is themed with VS Code's own colour variables, so it matches whatever theme you run, including high contrast.

Requirements

• VS Code 1.90+
• A Node.js 18+ project started from a terminal command

Works with Next.js, Express, NestJS, Hono, Fastify, plain Node — anything whose HTTP calls go through fetch, which includes most modern SDKs.

Settings

What gets recorded, and where

Only while recording is on, and only calls your server makes through fetch. For each one: method and URL, request and response headers, both bodies in full, status, and duration.

Bodies are never clipped unless you ask for it. A truncated payload is the one thing you can't work around after the fact — the interesting field is always the one that got cut — so a 20 MB response is recorded as 20 MB. The panel keeps up by showing the first 20 000 characters with a show all button; copy and open in editor hand you the whole thing regardless, and for anything large the editor is the better place to read it: folding, search, select-all. Set fetchInspector.maxBodyChars if you'd rather trade fidelity for disk.

Recordings go to .fetch-inspector/requests.ndjson in your project — a plain text file you can read, grep, or delete. Add .fetch-inspector/ to your .gitignore. Nothing is uploaded anywhere; this extension makes no network requests of its own.

Masked by default: authorization and proxy-authorization headers, cookies, x-api-key and friends, and any body field whose name looks like password, token, secret, otp, apiKey, or client_secret. Better still, a header whose value is a known environment secret is recorded as a shell reference — $STRIPE_SECRET_KEY — so the copied cURL runs without the secret ever reaching the file.

Starting your app yourself

If you'd rather run the server your own way — an existing terminal, a compose file, a debugger — install the recorder and preload it:

npm install --save-dev fetch-inspector

NODE_OPTIONS='--require fetch-inspector/preload' npm run dev

Or call it from code, if you prefer an explicit hook:

// instrumentation.ts (Next.js), or anywhere that runs once at startup
import { install } from "fetch-inspector";
install();

Either way the panel picks it up — the Record button still controls capture. See the fetch-inspector package for the full API.

Troubleshooting

Nothing appears after pressing Run. Check the Fetch Inspector terminal: if your command failed to start, the app never ran. Also confirm the panel shows Recording rather than paused.

I see my own /api/... requests in the terminal but not in the panel. That's by design — inbound requests to your own routes are what the browser network tab already shows. The panel is for the traffic your server sends onward.

A call is missing. Libraries using http.request directly — including axios on its default Node adapter — bypass fetch and aren't captured.

Monorepo. Point fetchInspector.directory at the app that runs the server, e.g. apps/api/.fetch-inspector, and set fetchInspector.command to the script that starts it.

A body says it's only showing the first 20 000 characters. That's the panel, not the recording. Press show all, or open in editor for the full text in a tab you can search and fold. Set fetchInspector.previewChars to 0 to always render everything inline.

The filter isn't matching text I can see in a body. Filtering indexes the first 20 000 characters of each body to stay responsive across hundreds of calls. Open the call to search it in full.

License

MIT © Girish Arora