How to Debug API Responses: JSON Viewer Tips

# How to Debug API Responses: JSON Viewer Tips

Debugging API responses is a daily task for web developers, but most people use their JSON viewer incorrectly. This guide reveals professional techniques to inspect, analyze, and troubleshoot API responses 10x faster using modern JSON viewers.

Whether you're working with REST APIs, GraphQL, or WebSockets, these tips will transform your debugging workflow.

---

Why Proper JSON Viewing Matters

The Pain Points

Without effective JSON viewing, developers waste hours:

• 😫 Scrolling through thousands of lines of minified JSON
• 🔍 Manually searching for specific fields in nested objects
• 🐛 Missing critical error messages buried in responses
• ⏰ Copy-pasting data between tools to understand structure
• 💥 Crashing browsers with massive API responses

The Solution

Professional JSON viewers provide:

✅ Instant formatting - Transform minified JSON into readable structure

✅ Interactive navigation - Collapse/expand nested objects

✅ Path finding - Locate exact data locations

✅ Type highlighting - Distinguish strings, numbers, booleans at a glance

✅ Search & filter - Find needles in haystacks instantly

---

Choosing Your JSON Viewer

Browser Developer Tools

• Built-in JSON viewer for API responses
• Network tab shows formatted responses
• Console supports copy path functionality

• Basic formatting only
• No advanced search
• Can crash with large responses (>10MB)

Online JSON Viewers

• ✅ Handles 100MB+ files without lag
• ✅ Tree view with path copying
• ✅ One-click formatting
• ✅ Client-side processing (100% private)
• ✅ Search and filter capabilities

• ✅ Syntax validation
• ✅ Error highlighting
• ❌ Limited navigation features

IDE Extensions

• "JSON Tools" extension
• "Pretty JSON" for formatting
• Built-in JSON schema validation

• Integrated JSON viewer
• Response history
• Test generation

---

Essential JSON Viewer Techniques

1. Quick Path Extraction

You need to access user.profile.settings.notifications.email from an API response.

// Manual drilling - error-prone!
const email = response.user.profile.settings.notifications.email;

$.user.profile.settings.notifications.email
$.users[].email                    // All user emails

$.products[?(@.price < 100)].name   // Products under $100

{
  "status": "success",           // ← Keep visible
  "metadata": { ... },           // ← Collapse initially
  "users": [                     // ← Keep visible
    {
      "id": 1,
      "profile": { ... },       // ← Expand when investigating user
      "permissions": { ... }     // ← Collapse initially
    }
  ],
  "debug": { ... }              // ← Collapse unless debugging
}

{
  "string": "blue text",        // 🔵 Strings in blue
  "number": 42,                 // 🟢 Numbers in green
  "boolean": true,              // 🟠 Booleans in orange
  "null": null,                 // ⚫ Null in gray
  "array": [],                  // 🟣 Arrays with brackets
  "object": {}                  // 🟤 Objects with braces
}

{
  "userId": "123",     // 🔵 Should this be a number?
  "price": "29.99",    // 🔵 Probably wrong - should be number
  "active": "true"     // 🔵 Should be boolean, not string!
}

{
  "status": 200,
  "data": {
    "users": [
      { "id": 1, "name": "Alice" },
      { "id": 2, "name": "Bob" }
    ]
  }
}

// expected-user-schema.json
{
  "id": "number",
  "name": "string",
  "email": "string",  // ← Missing in actual response!
  "avatar": "string"
}

{
  "status": 400,
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Invalid request",
    "details": {
      "fields": {
        "email": {
          "errors": [
            {
              "code": "INVALID_FORMAT",
              "message": "Email must be valid format"
            }
          ]
        }
      }
    }
  }
}

const errorMsg = response?.error?.details?.fields?.email?.errors?.[0]?.message;
console.error('Validation error:', errorMsg);

$.products[?(@.inStock === true)]

// Instead of fetching everything:
GET /api/products?limit=1000  // ❌ Heavy

// Fetch in pages:
GET /api/products?page=1&limit=50  // ✅ Manageable

// Capture responses
const v1Response = await fetch('/api/v1/user');
const v2Response = await fetch('/api/v2/user');

// Use online diff tools
// BigJSON provides side-by-side comparison

// All email addresses
$.users[].email

// Products over $100
$.products[?(@.price > 100)]

// Users with admin role
$.users[?(@.role === 'admin')]

// Nested array search
$..comments[].author.name

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "userId": { "type": "number" },
    "email": { 
      "type": "string",
      "format": "email"
    },
    "created": {
      "type": "string",
      "format": "date-time"
    }
  },
  "required": ["userId", "email"]
}

