Media
5 items
Description
See which page elements are making API calls — surfaced directly on the site. CalloutAPI shows you the network activity of a web page on the page itself, without opening DevTools. Hover a captured request to highlight the button or input that triggered it. Click to expand and see request/response payloads, headers, and timing. Pin the requests you care about. Filter by status, method, or initiator. Export everything as a HAR file when you're done. The overlay is completely dormant on every site by default. CalloutAPI does nothing: no DOM modification, no patching, no event listeners. You must explicitly add a hostname to its allowlist. You're always in control of where it runs. What it captures fetch() — full URL, method, status, timing, request body, response body, request and response headers XMLHttpRequest — same coverage as fetch, including request headers set via setRequestHeader WebSocket — connection lifecycle (open → message stream → close), with a scrollable thread of sent and received frames Trigger element — the button, link, or input the user clicked or tapped in the 800 ms before the request fired, with selector and label Background / auto requests — anything that fires outside the interaction window is labeled "bg" so polling and prefetching are easy to spot What you see A draggable, floating panel pinned to the page with: A live list of requests (newest first), each showing method, status, path, timing, initiator badge (page vs. background), and trigger element An expandable detail view with tabs: response, request, headers, timing, and (for WebSockets) frames Auto-pretty-printed and syntax-highlighted JSON A pin tray for requests you want to keep visible across refreshes Status / method / initiator chips for multi-select filtering with live counts A search box with optional case-sensitive and regex modes — searches URL, request body, and response body simultaneously A compact pill mode that collapses the panel into a small status bar with a live request counter and error indicator A light/dark theme that follows your preference Hover-to-highlight Hover any captured request and the DOM element that triggered it is outlined directly on the page. Click the request to expand its payload. This is the core "callout" idea: every network event gets visually traced back to the UI element that caused it. Float badges When a request completes, a tiny method+path badge briefly appears near the element that triggered it on the page. Background requests don't generate badges — only user-triggered ones — so the page doesn't get cluttered. Pinning that survives reloads Pin a request by its method + URL (ignoring query strings). The pin persists across page reloads — when the same endpoint is hit again, it reappears in the pin tray automatically. Useful for tracking a specific endpoint across navigations. HAR export Click Export HAR to download all captured HTTP requests as a standard HAR 1.2 file. The file can be imported into Chrome DevTools, Firefox DevTools, Postman, Charles Proxy, Google's HAR Analyzer, and any other HTTP inspection tool. (WebSocket connections are not included in HAR exports — the spec doesn't cover them.) Pause / Resume / Clear Pause freezes capture while keeping the existing list visible — useful for inspecting a snapshot without new traffic scrolling it away. Resume picks up where pause left off. Clear empties the list. All three controls live in both the popup and the panel. Privacy by design CalloutAPI is intended for developer use on sites you own or are testing. Because the overlay can be shown during screen-sharing, the extension automatically redacts known credential headers and JSON body keys before they reach the panel: Headers: Authorization, Proxy-Authorization, Cookie, Set-Cookie, X-API-Key, X-Auth-Token, X-CSRF-Token JSON body keys: password, secret, client_secret, private_key, token, access_token, refresh_token, id_token, auth_token, api_key, apikey, jwt, session, sessionid, and common variants Redacted values appear as [redacted] in both the panel and HAR exports. No data ever leaves your browser. Captured requests live only in the active tab's memory and are discarded when you close the tab or click Clear. Performance-aware Renders are throttled to 100 ms intervals to keep the page responsive under heavy traffic The panel shows at most 200 rows at a time (newest first); up to 1000 requests are retained internally Request and response bodies are capped at 50 000 characters; WebSocket frames at 10 000 Responses larger than 1 MB or non-text content types are skipped without being read Response body reads are streamed and cancelled at the cap — large downloads aren't loaded into memory