Chrome DevTools Extension — Free

Click any element.
See its API calls.

API Inspector Pro maps your UI interactions to the exact network requests they trigger — automatically, in real time. No more manually scanning a noisy Network tab.

↓ Add to Chrome — Free See what's different
✓ Chrome
✓ Edge
✓ Brave
✗ Firefox
✗ Safari
No account · No data collected
DevTools — API Inspector Pro
Interaction Map4
↗
button "Submit"
11:04:30
3
○
a.nav "Dashboard"
11:03:10
1
○
input.search
11:02:55
2
○
button "Save Draft"
11:01:40
0
methodstpathtypetime
button "Submit" — 3 requests captured
POST
201
/api/orders/create
xhr
142ms
GET
200
/api/cart/validate
xhr
88ms
GET
200
/api/user/session
xhr
67ms
GET
200
/api/analytics tracker
fetch
238ms
GET
200
/api/projects ⚡ slow
xhr
1340ms
POST
201
/api/orders/create ⊕ dup
xhr
90ms
POSThttps://api.example.com/api/orders/create
201 Created xhr 1.2KB 142ms mapped
Headers
Request
Response
Timing
cURL
"orderId": "ord_1234",
"status": "confirmed",
"total": 59.98,
"currency": "USD",
"items": [{
  "sku": "WGT-PRO",
  "qty": 2,
  "price": 29.99
}],
"createdAt": "2026-05-10"
vs Chrome Network Tab

Everything the Network tab can't do

The built-in Network tab shows you everything. API Inspector Pro shows you only what matters.

Feature API Inspector Pro Chrome Network Tab
Click any element → see only its API calls ✓ ✗
Interaction Map — persistent element → endpoint mapping ✓ ✗
Hide noise — 30+ trackers hidden with one click ✓ ✗
Slow request auto-detection with visual warnings ✓ Sort only
Duplicate endpoint detection with badge ✓ ✗
Session persists across page reloads (30 min) ✓ ✗ Clears on reload
Regex URL search (/api\/users\/\d+/) ✓ Buried in search panel
Hover row → instant copy URL / cURL ✓ ✗ 4 clicks
Export to Postman Collection ✓ ✗
Export to Markdown API documentation ✓ ✗
Tag requests with UI action notes ✓ ✗
Keyboard shortcuts (⌘K, ⌘F, ⌘P, Esc) ✓ ✗
Real-time request capture ✓ ✓
Full headers, request body, response body ✓ ✓
Timing breakdown ✓ ✓ (+ waterfall)
WebSocket inspection ✗ ✓
Features

Built for developers who need answers, not noise

Every feature exists because the built-in Network tab made something harder than it needed to be.

⊕
Click-to-Capture
Hit the capture button, click any element on the page — button, link, form, dropdown. A 5-second window captures every request that fires and groups it under that element automatically. Background polling and analytics are excluded using snapshot diffing — only requests that didn't exist before your click get grouped.
The main event
button#submit "Submit Order" → 3 requests
  POST /api/orders/create · 201 · 142ms
  GET  /api/cart/validate · 200 · 88ms
  GET  /api/user/session · 200 · 67ms
