Why your JSON breaks (when it works fine in JavaScript), and a faster way to debug it

Every backend developer has had this afternoon. An API returns a 400, a config file refuses to load, or a webhook payload "looks fine" but the parser disagrees. You stare at 300 lines of JSON looking for the one character that's wrong.

After years of leading teams that live inside REST APIs, microservices and third-party integrations, I've noticed the same handful of mistakes cause most of these failures. Here they are, plus the workflow I now use to get from "invalid JSON" to "fixed and shipped" in a couple of minutes.

JSON is not JavaScript

The root of most confusion: JSON looks like a JavaScript object literal, but it's a much stricter format. Code that runs happily in your browser console can be completely invalid JSON.

The usual suspects:

1. Trailing commas

{ "name": "Kamal", "role": "Engineering Manager", }

JavaScript shrugs this off. JSON.parse throws. That final comma after the last property is the single most common cause of broken JSON I see in code reviews.

2. Single quotes

{ 'status': 'active' }

JSON only accepts double quotes, for both keys and string values.

3. Unquoted keys

{ status: "active" }

Valid JS, invalid JSON. Every key must be a double-quoted string.

4. Comments

{ // retry count for the worker "retries": 3 }

JSON has no comment syntax. If you need comments in config, look at JSONC, YAML or TOML, and make sure the parser on the other end actually supports them.

5. Values that don't exist in JSON

undefined, NaN, Infinity and functions are all legal in JavaScript and all illegal in JSON. They often sneak in when someone hand-builds a payload instead of using JSON.stringify.

The real time sink: finding where it broke

Knowing the rules is half the battle. The other half is locating the problem. A bare Unexpected token } in JSON isn't much help in a 2,000-line response.

What actually saves time is a validator that tells you the line and column of the first error. Fix it, re-validate, repeat. Once it parses, pretty-print it with consistent indentation so the structure is readable again.

Then: what actually changed?

Once the JSON is valid, the next question is usually "what's different from the version that worked?" This is where plain text diff tools let you down. If the keys come back in a different order, a line-by-line diff lights up the whole file even though nothing meaningful changed.

A JSON-aware diff sorts the keys on both sides first, so {"a":1,"b":2} and {"b":2,"a":1} are treated as identical. You only see real changes: a value that flipped, a field that went missing, a new key that appeared. Array order still counts, because in JSON it's meaningful.

My three-step workflow

I got tired of bouncing between four different tabs for this, so on OnlineToolkitHub I built a single page that keeps one JSON document in hand through the whole process:

Validate & format – paste the JSON, get the exact line and column of any syntax error, then pretty-print it with 2 spaces, 4 spaces or tabs (optionally sorting keys A–Z).
Compare – paste another version and see only the real differences, with key order ignored.
Convert & export – copy or download the result as formatted JSON, minified JSON, YAML or CSV. CSV works when the data is an array of objects, like a list of records from an API.

👉 Format, Validate & Compare JSON workflow

If you only need one step, each one is also a standalone tool:

Why "runs in your browser" matters

The JSON you're debugging is rarely harmless. It's a production payload with customer emails, an auth response with a token in it, or a config file with database credentials. Pasting that into a random website that uploads it to a server is a real risk.

Everything on these tools runs client-side, so the data never leaves your machine. That was a non-negotiable for me when building them, and it's worth checking for whichever tool you use.