DEV Community: kingfujing

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

kingfujing — Fri, 19 Jun 2026 16:18:50 +0000

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}

And turns it into this:

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

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
}

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" }

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!

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"}]}

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"
    }
  ]
}

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.

10 Free Online Developer Tools to Supercharge Your Workflow in 2026

kingfujing — Fri, 19 Jun 2026 16:05:22 +0000

Originally published on DevToolsHub — a collection of free, privacy-first online developer tools. All processing is done locally in your browser.

Every developer has a toolkit — but the best tools are the ones that are always accessible, never ask for a credit card, and keep your data private. In 2026, the bar for "good enough" online tools has risen dramatically. Here are 10 free online developer tools that deliver real power without the bloat.

1. JSON Formatter & Validator

Working with APIs means working with JSON — lots of it. A good JSON formatter does more than just pretty-print. The DevToolsHub JSON Formatter validates your structure, highlights syntax errors, and lets you toggle between compressed and formatted views.

Whether you are debugging a REST API response or writing a config file, this is the first tool you should bookmark.

2. Base64 Encoder / Decoder

Base64 encoding is everywhere — data URLs, JWT tokens, email attachments, and API authentication headers. A reliable Base64 encoder/decoder handles edge cases that raw btoa() and atob() cannot — like Unicode strings and special characters.

Paste a blob, swap between encode and decode, and get back clean output in milliseconds.

3. Regex Tester with Live Highlighting

Regular expressions are incredibly powerful and notoriously tricky. Writing a regex without live feedback is like coding blindfolded.

The DevToolsHub Regex Tester provides real-time match highlighting as you type, supports all common flags (g, i, m, s, u, y), and displays named capture groups. The 300ms debounce keeps it snappy even with large test strings.

4. UUID Generator (Bulk)

Need a UUID for a database primary key, a session token, or a unique filename? The UUID Generator uses crypto.randomUUID() for cryptographically secure v4 UUIDs.

Generate 1, 10, 50, or 100 at once and copy them all with a single click. No server round-trip needed.

5. Timestamp Converter

Every developer has stared at a Unix timestamp and wondered what date that represents. A good timestamp converter handles both directions — seconds to date and date to seconds.

It automatically detects whether the input is in seconds or milliseconds (values over 1 × 10¹¹ are treated as milliseconds). The "Now" button gives you the current timestamp instantly.

6. Color Converter (HEX, RGB, HSL)

Designing UI components often requires converting between color formats. Whether you are writing CSS, configuring a chart library, or tweaking a Tailwind palette, the Color Converter handles HEX (both shorthand #fff and full #ffffff), RGB, and HSL conversions with a live preview swatch.

Paste any format and get the others instantly.

7. URL Encoder / Decoder

Query strings, form data, and API parameters all need proper URL encoding. The URL Encoder/Decoder gives you two encoding modes: encodeURIComponent for thorough encoding and encodeURI for preserving URL structural characters.

The Swap button lets you toggle input and output instantly.

8. JWT Decoder

JSON Web Tokens power modern authentication. When a token is not working, you need to inspect its header, payload, and signature. The JWT Decoder parses the three parts of any valid JWT, displays them as formatted JSON, and even checks the exp claim to tell you if the token has expired — with a clear green/red indicator.

9. Code Beautifier (Coming Soon)

Beyond JSON, developers regularly work with YAML, XML, SQL, and other structured formats. A universal code beautifier that supports multiple languages is on our roadmap. Stay tuned.

10. Diff Checker (Coming Soon)

Comparing two blocks of text — whether it's configuration files, API responses, or code snippets — is a daily task for many developers. A side-by-side diff checker with syntax highlighting is another tool we're building.

Why All Tools Should Run Locally

Every tool on DevToolsHub runs entirely in your browser. Your data is never sent to a server, never logged, never stored. This matters because:

🔒 Privacy — sensitive API keys, tokens, and proprietary data stay on your machine
⚡ Speed — no network latency, results appear instantly
📡 Offline-first — once the page loads, the tool works even if you lose connectivity
🚫 No accounts — zero sign-ups, zero subscriptions, zero tracking

Build Your Toolkit in 2026

The best tools are the ones you reach for without thinking. Bookmark DevToolsHub, explore the collection, and keep it as your go-to for quick, reliable, privacy-first developer utilities. All 8 available tools are free, fast, and built by developers for developers.

If you found this useful, consider sharing it with a fellow developer. Happy coding! 🚀