◎
Interaction Map
A persistent left panel builds as you explore — every element you've clicked and every endpoint it calls. Survives page reloads. Click any item to filter the list to only that interaction's requests.
Persists 30 min
⊘
Hide Noise
One click hides 30+ known tracker domains — Google Analytics, Pendo, Segment, Hotjar, Mixpanel, Amplitude, FullStory, Intercom, Heap, Clarity, Datadog, Sentry, and more. See only your app's own API calls.
30+ domains blocked
⚡
Slow Request Detection
Requests over 1 second get an amber ⚡ badge and left border. Over 3 seconds gets a 🐢 badge. The Timing tab explains which part of the request is slow and what to do about it.
Auto-flagged
⊕
Duplicate Detection
When the same endpoint fires more than once in a session, a purple ⊕ dup badge appears on the row and a warning shows in the detail panel. Great for catching double-fetches and render loop bugs.
Catches render loops
↗
Export to Postman
Your entire session — with interaction groups, tags, and headers — becomes a ready-to-import Postman collection. Also exports as Markdown documentation, HAR file, or raw JSON.
4 export formats
{ }
Full Detail Panel
Click any request to see headers grouped like DevTools (General, Request, Response), query parameters with decoded/source toggle, syntax-highlighted JSON response body, visual timing bars, and a one-click cURL command.
Matches DevTools layout
🔒
Private by design
Zero data collection. Everything stays in your browser. No external servers, no analytics, no accounts required. Authorization and Cookie headers are never written to disk. Request and response bodies are kept in memory only. Session data auto-expires after 30 minutes.
No servers No analytics No accounts Auth headers never stored
How it works

From button click to endpoint map

1
Open API Inspector in DevTools
Press F12, click the API Inspector tab. It sits alongside Elements, Console, and Network. You'll see requests start appearing immediately as you use the page.
2
Activate Click-to-Capture
Click ⊕ Click-to-Capture. Your cursor becomes a crosshair. The button pulses orange. You're now in capture mode.
3
Click any element on the page
Hover over any button, link, or form. An orange highlight shows its CSS selector. Click it — a snapshot is taken and a 5-second capture window opens.
4
API calls are automatically grouped
Every request that fires after your click — and didn't exist before it — gets grouped under that element in the Interaction Map. Background polling is excluded automatically.
5
Inspect, tag, and export
Click any request for full details. Tag it with what it does. Repeat for every element in your app. Export everything to Postman or Markdown when done.
Preview
API Inspector Pro · DevTools
⊕ Click-to-Capture ↗ Export
POST /api/orders/create · 201 · 142ms
GET  /api/cart/validate · 200 · 88ms
GET  /api/user/session · 200 · 67ms
GET  /api/analytics · 200 · 238ms
GET  /pendo.io/ptm.gif · 200 · 452ms
⊕
Capture mode active
Cursor is now a crosshair.
Hover any element to see its selector.
● CAPTURING
Orange highlight on hovered element:
button#submit "Submit Order"

Submit Order
Requests grouped under your click:
● button#submit "Submit Order" → 3 requests
POST /api/orders/create · 201
GET  /api/cart/validate · 200
GET  /api/user/session · 200
Background requests (analytics, polling) excluded automatically ✓
Tag → Export → Done
tag
"submit new order form"
↗ Postman ↗ Markdown ↗ HAR ↗ JSON
Installation

Up in 30 seconds

Two ways to install. Web Store is one click. Manual install if you want to run from source.

Chrome Web Store recommended
One click, auto-updates, always the latest version.
  1. Visit the Chrome Web Store listing
  2. Click Add to Chrome
  3. Confirm the permissions popup
  4. Open any page → press F12
  5. Click the API Inspector tab in DevTools
Manual Install developer
Download the ZIP, load it as an unpacked extension.
  1. Download api-inspector-pro.zip and unzip it
  2. Go to chrome://extensions
  3. Enable Developer mode (top-right toggle)
  4. Click Load unpacked
  5. Select the unzipped folder
  6. Open DevTools → API Inspector tab
💡 Important: After installing, always refresh the tab you're testing on before using Click-to-Capture. The content script needs to reinject into the page.
Keyboard Shortcuts

Work without the mouse



⌘K
Clear all captured requests
⌘F
Focus the search bar
⌘P
Pause / resume capture
Esc
Close detail panel or clear search

Use Ctrl instead of ⌘ on Windows / Linux

Browser Compatibility

Works on all Chromium browsers



🌐
Chrome
✓ Full
🔷
Edge
✓ Full
Chromium
🦁
Brave
✓ Full
Chromium
🎭
Opera
✓ Full
Chromium
🦊
Firefox
✗ No
Different API
🧭
Safari
✗ No
Different system