JSON-Diff
Vergleichen Sie zwei JSON-Dokumente und sehen Sie genau, welche Felder hinzugefügt, entfernt oder geändert wurden
JSON A (links / vorher)
JSON B (rechts / nachher)
JSON-Diff
Vergleichen Sie zwei JSON-Dokumente und sehen Sie genau, welche Felder hinzugefügt, entfernt oder geändert wurden
Funktionen
- Strukturierter Diff zwischen zwei JSON-Werten — Objekte, Arrays und Primitive werden korrekt durchlaufen (null wird als Skalar behandelt, nicht als Objekt — der typeof-null-Bug ist behoben)
- Jede Differenz wird als RFC-6901-JSON-Pointer-Pfad gemeldet (z. B. `/users/0/email`), sodass Sie direkt zum exakten Knoten in tief verschachtelten Daten navigieren können
- Geänderte Einträge zeigen Vorher- UND Nachher-Werte nebeneinander, sodass offensichtlich ist, ob 'active' von true→false gewechselt hat oder ob eine Zahl sich geändert hat
- Zusammenfassungs-Zähler: hinzugefügt, entfernt, geändert und unveränderte Blätter — auf einen Blick die Größenordnung des Diffs vor dem Lesen der Pfaddetails
- Pro-Seite-Parsefehlerbericht nennt, welche Eingabe fehlgeschlagen ist, und enthält die Parsemeldung der JavaScript-Engine — Sie raten nicht, ob A oder B fehlerhaft ist
- Schaltfläche „Bericht kopieren“ gibt den vollständigen Diff (gruppierte Hinzugefügt / Entfernt / Geändert-Sektionen plus Unverändert-Zähler) als Klartext aus — einfügen in Code Review oder Commit-Nachricht
- Beispiel-laden füllt beide Bereiche mit einem kleinen realistischen Beispiel (Benutzerdatensatz mit Rollen- und Adressänderungen), sodass Erstnutzer den Diff ohne Tippen arbeiten sehen
- Rein clientseitig: JSON A und JSON B werden in Ihrem Browser geparst und verglichen; nichts wird hochgeladen, und das Tool funktioniert offline nach dem Laden der Seite
Anleitung
- Fügen Sie Ihr „Vorher“-JSON in das linke Textfeld (JSON A) und das „Nachher“-JSON in das rechte (JSON B) ein.
- Klicken Sie Vergleichen. Der Diff wird rekursiv berechnet; Objekte werden nach Schlüssel, Arrays nach Index gediff-t.
- Lesen Sie die Zusammenfassungs-Zähler: wie viele Schlüssel hinzugefügt, entfernt, geändert wurden und wie viele Blätter übereinstimmten.
- Scrollen Sie die Pfad-Listen, um genau zu sehen, welche JSON-Pointer-Pfade sich geändert haben; geänderte Zeilen zeigen Vorher → Nachher.
- Klicken Sie Bericht kopieren, um den ganzen Diff als Klartext zu erhalten — nützlich für Review-Notizen, Bug Reports oder Commit-Nachrichten.
- Nutzen Sie Beispiel laden, um ein funktionierendes Beispiel zu sehen, bevor Sie Ihre eigenen Daten einfügen.
Tipps & Best Practices
- Lassen Sie auf beiden Seiten zuerst JSON Formatter laufen, wenn ein Textdiff auch strukturell-gleiche Dokumente als Keine-Änderung zeigen soll.
- Für große Arrays, in denen die Reihenfolge zählt, ist dieses Tool genau richtig; für Sets vorher nach einem stabilen Schlüssel sortieren.
- Die Pfadausgabe ist RFC 6901, sodass Sie sie direkt an Bibliotheken wie fast-json-patch übergeben können, um Änderungen programmatisch anzuwenden.
- Kopieren Sie den Bericht in PR-Beschreibungen, um Prüfern zu zeigen, was sich in einer Konfigurations- oder Fixture-JSON geändert hat.
- Wenn Parsefehler auf eine bestimmte Spalte zeigen, enthält die Engine-Meldung oft Zeile/Spalte aus json5-artigen Parsern — aber hier verwenden wir striktes JSON.parse, sodass Zeile/Spalte vom Host kommt.
FAQ
Wie werden Arrays verglichen — nach Index oder nach Wert?
Nach Index. Element 0 von A wird mit Element 0 von B verglichen, 1 mit 1 usw. Ist A länger, werden die zusätzlichen End-Indizes als Entfernt gemeldet; ist B länger, ist der zusätzliche Schwanz Hinzugefügt. Das ist schnell und vorhersehbar, bedeutet aber, dass ein einzelnes Einfügen am Anfang eines großen Arrays viele „Geändert“-Einträge auslöst. Für ordnungsunabhängige Vergleiche (z. B. Sets eindeutiger IDs) sortieren Sie beide Arrays vorher oder verarbeiten Sie sie zu Objekten, die mit der Kennung verschlüsselt sind.
Welche Pfad-Notation steht im Ergebnis?
RFC 6901 JSON Pointer: Pfade sind schrägstrich-getrennte Tokens, die in den JSON-Baum absteigen. `/users/0/email` bedeutet „die email-Eigenschaft von Element 0 von users“. Schlüssel mit `~` werden als `~0` und Schrägstriche als `~1` escapt. Die Wurzel selbst wird als `/` gezeigt. Dieselbe Pfad-Notation wird von Patch-Tools, JSON Schema instancePath und json-formatter Pointer-Hover verwendet.
Wie wird null behandelt?
null wird als Blattwert behandelt, nicht als Objekt — obwohl in JavaScript typeof null === 'object'. So zeigt {a: null} vs {a: {}} als geändert statt in ein leeres Objekt zu rekursieren. {a: null} vs {a: null} zählt als ein unverändertes Blatt, und {a: null} vs {a: 0} zeigt als geändert mit vorher=null nachher=0.
Verarbeitet der Diff Schlüssel mit Sonderzeichen?
Ja. Schlüssel mit Punkten, Schrägstrichen, Klammern oder Tilden werden in der Pfadausgabe JSON-Pointer-escapt — `~` wird zu `~0`, `/` wird zu `~1`. So zeigt sich ein Schlüssel namens `a/b` als `/a~1b` im Pfad, unzweideutig umkehrbar.
Warum entspricht die Unverändert-Zahl nicht meiner Erwartung?
Unverändert wird auf BLATT-Ebene gezählt — Primitive, die zwischen A und B gleich sind. Ein tief verschachteltes Objekt, dessen Subtree vollständig identisch ist, trägt einen Unverändert-Eintrag pro Blatt bei, nicht einen für den ganzen Subtree. Das macht den Zähler zu einem echten Sanity-Check: „wie viele primitive Werte sind gleich geblieben“.
Was passiert, wenn eine Seite null oder leer ist?
Leere Eingabe parst als null (also vergleicht `{a:1}` vs leer gegen null und meldet das gesamte Objekt als hinzugefügt). Ein literales `null` ist ein gültiges JSON-Dokument; zwei nulls vergleichen ergibt null hinzugefügt/entfernt/geändert und ein unverändert. Sind beide Eingaben leer, meldet der Diff trivial überall null.
Wird mein JSON irgendwohin gesendet?
Nein. Beide Textfelder bleiben in Ihrem Browser; der Diff läuft im selben JavaScript-Kontext, der die Seite gerendert hat. Die Netzwerk-Registerkarte in DevTools zeigt keine Anfragen, wenn Sie Vergleichen drücken. Das Tool funktioniert offline, sobald die Seite gecacht ist.
Wie unterscheidet sich das von einem Textzeilen-Diff?
Ein Textdiff wie `diff a.json b.json` arbeitet auf Zeichen und Zeilenumbrüchen: reformatieren Sie dieselben Daten, und er leuchtet auf. Dies ist ein STRUKTURIERTER Diff: `{"a":1, "b":2}` und `{"b":2, "a":1}` sind identisch (Null Diff). Er kümmert sich auch nicht um Einrückung, abschließende Leerzeichen oder Kommentarstile. Verwenden Sie einen Textdiff, wenn die Formatierung wichtig ist; verwenden Sie diesen, wenn die Daten wichtig sind.