Nuxt SSR DevTools

Chrome DevTools panel for inspecting Nuxt SSR fetch calls.

Inspect Nuxt SSR fetch() calls in Chrome DevTools — see URLs, headers, status, duration, and response bodies. (110 chars) Detailed Description Nuxt SSR DevTools — see SSR fetches in Chrome DevTools In Nuxt 3, useFetch / $fetch / raw fetch() calls inside server-rendered pages execute on the Node.js server during SSR. The browser only receives the rendered HTML, so none of those fetches show up in the standard Network tab. You can't see URLs, headers, status codes, durations, or response bodies — and console.log only goes to the terminal. This extension adds a "Nuxt SSR Fetches" panel to Chrome DevTools that displays every server-side fetch in a Network-tab-like UI: — Method (GET, POST, PUT, DELETE, PATCH) with color coding — Status code and timing — Full URL — Request headers (sensitive headers redacted by default) — Response headers — Request body (POST/PUT/PATCH payloads) — Response body (truncated for large responses, configurable) — Errors and timeouts It captures both: 1. Server-side fetches during SSR (initial page render) 2. Client-side fetches on route navigation (NuxtLink clicks) — patches window.fetch in the browser too, so you don't need a hard refresh to see new captures == Setup == Install the companion npm package in your Nuxt project: npm install nuxt-ssr-devtools Then add it to nuxt.config.ts: export default defineNuxtConfig({ modules: ['nuxt-ssr-devtools'], }) Install this extension, open any Nuxt page in dev/staging, then open DevTools (F12) → "Nuxt SSR Fetches" tab. == Requirements == — Nuxt 3.10 or later (with Nitro 2.x) — The npm companion package: nuxt-ssr-devtools (https://www.npmjs.com/package/nuxt-ssr-devtools) Without the npm package installed, the extension has no data to read. Without the extension installed, the npm package collects data but has no UI to render it. Both pieces are required. == Privacy == — No host_permissions — No remote servers, no analytics, no telemetry — All captured data stays in your local dev environment's memory — The extension reads only what your own app exposes via the marker <script> tag and the /api/ssr-devtools route in your Nuxt app — Sensitive headers (authorization, cookie, set-cookie, x-api-key) are redacted by default before any data leaves the server == Source == https://github.com/leeyounagh/nuxt-fetch-inspector == License == MIT