Nuxt SSR DevTools

About

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