Inspecting Frontend API Requests
Inspectr can help you debug outgoing HTTP requests made by your frontend applications. With a single URL change, you can inspect request details, trace issues, and test interactions without touching your backend.
Use Cases
Section titled “Use Cases”You’re developing a web app and want to:
- See the actual requests your frontend sends
- Inspect headers, methods, and payloads
- View backend responses
- Debug issues like CORS, 4xx/5xx errors, or missing data
Step 1: Start Inspectr with a Backend
Section titled “Step 1: Start Inspectr with a Backend”Point Inspectr to your API backend:
inspectr --listen=:8080 --backend=https://api.example.comThis sets Inspectr to:
- Receive requests on
http://localhost:8080 - Forward them to
https://api.example.com - Log and display traffic in real time
Step 2: Update Frontend Base URL
Section titled “Step 2: Update Frontend Base URL”Modify your frontend to send API requests to Inspectr:
// Before:fetch("https://api.example.com/data")// After:fetch("http://localhost:8080/data")- Works with any framework (React, Vue, Angular, etc.)
- Works with any HTTP client (fetch, axios, etc.)
- No backend changes required
Step 3: Inspect in the UI
Section titled “Step 3: Inspect in the UI”Visit http://localhost:4004 to:
- View requests and responses
- Monitor headers, bodies, and status codes
- Replay requests during development
Optional: Enable CORS backend Handling
Section titled “Optional: Enable CORS backend Handling”If you want to validate the original backend CORS validation, you can turn off the CORS handling by Inspectr and let the CORS setting of the backend handle the validation:
inspectr --listen=:8080 --backend=https://api.example.com --backend-cors=trueBy default, Inspectr will allow preflight OPTIONS requests and pass through headers appropriately.
- Use filters in the UI to isolate specific endpoints
- Replay requests after changing frontend code
- Use override headers to simulate errors and delays in mock/catch modes