Как отлаживать API-ответы: Советы по JSON-вьюеру

2. Стратегия сворачивания/разворачивания

Начните со свернутого состояния, разворачивайте стратегически.

{
  "status": "success",           // ← Оставить видимым
  "metadata": { ... },           // ← Свернуть изначально
  "users": [                     // ← Оставить видимым
    {
      "id": 1,
      "profile": { ... },       // ← Развернуть при исследовании пользователя
      "permissions": { ... }     // ← Свернуть изначально
    }
  ],
  "debug": { ... }              // ← Свернуть, если не отлаживаете
}

• Клик по стрелке для сворачивания/разворачивания
• Двойной клик для разворачивания всех дочерних элементов
• Правый клик для "Развернуть всё" / "Свернуть всё"

3. Навигация на основе типов

Современные JSON-вьюеры используют цветовое кодирование:

{
  "string": "синий текст",        // 🔵 Строки синим
  "number": 42,                 // 🟢 Числа зеленым
  "boolean": true,              // 🟠 Булевы оранжевым
  "null": null,                 // ⚫ Null серым
  "array": [],                  // 🟣 Массивы со скобками
  "object": {}                  // 🟤 Объекты с фигурными скобками
}

Мгновенно замечайте проблемы с типами данных:

{
  "userId": "123",     // 🔵 Должно ли это быть числом?
  "price": "29.99",    // 🔵 Вероятно неправильно - должно быть число
  "active": "true"     // 🔵 Должно быть булевым, не строкой!
}

---

Отладка реальных API-ответов

Сценарий 1: Отсутствуют ожидаемые данные

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

- Нет результатов? Поле действительно отсутствует, а не просто вложено

// expected-user-schema.json
{
  "id": "number",
  "name": "string",
  "email": "string",  // ← Отсутствует в реальном ответе!
  "avatar": "string"
}

Сценарий 2: Вложенные сообщения об ошибках

{
  "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('Ошибка валидации:', errorMsg);

Сценарий 3: Проблемы с производительностью (Большие ответы)

API возвращает 50,000 продуктов, браузер зависает.

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

// Вместо получения всего:
GET /api/products?limit=1000  // ❌ Тяжело

// Получайте страницами:
GET /api/products?page=1&limit=50  // ✅ Управляемо

---

Расширенные советы по JSON-вьюеру

1. Сравнение двух API-ответов

// Захватите ответы
const v1Response = await fetch('/api/v1/user');
const v2Response = await fetch('/api/v2/user');

// Используйте онлайн-инструменты diff
// BigJSON предоставляет сравнение бок о бок

• Отсутствующие поля
• Изменения типов ("123" → 123)
• Изменения структуры (объект → массив)
• Добавленные новые поля

2. Извлечение конкретных паттернов данных

---

Рабочий процесс отладки в браузере DevTools

Профессиональные советы Chrome DevTools

• Правый клик на вкладке Network → Отметить "Preserve log"
• Сохраняет видимость API-вызовов при навигации по страницам

• Кликните "XHR" или "Fetch" в вкладке Network
• Скрывает CSS, изображения, скрипты

• Правый клик на запросе → Copy → Copy as cURL
• Воспроизведите точный API-вызов в терминале

• Показывает, какой JavaScript вызвал API-запрос
• Кликните, чтобы перейти к исходному коду

---

Лучшие практики

ДЕЛАЙТЕ:

✅ Используйте контроль версий для примеров API

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

✅ Создавайте переиспользуемые тестовые случаи

describe('User API', () => {
  it('возвращает пользователя с email', async () => {
    const response = await fetch('/api/users/1');
    const data = await response.json();
    expect(data.email).toBeDefined();
  });
});

НЕ ДЕЛАЙТЕ:

❌ Логировать конфиденциальные данные

// ❌ Плохо
console.log('User response:', response);  // Может содержать токены!

// ✅ Хорошо
console.log('User fetched:', { id: response.id, name: response.name });

❌ Предполагать структуру ответа

// ❌ Плохо
const email = response.user.email;  // Упадет, если user null

// ✅ Хорошо
const email = response?.user?.email ?? 'No email';

---

Заключение

Освойте отладку API:

Ваши следующие шаги

---

Связанные ресурсы

• Руководство по JSON API и REST сервисам
• Полное руководство по JavaScript JSON
• Онлайн-инструменты JSON
• BigJSON Formatter

---