API Inspector - XHR & Fetch Debugger

Intercept & inspect XHR/fetch calls — headers, payloads, timing, CORS & auth errors. Essential for dev & QA. By Cloud Geeks.

🔬 **A Focused XHR/Fetch Inspector Inside Chrome DevTools** API Inspector adds a dedicated panel to Chrome DevTools for capturing, inspecting, and exporting the XHR and fetch requests a page makes — without the noise of the full Network tab. Filter by URL or method, read request and response bodies, and export what you captured as HAR, JSON, or a ready-to-run cURL command. And unlike the native tools, API Inspector redacts your secrets before you share. ━━━━━━━━━━━━━━━━━━━━━━ ✨ **KEY FEATURES** 📡 **Real-Time Request Capture** • Captures every XHR and fetch() call the inspected page makes • Updates live as requests fire • Shows method, URL, status code, and request duration • Colour-coded by HTTP method (GET, POST, PUT, PATCH, DELETE) • Status indicators: success (2xx/3xx) vs error (4xx/5xx) 🔍 **Request & Response Detail** • Request tab: full URL, method, timestamp, and request body • Response tab: status, duration, and response body — JSON auto pretty-printed • Headers tab: full request and response header sets 🎯 **Filtering** • Filter by URL (substring match) • Filter by HTTP method • Clear filters to return to the full capture 💾 **Export & Safe Sharing** — the reason to install • Export the shown requests as **HAR 1.2** (the industry-standard format) • Export as **JSON** for custom processing • **Copy any request as a runnable cURL command** • **Secret redaction, on by default** — Authorization, Cookie, Set-Cookie, API keys and other sensitive headers are replaced with [REDACTED] in every HAR, JSON, and cURL output • Exports respect your active filters — you export only what you filtered to ━━━━━━━━━━━━━━━━━━━━━━ 🔐 **WHY THE REDACTION MATTERS** Chrome DevTools can copy a request as cURL and export HAR too — but it embeds your cookies, Authorization headers, and tokens in plaintext. Paste that into a bug ticket, a pull request, or a Slack thread and you've just leaked a live credential. API Inspector redacts those secrets by default, so the HAR you attach and the cURL you paste are safe to share. The redaction set is a sensible default for common auth headers; the capture itself is never altered. ━━━━━━━━━━━━━━━━━━━━━━ 🚀 **HOW IT WORKS** API Inspector lives inside Chrome DevTools — not in a popup or sidebar. 1. **Open Chrome DevTools** (F12 or right-click → Inspect) 2. **Click the "API Inspector" tab** 3. **Reload or interact with the app** to trigger requests 4. **Watch requests appear** in real time 5. **Click any request** to inspect headers and body 6. **Filter, then export** as HAR/JSON or copy as cURL — with secrets redacted ━━━━━━━━━━━━━━━━━━━━━━ 💡 **USE CASES** **Frontend developers** — verify request payloads and auth headers are correct; see what a third-party script sends in the background. **Backend developers** — confirm exactly what the frontend sends before it reaches your server; compare expected vs. actual request shape during integration. **QA engineers** — capture API traffic during a test run and attach a **redacted HAR** to the bug ticket, with no credentials to scrub by hand. **Support & security** — hand a customer a cURL that reproduces a call, or a HAR of a failing flow, without exposing their session token. ━━━━━━━━━━━━━━━━━━━━━━ 🛠️ **COMPARED TO THE NETWORK TAB** | Feature | Native DevTools | API Inspector | |---|---|---| | XHR/fetch-only view | Mixed with all resources | Dedicated | | JSON body pretty-print | Manual | Automatic | | HAR export | Yes (sanitised since Chrome 130) | Yes (HAR 1.2) | | JSON export | No | Yes | | Copy as cURL | Yes — **secrets in plaintext** | Yes — **secrets auto-redacted** | ━━━━━━━━━━━━━━━━━━━━━━ 🔐 **PRIVACY & SECURITY** • ✅ **Nothing leaves your browser** — captured traffic is never transmitted to any server • ✅ **Local-only logs** — the extension keeps small usage and error logs in chrome.storage.local to improve reliability; these stay on your device and are never sent anywhere • ✅ **DevTools only** — the panel is accessible only while DevTools is open • ✅ **Session-scoped capture** — captured traffic clears when you clear it or close DevTools • ✅ **Passive** — API Inspector reads traffic; it never modifies the requests the page makes ━━━━━━━━━━━━━━━━━━━━━━ 🆘 **SUPPORT** • 📧 Email: support@cchk.info • 🌐 Website: https://extensions.cchk.info/api-inspector • 🔒 Privacy Policy: https://extensions.cchk.info/api-inspector/privacy ━━━━━━━━━━━━━━━━━━━━━━ 🏢 **Built by Cloud Geeks** — a division of **Ganda Tech Services** IT Support & Cloud Solutions for Sydney businesses and beyond. 🌐 Visit us: https://cloudgeeks.com.au | https://g-t-s.com.au