Next.js Server Inspector

About

See your Next.js server-side HTTP and fetch calls live in Chrome DevTools.

  Server Components, route handlers, and middleware make requests that never show up in the browser's Network tab. This
  extension adds a "Server Inspector" panel that shows them in real time — method, URL, status, duration, headers, and
  request/response bodies.

  USAGE
  1. Install the package in your Next.js project:
     npm i nextjs-server-inspector
  2. Add server setup — create instrumentation.ts in your project root (or src/ if you use a src directory):

     export async function register() {
       if (process.env.NEXT_RUNTIME === "nodejs") {
         const { init } = await import("nextjs-server-inspector")
         init({ port: 9119 })
       }
     }

  3. Start your dev server (npm run dev), open Chrome DevTools, and select the "Server Inspector" panel.

  Development only. The connection is strictly local (ws://localhost:9119) — nothing is sent to any external server.

  npm:    https://www.npmjs.com/package/nextjs-server-inspector
  GitHub: https://github.com/ZainULAbdeen0/Patchy