API Inspector - XHR & Fetch Debugger

🔬 **A Cleaner API Inspector, Right Inside Chrome DevTools** API Inspector adds a dedicated panel to Chrome DevTools for intercepting, viewing, and analyzing XHR and fetch network requests. Filter by URL, method, or status. Inspect full request and response payloads. Export traffic logs. All in a focused, purpose-built interface — no Network tab clutter. If you work with APIs, you need API Inspector. ━━━━━━━━━━━━━━━━━━━━━━ ✨ **KEY FEATURES** 📡 **Real-Time Request Interception** • Captures every XHR and fetch() call made by the page • Updates in real time as requests fire • Displays request method, URL, status code, and timing • Colour-coded by HTTP method (GET, POST, PUT, DELETE, PATCH) • Status indicators: 2xx green, 3xx blue, 4xx orange, 5xx red 🔍 **Request Detail View** • Full URL with query parameters parsed and formatted • Request headers — every header, readable and searchable • Request body — JSON, FormData, and plain text, pretty-printed • Response headers — full header set • Response body — JSON auto-formatted, syntax-highlighted • Response timing: DNS, connect, TTFB, total 🎯 **Powerful Filtering** • Filter by URL pattern (substring or regex) • Filter by HTTP method (GET, POST, PUT, DELETE, etc.) • Filter by status code or status range (4xx, 5xx) • Filter by response content type (application/json, etc.) • Clear filters instantly to return to full traffic view • Save filter presets for frequently used views 💾 **Export & Sharing** • Export selected requests as HAR (HTTP Archive) format • Export as JSON for custom processing • Copy individual request/response to clipboard • Export filtered view only — not the entire traffic log • One-click copy of any URL, header, or body value 🔎 **Search Across Traffic** • Full-text search across URLs, headers, and response bodies • Find the request that contains a specific value or key • Highlight matching terms in results • Search history for quick re-runs ━━━━━━━━━━━━━━━━━━━━━━ 🚀 **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** in the DevTools panel 3. **Reload the page** or interact with the app to trigger requests 4. **Watch requests appear** in real time with full details 5. **Click any request** to inspect headers and body 6. **Filter, search, and export** as needed ━━━━━━━━━━━━━━━━━━━━━━ 💡 **USE CASES** **For Frontend Developers:** • Debug API calls without hunting through the Network tab • Verify request payloads are being sent correctly • Check authentication headers are present on every request • Inspect paginated API calls and compare responses • Understand what a third-party script is sending in the background **For Backend Developers Debugging APIs:** • See exactly what the frontend is sending before it hits your server • Verify JSON request bodies are structured correctly • Debug CORS issues by inspecting preflight OPTIONS requests • Compare expected vs. actual request format during integration work **For QA Engineers:** • Capture API traffic during manual test runs • Verify correct API calls fire when UI actions occur • Export HAR files for bug reports and test documentation • Check error responses return the correct status codes and bodies **For Developers Learning How Sites Work:** • Inspect what APIs power a web app • Learn real-world API patterns from production applications • Understand authentication flows (tokens, cookies, OAuth) • See how modern SPAs fetch and update data ━━━━━━━━━━━━━━━━━━━━━━ 🛠️ **COMPARED TO THE NETWORK TAB** The Chrome DevTools Network tab is powerful but general-purpose. API Inspector focuses exclusively on XHR and fetch: | Feature | Network Tab | API Inspector | |---|---|---| | XHR/fetch focus | Mixed with all resources | Dedicated view | | JSON pretty-print | Manual | Automatic | | Filter presets | No | Yes | | Regex URL filtering | No | Yes | | Body search | No | Yes | | Export (HAR/JSON) | HAR only | HAR + JSON | ━━━━━━━━━━━━━━━━━━━━━━ 🏆 **WHY CHOOSE API INSPECTOR?** ✅ **DevTools Native** - Integrated panel, not a floating popup ✅ **API-Focused** - Built for XHR/fetch, not general network traffic ✅ **JSON Auto-Format** - Every JSON body pretty-printed automatically ✅ **Regex Filtering** - Power-user filtering without extra tools ✅ **Body Search** - Find any value across all captured requests ✅ **HAR Export** - Industry-standard format for sharing and analysis ✅ **No Page Modification** - Passive capture only, never alters requests ✅ **Works on Any Site** - SPAs, server-rendered, or hybrid apps ━━━━━━━━━━━━━━━━━━━━━━ 🔬 **TECHNICAL NOTES** API Inspector uses Chrome's `devtools_page` API to integrate directly into DevTools. It intercepts network events through the DevTools protocol, which provides access to full request and response data including bodies — something the standard `webRequest` API alone cannot do. This approach means API Inspector is a DevTools extension and opens only inside DevTools, not as a browser action popup. ━━━━━━━━━━━━━━━━━━━━━━ ⭐ **WHAT USERS SAY** *"The Network tab is great for everything. API Inspector is perfect for APIs. I switch between them constantly."* - Tom A., Frontend Developer *"Being able to search response bodies is something DevTools can't do natively. This alone makes it worth installing."* - Keiko M., Full Stack Developer *"I use this for QA. Export the HAR, attach to the bug ticket, done. Saves so much time reproducing issues."* - Ben S., QA Engineer ━━━━━━━━━━━━━━━━━━━━━━ 🔐 **PRIVACY & SECURITY** • ✅ **No Data Collection** — Captured request/response data stays in your browser session • ✅ **DevTools Only** — The panel is only accessible when DevTools is open • ✅ **No External Calls** — API Inspector does not transmit captured traffic anywhere • ✅ **Session-Scoped** — Captured traffic is cleared when DevTools is closed • ✅ **Developer-First** — Built for people who understand what they're…