Netlify Cache Inspector #

A web app for inspecting and comparing caching behaviour on live Netlify sites.

Submit a URL and the app fetches it with Netlify's debug headers enabled, then displays a structured breakdown of the caching behavior: which cache layers were hit, cache-control directives, TTLs, and more. Run the same URL multiple times and compare results side-by-side with interactive hover-based diffing.

Getting started #

Requires Node.js >= 20 and pnpm (enable via corepack enable).

pnpm install
pnpm run dev

The dev server starts at http://localhost:3000 if port is 3000 is available.

How it works #

1. You enter a Netlify-hosted URL
2. The server fetches it and extracts cache-relevant response headers
3. Headers are parsed into a structured breakdown:
   • Cache status per layer (edge, durable cache, origin frameworks)
   • Cache-control directives with TTL and stale-while-revalidate calculations
   • Served-by detection (CDN edge, durable cache, function, edge function)
   • Warnings for common misconfigurations, such as directive typos or stale-while-revalidate set equal to max-age
4. Results are persisted so runs, and side-by-side reports of several runs, can be shared via permalink. Reports are immutable: adding a run to one you were sent creates a new link.

Deployment #

This site deploys automatically to Netlify.

Tech stack #

• Nuxt 5 (Vue 3, file-based routing, server API routes)
• UnoCSS (utility CSS, dark mode, custom theme)
• Netlify Blobs (run and report persistence)
• Vitest + Vue Test Utils (testing)

Contributing #

You are absolutely welcome to contribute!

See CONTRIBUTING.md for development workflow, testing, and code conventions.

Architecture #

See ARCHITECTURE.md for project structure, data flow, and key design decisions.