DEV Community

Cover image for JSON Formatting 101: How to Debug JSON Data Like a Pro
kingfujing
kingfujing

Posted on • Originally published at devtoolshub-seven.vercel.app

JSON Formatting 101: How to Debug JSON Data Like a Pro

#webdev #tutorial #javascript #productivity

Originally published on DevToolsHub — a collection of free, privacy-first online developer tools.

JSON (JavaScript Object Notation) is the lingua franca of modern web APIs. Whether you are debugging a REST endpoint, configuring a cloud service, or building a frontend app, you encounter JSON every day. Yet reading raw, minified JSON is a painful experience — one missing comma can break an entire payload. Here is everything you need to know about JSON formatting, validation, and debugging.

What Is JSON Formatting?

JSON formatting (also called "pretty-printing") transforms compressed, hard-to-read JSON into an indented, human-readable structure. A JSON formatter takes something like this:

{"name":"DevToolsHub","tools":[{"name":"JSON Formatter","url":"/json-formatter"},{"name":"Base64","url":"/base64"}],"active":true}
Enter fullscreen mode Exit fullscreen mode

And turns it into this:

{
  "name": "DevToolsHub",
  "tools": [
    {
      "name": "JSON Formatter",
      "url": "/json-formatter"
    },
    {
      "name": "Base64",
      "url": "/base64"
    }
  ],
  "active": true
}
Enter fullscreen mode Exit fullscreen mode

Why Formatting Matters

  • Find errors faster — malformed JSON is immediately obvious when you can see the structure
  • Compare responses — formatted JSON makes side-by-side comparison of API outputs easy
  • Share readable snippets — formatted JSON is easier to paste into documentation, issues, or PRs
  • Debug configurations — many cloud and DevOps tools (Terraform, Kubernetes, AWS) output JSON

Common JSON Mistakes to Watch For

1. Trailing Commas

JavaScript allows trailing commas in objects and arrays. JSON does not. This is one of the most common sources of parse errors:

// Invalid JSON (trailing comma)
{
  "name": "DevToolsHub",  ✗ remove this comma
}
Enter fullscreen mode Exit fullscreen mode

2. Unquoted Keys

In JavaScript, object keys can be unquoted identifiers. JSON requires all keys to be wrapped in double quotes:

// Invalid JSON (unquoted key)
{ name: "DevToolsHub" }

// Valid JSON
{ "name": "DevToolsHub" }
Enter fullscreen mode Exit fullscreen mode

3. Single Quotes Instead of Double Quotes

JSON only allows double quotes ("). Single quotes (') are not valid, even though many programming languages accept them for string literals.

4. Undefined or NaN Values

JSON supports null, true, and false, but not undefined or NaN. These values cause JSON.stringify() to silently drop keys or convert them to null.

JSON.stringify({ a: undefined, b: NaN, c: Infinity });
// → "{"b":null,"c":null}"   ← 'a' disappeared entirely!
Enter fullscreen mode Exit fullscreen mode

JSON Formatting Best Practices

Use 2-Space Indentation

The standard for JSON formatting is 2-space indentation. It provides enough visual structure without wasting horizontal space. Some tools default to 4 spaces — configure them to use 2 for consistency with most API documentation.

Validate Before You Use

Always validate JSON before feeding it to your application. A good JSON formatter with validation catches errors immediately and shows you exactly where the problem is. This saves hours of debugging.

Compress for Production

When sending JSON over the wire, use the compression mode to strip all whitespace. JSON.stringify(value) (without spacing arguments) produces compressed output. A typical API response shrinks by 30-50% when compressed — saving bandwidth and improving load times.

Watch Out for Deeply Nested Structures

JSON parsers typically have a nesting depth limit (often around 100-200 levels). If you are working with highly nested data — like OpenAPI specs or complex configuration files — be aware that extremely deep structures can cause parse errors in some environments.

Real-World Debugging Scenario

Imagine you are debugging a payment API that returns this error response:

HTTP 400
{"status":"error","code":"INVALID_PAYLOAD","message":"Validation failed","details":[{"field":"amount","error":"must be a positive number"},{"field":"currency","error":"must be one of: USD, EUR, GBP"}]}
Enter fullscreen mode Exit fullscreen mode

Instead of squinting at that mess, paste it into a formatter:

{
  "status": "error",
  "code": "INVALID_PAYLOAD",
  "message": "Validation failed",
  "details": [
    {
      "field": "amount",
      "error": "must be a positive number"
    },
    {
      "field": "currency",
      "error": "must be one of: USD, EUR, GBP"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Immediately you can see: two fields failed validation (amount and currency). The fix is obvious. This is the kind of insight that formatted JSON gives you in seconds versus minutes.

Putting It All Together

Whether you are a seasoned backend engineer or a frontend developer learning the ropes, mastering JSON formatting is a foundational skill. The next time you copy a curl response, paste it into a JSON formatter before trying to read it. Your eyes — and your debugging efficiency — will thank you.

If you found this guide useful, check out DevToolsHub for more free online developer tools. All tools run locally in your browser — your data never leaves your device.

Top comments (0)