{
  "_comment": "Error occurs when creating order with invalid coupon",
  "orderId": "ORD-12345",
  "error": {
    "code": "INVALID_COUPON",
    "message": "Coupon XYZ123 is expired"
  }
}

Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' 
has been blocked by CORS policy

Access-Control-Allow-Origin: 

   Access-Control-Allow-Methods: GET, POST

// Use proxy in package.json (React)
{
  "proxy": "https://api.example.com"
}

// Or use CORS proxy for testing
fetch('https://cors-anywhere.herokuapp.com/https://api.example.com/data')

Issue 2: Authentication Failures

{
  "data": { ... }
}

{
  "error": "Unauthorized",
  "message": "Invalid or expired token"
}

• [ ] Token included in request?
• [ ] Correct header name? (Authorization: Bearer )
• [ ] Token expired? Check exp claim in JWT
• [ ] Token format correct? (JWT vs API key)

Request Headers:
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Issue 3: Unexpected Data Types

const response = await fetch('/api/user/123');
const data = await response.json();

// Expecting number, got string
console.log(typeof data.userId);  // "string" ❌

const userId = Number(data.userId);  // Convert string to number
const price = parseFloat(data.price);  // Parse float
const active = data.active === 'true';  // String to boolean

---

Tools & Extensions for Pro Debugging

Browser Extensions

• Auto-formats JSON in browser
• Syntax highlighting
• Collapse/expand nodes

• Tree view for JSON
• Copy keys and values
• Clickable URLs

• Make API calls directly in VS Code
• Save request collections
• Environment variables

Command-Line Tools

# Basic GET request
curl https://api.example.com/users

# Pretty print with jq
curl https://api.example.com/users | jq .

# Save response
curl https://api.example.com/users > response.json

# Include headers in output
curl -i https://api.example.com/users

# Extract specific field
cat response.json | jq '.users[0].email'

# Filter array
cat response.json | jq '.users[] | select(.active == true)'

# Transform data
cat response.json | jq '.users | map({id, name})'

# Clean syntax
http GET https://api.example.com/users

# POST with JSON
http POST https://api.example.com/users name=Alice email=alice@example.com

# Automatic JSON formatting
http https://api.example.com/users --pretty=all

Desktop Applications

• Collection management
• Environment variables
• Automated testing
• Mock servers

• Clean interface
• GraphQL support
• Code generation
• Plugin ecosystem

• Beautiful UI
• Dynamic values
• Team synchronization

---

Creating a Debugging Workflow

Step-by-Step Process

# Save request details
curl 'https://api.example.com/data' \
  -H 'Authorization: Bearer TOKEN' \
  -H 'Content-Type: application/json' \
  --data '{"query":"test"}' \
  > request.txt

• Open in BigJSON Viewer
• Check status code
• Verify response structure

• Expected vs actual fields
• Type mismatches
• Missing data

• Change parameters
• Try different endpoints
• Modify headers

<h2 id="bug-report-user-api-returns-null-email" class="text-2xl font-bold mt-10 mb-5 text-foreground border-b border-gray-200 dark:border-gray-700 pb-2">Bug Report: User API Returns Null Email</h2>

Endpoint: GET /api/users/123  
Expected: { "email": "user@example.com" }  
Actual: { "email": null }  
Steps: User must verify email first  
Fix: Add email verification check

---

Best Practices

DO:

✅ Use version control for API examples

git/
├── api-examples/
│   ├── users-get-200.json
│   ├── users-get-404.json
│   └── users-post-201.json

✅ Create reusable test cases

describe('User API', () => {
  it('returns user with email', async () => {
    const response = await fetch('/api/users/1');
    const data = await response.json();
    expect(data.email).toBeDefined();
  });
});

✅ Document API quirks

// Note: API returns price as string, not number
const price = parseFloat(response.price);

DON'T:

❌ Log sensitive data

// ❌ Bad
console.log('User response:', response);  // May contain tokens!

// ✅ Good
console.log('User fetched:', { id: response.id, name: response.name });

❌ Assume response structure

// ❌ Bad
const email = response.user.email;  // Crashes if user is null

// ✅ Good
const email = response?.user?.email ?? 'No email';

❌ Ignore error responses

// ❌ Bad
const data = await fetch('/api/data').then(r => r.json());

// ✅ Good
const response = await fetch('/api/data');
if (!response.ok) {
  const error = await response.json();
  console.error('API error:', error);
  throw new Error(error.message);
}
const data = await response.json();

---

Conclusion

Master API debugging by:

Your Next Steps

---

Related Resources

• JSON APIs & REST Services Guide
• JavaScript JSON Complete Guide
• JSON Online Tools
• BigJSON Formatter

---