API Diff Inspector

Compare API responses across environments — intercept, replay, and visually diff. Schema drift detection. Chrome + Firefox DevTools panel.

The Problem

You change a backend endpoint. Does it still match staging? Production? Currently you'd copy the URL into Postman, change the base URL, send, then manually eyeball the JSON. For each environment. For each endpoint.

Features

• Auto-intercepts JSON API calls on the current page (DevTools Network API)
• Environment profiles — Define local/staging/production base URLs + auth headers
• One-click replay — Replay any captured request against all environments simultaneously
• Visual JSON diff — Color-coded: added (green), removed (red), changed (yellow)
• Schema drift detection — Alerts when structure differs between environments
• Response time comparison — See which environment is slowest
• Cross-browser — Chrome + Firefox DevTools panel

Quick Start

git clone https://github.com/rishapgandhi/api-diff-inspector
cd api-diff-inspector
npm install --legacy-peer-deps
npm run dev

Then open Chrome DevTools → "API Diff" tab.

How It Works

1. Open DevTools → click "API Diff" panel
2. Browse your app — all JSON API calls are captured automatically
3. Click any request → it replays against all configured environments
4. See a visual diff of the JSON responses

Tech Stack

Layer	Technology
Framework	WXT
UI	React 18 + TypeScript
Styling	Tailwind CSS
Diff Engine	Custom deep JSON diff
Testing	Vitest (11 tests)

Contributing

See CONTRIBUTING.md.

License

MIT © Rishap Gandhi