Media
1 item
Description
Chrome DevTools panel for inspecting Next.js SSR fetch calls. 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