Loading...

tools / fetch-logger

Fetch Logger

Mini DevTools for fetch debugging inside the browser.

A live, in-page browser fetch debugger and in-page network inspector that records every fetch request and response — no DevTools required. A drop-in React fetch logger that also works with Vue, Svelte, plain JavaScript, and inside mobile webviews. Powered by the open-source @jasimvk/fetchlogger package.

View GitHub
  • Records every fetch request & response in real time — a DevTools alternative for fetch
  • Network + Console tabs: status, timing, payloads, and console output in one panel
  • Works in React, Vue, Svelte, or plain JavaScript
  • Local-first — nothing leaves the browser; secrets are auto-redacted

Try it live

Start the panel, fire a few requests, then open the floating panel (bottom-right) to inspect them.

Sample requests · start the panel first

Built for mobile & QA debugging

Fetch Logger is most useful when DevTools are hard to access:

  • Mobile browsers
  • WebViews & embedded browsers
  • Staging links
  • QA builds
  • Client demos
  • Tester bug reports

Testers hit Copy Debug Report and paste a complete, redacted summary into a ticket — so developers get reproducible context without “what did the network tab say?”.

Use it in your own project

Drop the frontend API debugging tool into any app in one line.

1 · Install

npm i -D @jasimvk/fetchlogger

2 · React (Next, Vite, CRA)

import FetchLogger from "@jasimvk/fetchlogger/react";

export default function App() {
  return (
    <>
      <FetchLogger />
      {/* ...your app... */}
    </>
  );
}

Or — any framework / plain JS

import { mountFetchLoggerPanel } from "@jasimvk/fetchlogger";

const unmount = mountFetchLoggerPanel({ position: "bottom-center" });
// later: unmount();
View on npm GitHub

DebugTools product

Fetch Logger

Fetch Logger is a focused DebugTools mini-product for developers. Live in-page panel that records every fetch request and response — try it live, then drop it into your own app.

Use cases

  • Watch fetch requests and responses live while building a React, Vue, Svelte, or plain-JS app.
  • Debug API calls inside mobile webviews and embedded browsers where opening DevTools is hard.
  • Capture method, URL, status, timing, and payloads to paste into a bug report or QA ticket.

How it works

  • Install the package or start the live demo panel on this page.
  • Fetch Logger patches window.fetch in the browser — no DevTools required.
  • Every request is captured locally with method, URL, status, timing, and a payload preview.
  • Open the floating panel to inspect network requests and console logs side by side.
  • Copy request/response details when you need to share a bug report.

Privacy

  • Fetch Logger is local-first. The core workflow runs in your browser and does not require sending pasted content to DebugTools servers.

This tool history

Recent Fetch Logger sessions

Only visits for this tool are shown. Pasted content, tokens, request bodies, and logs are not stored here.

Loading this tool history...