10 JSON Debugging Tips Every Developer Should Know
Working with JSON is a daily task for most developers. Whether you're building APIs, parsing configuration files, or exchanging data between services, JSON is everywhere. Here are 10 practical tips to make debugging JSON faster and less painful.
1. Always Validate Before Parsing
Before trying to parse JSON in your application, validate it first. A single misplaced comma or unquoted key can cause your parser to fail with a cryptic error message. Use a JSON formatter and validator to catch syntax errors quickly.
2. Watch Out for Trailing Commas
This is the most common JSON syntax error. Unlike JavaScript objects, JSON does NOT allow trailing commas:
// INVALID JSON - trailing comma after "blue"
{
"colors": ["red", "green", "blue",]
}
// VALID JSON
{
"colors": ["red", "green", "blue"]
}
3. Keys Must Be Double-Quoted Strings
JSON requires all keys to be double-quoted strings. Single quotes are not valid in JSON:
// INVALID - single quotes and unquoted keys
{name: 'John', 'age': 30}
// VALID
{"name": "John", "age": 30}
4. Use JSON.stringify() with Formatting
When debugging in JavaScript, use the third parameter of JSON.stringify() for readable output:
// Compact (hard to read)
console.log(JSON.stringify(data));
// Pretty-printed with 2-space indent
console.log(JSON.stringify(data, null, 2));
5. Handle null vs undefined
JSON supports null but not undefined. When you serialize a JavaScript object with undefined values, they are silently dropped:
const obj = { a: 1, b: undefined, c: null };
JSON.stringify(obj);
// Result: {"a":1,"c":null}
// Note: "b" is completely missing!
6. Be Careful with Large Numbers
JavaScript's JSON.parse() can lose precision with large integers (beyond 2^53). If your API returns IDs like 9007199254740993, they may be silently rounded. Consider using string IDs or BigInt-aware parsers.
7. Check Content-Type Headers
When an API response isn't parsing correctly, check the Content-Type header. The response should have Content-Type: application/json. If it's text/html, you might be getting an error page instead of JSON data.
8. Use the Replacer Function for Selective Serialization
The second parameter of JSON.stringify() lets you filter or transform values:
// Only include specific keys
JSON.stringify(user, ["name", "email"]);
// Transform values during serialization
JSON.stringify(data, (key, value) => {
if (key === "password") return undefined; // Remove sensitive data
return value;
}, 2);
9. Handle Circular References
If JSON.stringify() throws "Converting circular structure to JSON", your object has circular references. Use a custom replacer to handle them:
const seen = new WeakSet();
const json = JSON.stringify(obj, (key, value) => {
if (typeof value === "object" && value !== null) {
if (seen.has(value)) return "[Circular]";
seen.add(value);
}
return value;
}, 2);
10. Decode Base64 and JWT Payloads
Many APIs embed JSON inside Base64 strings or JWTs. Use a Base64 decoder or JWT decoder to inspect the actual JSON payload when debugging authentication issues.
Conclusion
Most JSON debugging comes down to careful validation and understanding the differences between JSON and JavaScript objects. Keep a JSON formatter bookmarked — you'll use it daily.