Debug API Responses Without Postman โ Browser-Based JSON and Diff Tools
You can debug most API issues with just a browser, a JSON formatter, and a diff checker. Here is a quick API debugging workflow using free tools.
You're on a machine without Postman, without jq, maybe without even a proper terminal. The API is misbehaving and you need to understand what it's returning. Here's how to debug API responses with nothing but a browser.
Method 1: Use the browser console directly
Every browser has a JavaScript console. Open DevTools (F12), go to the Console tab, and use fetch to make your API call:
// Make a request from the browser console
const response = await fetch("https://api.example.com/users", {
headers: { "Authorization": "Bearer YOUR_TOKEN" }
});
const data = await response.json();
console.log(data);
// Check response status
console.log(response.status, response.statusText);
// Check headers
response.headers.forEach((value, key) => console.log(key, value));Method 2: Network tab inspection
Open DevTools, switch to the Network tab, and trigger the request from your app. Click the request in the list. The Response sub-tab shows the raw response body. The Preview tab shows a parsed, collapsible view of JSON responses. The Headers tab shows everything about the request and response headers.
Method 3: Intercepting requests
If you can't trigger the request manually, you can intercept it. In DevTools, go to Sources and use XHR/fetch Breakpoints to pause execution when a specific URL is requested. This lets you inspect the request and response at the moment they happen.
What to look for when debugging
- Status code: Is it 200? 401? 500? The code tells you the category of problem immediately.
- Content-Type header: If the server is returning HTML instead of JSON, your request is probably hitting an error page, not the API.
- CORS errors: If you see a CORS error in the console, the API is blocking your origin. This isn't a data issue โ it's a server configuration issue.
- Response body: Is it valid JSON? Does it have the fields you expect? Are the values the right types?
Formatting the response you found
Once you've captured the raw response body, paste it into our JSON Formatter to read it easily and spot any issues in the structure.