Next.js SSR DevTools

About

Inspect Next.js App Router server-side fetch() calls in Chrome DevTools.

  ▍ THE PROBLEM
  In Next.js App Router, fetch() calls inside Server Components run on the Node.js server. The browser only receives the rendered HTML, so none of these
  fetches appear in the regular Network tab. You can't see URLs, headers, status codes, durations, or response bodies of your SSR data layer.

  ▍ WHAT THIS DOES
  This extension adds an "SSR Fetches" panel to Chrome DevTools that lists every SSR fetch the server captured during page render. Click any row to inspect
   General info, Headers (request + response), Request body, and Response body — like the Network tab, but for SSR.

  ▍ FEATURES
  • URL, HTTP method, status code, duration, response size at a glance
  • Color-coded methods (GET / POST / PUT / DELETE / PATCH) and status codes (2xx / 3xx / 4xx / 5xx)
  • Inspect request and response headers — sensitive ones (Authorization, Cookie, Set-Cookie, X-API-Key) auto-redacted
  • Pretty-printed JSON response bodies (truncated at 100 KB by default; configurable)
  • Refresh button to capture new fetches from server actions, mutations, route handlers, revalidations
  • Auto-refresh on full page navigation
  • Light / dark mode (follows system preference)

  ▍ SETUP
  This extension is the viewer. Your Next.js project needs the companion server package:

    npm install @leesuyeon/ssr-devtools

  Add three lines of wiring (instrumentation.ts, app/layout.tsx, app/api/ssr-devtools/route.ts). Full guide:
  https://www.npmjs.com/package/@leesuyeon/ssr-devtools

  Requirements: Next.js 14+ App Router. (Next 14.x: enable experimental.instrumentationHook in next.config; stable in 15.0+.)

  ▍ FOR WHOM
  • Frontend developers debugging SSR data fetching
  • QA / product managers verifying staging server-side data without reading terminal logs
  • Anyone tired of console.log-debugging Next.js Server Components

  ▍ PRIVACY
  This extension does not collect, store, or transmit any user data. It only reads SSR fetch metadata from the page you are inspecting — data your own
  server captured — and renders it locally in the DevTools panel. No analytics, no telemetry, no external requests, no remote code execution. No
  permissions beyond the standard chrome.devtools API.

  ▍ OPEN SOURCE
  MIT licensed. Source, issues, contributions:
  https://github.com/leeyounagh/ssr-devtools