JSON Diff Online

Porovnání JSON souborů zdarma

API vrací něco divného? Hoďte sem obě odpovědi - najdu i tu nejhlubší změnu ve struktuře.

1 řádek0 znaků
1 řádek0 znaků
Možnosti porovnání

Tip: Použijte Ctrl+Enter pro rychlé porovnání

Reálné situace

🔌

"Backend změnil API a frontend se rozsypal"

Mám uloženou starou odpověď z endpointu. Porovnám ji s aktuální a vidím - přejmenovaliemail nacontact a přidali nové pole. Oprava trvala 5 minut, hledání by trvalo hodinu.

📦

"Co se vlastně změnilo v package.json?"

Kolega commitnul změny v dependencies a najednou nefunguje build. Hodím sem obě verze a zjistím, že upgradoval React z 18 na 19 a smazal jednu devDependency. Jasno.

🧪

"Test prochází lokálně, padá na CI"

Porovnám očekávaný výstup s tím co test dostal. Rozdíl je v timestampu hluboko v objektu - mockuju špatně. Bez vizuálního diffu bych to hledal půl dne.

Proč ne obyčejný text diff?

JSON má strukturu. Obyčejný diff porovnává řádky - tohle porovnává data.

🔍

Deep diff

Najde změnu i 10 úrovní hluboko

Validace

Chybějící čárka? Ukážu kde

📐

Formátování

Minifikovaný → čitelný

🔐

Lokálně

Nic neopouští prohlížeč

Postup použití

1. Vložte první JSON

Do levého editoru vložte původní verzi. Může být minifikovaný - tlačítko "Formátovat" ho zpřehlední.

2. Vložte druhý JSON

Do pravého editoru vložte novou verzi. Pokud má JSON chybu, editor vám řekne kde (číslo řádku, popis problému).

3. Prozkoumejte změny

Zelené řádky = přidáno. Červené = odebráno. Žluté = hodnota se změnila. Klikněte na objekt pro rozbalení.

4. Exportujte nebo kopírujte

Výsledek si můžete zkopírovat do schránky nebo stáhnout pro dokumentaci změn v pull requestu.

Ukázka: Co se změnilo v API odpovědi?

Klasika - volám API a najednou mi to vrací něco jiného než dřív. Co se stalo?

Předtím fungovalo

{
  "user": {
    "id": 123,
    "name": "Jan Novák",
    "email": "jan@example.com"
  },
  "status": "active"
}

Teď vrací tohle

{
  "user": {
    "id": 123,
    "name": "Jan Novák",
    "contact": "jan@example.com"
  },
  "status": "verified",
  "lastLogin": "2024-01-15"
}

Aha! Změnilo se:

  • Pryč: user.email - přejmenovali to!
  • Novinka: user.contact - takhle se to jmenuje teď
  • Změna: status je "verified" místo "active"
  • Novinka: přibyl lastLogin

FAQ pro vývojáře

Co když mám JSON s tisíci položkami v poli?

Zvládne to. Pole se porovnává položku po položce a přidané/odebrané elementy jsou jasně označené. U větších struktur to chvíli trvá, ale stále je to v prohlížeči.

Umí ignorovat pořadí klíčů v objektu?

Ano, objekty porovnávám podle klíčů, ne podle pořadí. Takže {"a":1,"b":2} a{"b":2,"a":1} jsou pro mě stejné.

Můžu sem dát response z curl?

Pokud je to validní JSON, tak ano. Stačí zkopírovat výstup z terminálu. Kdyby tam byly nějaké hlavičky navíc, prostě je smažte - validátor vám řekne kde je problém.

Je to bezpečné pro produkční data?

Celé porovnání běží v JavaScriptu u vás v prohlížeči. Data nikam neposílám, neloguji, neukládám. Klidně sem dejte i věci s API tokeny - nikdy to neopustí váš počítač.

📚

Víc o JSON porovnávání

Na blogu mám článek o tom jak efektivně porovnávat JSON - od API testování až po debugování configů. Plus pár tipů na práci s package.json.

Přečíst článek o JSON porovnávání

Příběh z praxe

Tři hodiny. Tolik mi trvalo najít bug v integraci s platební bránou. Response z API vypadala v pořádku, všechno procházelo, ale občas to selhalo. Nakonec jsem si uložil úspěšnou a neúspěšnou odpověď a porovnal je.

Rozdíl? Jedno pole mělo jiný typ - string místo number. Někde hluboko v objektu, 7 úrovní dolů. Obyčejný diff by mi to neukázal, protože data vypadala textově skoro stejně.

Tenhle nástroj rozumí JSONu jako struktuře. Najde změněnou hodnotu i v nejhlubším zanoření. A protože vše běží v prohlížeči, můžu sem bez obav hodit i produkční data s citlivými informacemi.

Píšu o tom i na blogu - třeba jak debugovat API nebo porovnávat package.json mezi verzemi projektu.