Tips Debug API Payload JSON dengan Cepat
Payload API di production sering berukuran ratusan field bersarang. Berikut strategi supaya proses debugging tidak menghabiskan waktu berjam-jam.
1. Jangan Debug dari Console Log Mentah
console.log(JSON.stringify(payload)) menghasilkan satu baris panjang yang melelahkan mata. Copy hasilnya ke tool formatter seperti JSONYAMify agar terindentasi rapi dan mudah dipindai.
2. Gunakan Flatten View untuk Cari Field Tertentu
Kalau kamu sedang mencari kenapa order.summary.totalItems bernilai salah, jangan scroll manual lewat tree bersarang. Mode Flatten menampilkan semua path key dalam format dot notation rata, jadi kamu bisa Ctrl+F langsung ke nama field-nya.
3. Bandingkan Dua Payload Secara Visual
Saat membandingkan response "yang seharusnya" vs "yang aktual diterima", format dulu kedua-duanya dengan mode Pretty yang sama supaya perbedaan strukturnya terlihat jelas โ alih-alih membandingkan dua blob minified yang sulit dibaca.
4. Periksa Tipe Data, Bukan Cuma Nilai
Bug klasik: field "price": "10000" (string) vs "price": 10000 (number) terlihat sama secara visual tapi berperilaku sangat berbeda di kode (misalnya saat melakukan operasi matematika atau perbandingan). Tool dengan deteksi tipe otomatis membantu menangkap perbedaan ini secepatnya.
5. Validasi Sebelum Menyalahkan Backend
Sebelum melempar bug ke tim backend, pastikan payload yang kamu terima benar-benar valid JSON. Banyak kasus "API error" sebenarnya cuma JSON yang corrupt karena masalah encoding atau truncated response.
Tips for Debugging JSON API Payloads Fast
Production API payloads often have hundreds of nested fields. Here's how to debug them without burning hours.
1. Don't Debug From Raw Console Logs
console.log(JSON.stringify(payload)) produces one exhausting long line. Copy it into a formatter tool like JSONYAMify to get clean indentation that's easy to scan.
2. Use Flatten View to Find a Specific Field
If you're hunting for why order.summary.totalItems has the wrong value, don't scroll manually through a nested tree. Flatten mode lists every key path in flat dot notation, so you can Ctrl+F straight to the field name.
3. Visually Diff Two Payloads
When comparing "expected" vs "actually received" responses, format both with the same Pretty mode first so structural differences stand out โ instead of comparing two unreadable minified blobs.
4. Check Data Types, Not Just Values
A classic bug: "price": "10000" (string) vs "price": 10000 (number) look identical visually but behave very differently in code (e.g. during math operations or comparisons). A tool with automatic type detection helps catch this quickly.
5. Validate Before Blaming the Backend
Before filing a bug against the backend team, confirm the payload you received is actually valid JSON. Many "API errors" are really just corrupted JSON caused by encoding issues or a truncated response.