Media
1 item
Description
Debug Next.js server-side API calls in Chrome DevTools 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