Backend & API Suite

XHR / Fetch Inspector

A live, zero-configuration network monitor that captures every HTTP request your frontend makes, displayed in real-time directly inside Vispane.

Overview

What is the XHR Inspector?

When a UI interaction fails silently (a button click doesn't save, a page loads with no data, a form submits but nothing happens), the problem lies somewhere in the network layer between your frontend and your backend. The XHR Inspector is Vispane's passive network monitor that intercepts every fetch() and XMLHttpRequest call originating from the previewed page.

Unlike the browser's built-in DevTools Network tab, which mixes in analytics, third-party ads, font loading, and dozens of other irrelevant requests, the XHR Inspector shows you only the API calls your application makes, in a clean, focused interface.

  • Live Request Capture: Requests appear in real-time as they occur, with a pulsing live indicator.
  • Filter by Status Code: Instantly filter to show only 4xx/5xx errors, helping you spot failures in seconds.
  • Filter by Request Type: Narrow down to only XHR, Fetch, or specific asset types.
  • URL Search: Free-text search across all captured URLs to find a specific endpoint.
  • Expandable Request Details: Click any row to expand it and inspect full request headers, response headers, request body payload, and the full response body.
  • Timing Display: Each request shows its exact duration in milliseconds.
  • Copy as cURL: Export any captured request directly to the clipboard as a cURL command for terminal debugging or sharing with team members.
Step-by-Step Workflow

Debugging a Silent Form Failure

  1. 1

    Open the XHR Inspector

    Click the pulse/wave icon in the Vispane left rail. The panel opens and immediately begins listening. You will see a green pulsing dot indicating "Live".

  2. 2

    Reproduce the failing interaction

    In the preview canvas, click the button or submit the form that isn't working. The corresponding request will appear immediately in the feed.

  3. 3

    Identify the failed request

    Failed requests are highlighted in red with their HTTP status code (e.g., 422, 500). Click the filter button to show only errors if the feed is busy.

  4. 4

    Inspect the payload

    Click the row to expand it. Check the Request Body section: is the data malformed? Is a required field missing or null?

  5. 5

    Read the server's error message

    Look at the Response Body. A well-structured API will return a message like "email: this field is required". This tells you exactly what to fix.

  6. 6

    Copy as cURL for deeper isolation

    If the error is ambiguous, click "Copy as cURL" and paste the command into the API Explorer to iterate on the request in isolation without needing to interact with the UI again.

Pro Tips

Best Practices

💡
Use it to reverse-engineer your own app The XHR Inspector is the fastest way to understand the API contract of a codebase you're unfamiliar with. Log in via the UI, click around, and watch every request the app makes to learn the exact API structure without reading source code.
⚠️
Requires Proxy Mode The Inspector only captures requests from pages loaded through Vispane's server-side proxy. Entering a URL directly that doesn't route through the proxy will result in an empty feed.