JSON Diff Checker
Compare two JSON values structurally — added, removed, changed keys per nested path. Order-insensitive.
Loading tool…
浏览器内运行这个工具能做什么
In-browser JSON diff tool. Walks both trees recursively, ignores object key order, surfaces type changes, counts each kind.
Unlike a line-based diff (which is what most diff tools do), this is a semantic diff: reordering object keys produces no diff (objects are unordered by spec), and pretty-printing differences are ignored. It compares what the JSON represents, not how it's formatted.
Arrays are diffed positionally by default: index 0 of Left vs index 0 of Right, etc. This matches how Git diffs JSON files — useful for change review on ordered data (history, time-series, sequence-sensitive lists). For semantic array diffing where elements should be matched by content rather than index, post-process with a manual review pass.
这个工具可以完成什么
Capture a sample response before and after a backend change. Drop both in and immediately see which fields were added, removed, or changed — far faster than scanning two pretty-printed payloads side by side.
Paste prod's feature-flag JSON on one side and staging's on the other. The structural diff surfaces every divergence without false positives from key-order or formatting differences.
When debugging a state-management bug, capture the state object before and after the suspect action. The diff shows exactly which fields changed — useful for finding unexpected side effects.
依赖结果前需要检查什么
- Performance and maximum practical input size depend on browser memory, device speed, and the structure of the input.
- Review the generated result before replacing or publishing an original file.
如何使用
- 1
Paste a JSON value (object, array, or scalar) into the Left and Right areas.
- 2
Toggle key-order sensitivity if you want strict order-aware comparison (rare; default Off treats objects as unordered).
- 3
Review the structured diff and the counts. The output area is selectable / copy-able.
使用场景
Capture a sample response before and after a backend change. Drop both in and immediately see which fields were added, removed, or changed — far faster than scanning two pretty-printed payloads side by side.
Paste prod's feature-flag JSON on one side and staging's on the other. The structural diff surfaces every divergence without false positives from key-order or formatting differences.
When debugging a state-management bug, capture the state object before and after the suspect action. The diff shows exactly which fields changed — useful for finding unexpected side effects.
Compare the original document against the post-patch result to confirm the patch did what you intended. Especially useful when the patch has many operations.
When migrating between schema versions, run the migration on a sample document and diff against expected output. Faster than writing assertion-by-assertion tests for ad-hoc changes.
使用技巧
JSON objects are unordered by spec, so <code>{a:1,b:2}</code> equals <code>{b:2,a:1}</code> — no diff. JSON arrays are ordered, so <code>[1,2]</code> ≠ <code>[2,1]</code> — diff. For order-insensitive array comparison (set semantics), this tool isn't the right fit — sort both arrays first and re-diff.
If a value's type changes (e.g., <code>"42"</code> string to <code>42</code> number), it counts as one changed value. The diff line shows both the old and new representations so the type shift is visible.
Added / removed / changed counts measure primitive (leaf) operations, not whole-subtree changes. If you delete a nested object with 5 keys, you get 5 'removed' counts, not 1. This is the granularity most useful for understanding how impactful the diff is.
If your two inputs are minified or contain extraneous whitespace, paste through the JSON Formatter first. The diff itself ignores formatting, but pretty-printing first makes the diff output easier to read.
常见问题
Does this run entirely in my browser?
JSON.parse, recursive comparison, and textual diff output run in your browser. Tool code does not submit either JSON input to a TOOLGRID processing endpoint. Review browser extensions and device security before handling sensitive content.
How is this different from the Text Diff Checker?
The Text Diff Checker compares two text blocks line-by-line — useful for diffing code or prose. The JSON Diff Checker parses both inputs as JSON and compares their STRUCTURE: reordered object keys produce no diff, pretty-printing differences are ignored, type changes are surfaced explicitly. Use line diff for code, structural diff for JSON.
Does it support deep arrays of objects?
Yes — the diff recurses into nested arrays and objects without depth limits. Arrays are compared positionally (element 0 vs element 0, etc.). For arrays where you want to match by content (e.g., 'find me the elements unique to each side regardless of position'), this tool is not the right fit — you'd need a tool that supports id-based array diffing.
What if my inputs aren't valid JSON?
The tool surfaces the parse error inline for whichever side failed. Fix the JSON (often a trailing comma, single-quoted string, or unquoted key) and the diff updates live. For pretty-printing and validating, our JSON Formatter is the sibling tool.
How are added/removed/changed counted differently from 'unchanged'?
Each primitive (leaf) value contributes one count: 'added' for keys only on the Right, 'removed' for keys only on the Left, 'changed' for keys present on both with different values, 'unchanged' for keys present on both with identical values. Whole-object additions/removals add up across all their leaf primitives.
Can I diff two JSON arrays at the top level?
Yes. Top-level arrays are diffed positionally — element 0 on Left vs element 0 on Right, etc. If lengths differ, extra elements are shown as additions or removals.
Does the tool work for very large JSON files?
Performance depends on input size and depth. Hundreds of kilobytes are fast; multi-megabyte deep-nested JSON may take a moment. For huge inputs, use a CLI tool like <code>jd</code>, <code>jsondiffpatch</code>, or <code>diff <(jq -S . a.json) <(jq -S . b.json)</code> which can stream and avoid loading both into browser memory.
下一步常用工具
如果还需要校验、转换或复用结果，可以继续打开相近的浏览器本地工具。