IT
OmnvertGörsel • Belge • Ağ

JSON Karşılaştır & Fark Bul

Compare two JSON documents side by side. Path-aware adds, removes and value changes — entirely in your browser.
Developer Tools →
Original
190 chars
Modified
240 chars
Added
3
Removed
1
Changed
3
Unchanged
5
Diff
$.name = "Acme Inc."
$.products[1] = "Rocket Skates"
 
$.address.zip = "91501"
 
$.rating = 4.2
 
$.name = "Acme Corp."
$.products[1] = "Mega Rocket Skates"
$.products[3] = "Dynamite"
$.address.zip = "91505"
$.address.country = "USA"
 
$.ceo = "Wile E. Coyote"
100% client-side: both JSON inputs never leave your browser.
About this tool

JSON karşılaştırmak ilk bakışta metin işi gibi görünür ama gerçek hayatta öyle değildir. İki JSON belgesini satır-tabanlı bir diff aracına atın ve sonuç neredeyse işe yaramaz olur: bir nesnedeki anahtar sırası değişimi tüm diff'i yakar, üst kısma eklenen tek bir alan altındaki tüm satır numaralarını kaydırır ve yeniden sıralanan ama değer değiştirmeyen bir dizi tam yeniden yazma gibi görünür. Sebep basit: satır-tabanlı diff JSON'ı metin olarak görür, ama JSON aslında bir ağaçtır. Doğru karşılaştırma birimi satır numarası değil, ağaçtan geçen yoldur — a.b[2].c gibi. Yol-duyarlı bir diff anahtar sırası değişiminin anlamsal olarak fark olmadığını bilir, dizi indeksi 2'nin her iki tarafta da aynı yuva olduğunu bilir ve user.profile.email'de değişen tek şeyin e-posta olduğunu fark eder.

Bu araç tam olarak o yol-duyarlı karşılaştırmayı yapar. Orijinal JSON'u sola, güncellenmişini sağa yapıştırın; diff motoru iki ağaçta paralel olarak yürür ve değerlerin uyuşmadığı her yaprakta bir işlem kaydeder. Dört işlem türü vardır: eklendi (sağda var, solda yok), silindi (solda var, sağda yok), değiştirildi (her iki tarafta var ama değerler farklı) ve aynı (her iki taraf eşleşiyor — varsayılan olarak yan-yana görünümde gizli, bağlam istediğinizde gösterilebilir). Çıktı yan-yana görsel karşılaştırma veya birleşik metinsel rapor olarak alınabilir; raporu Slack, GitHub yorumu veya bug raporuna olduğu gibi yapıştırabilirsiniz.

Yol sözdizimi şöyle çalışır: Nesne anahtarları nokta gösterimi kullanır (a.b.c), dizi indeksleri köşeli parantez (items[0].name). İki tanesi birleşir: orders[0].lineItems[2].sku — bu tam olarak o alana ulaşmak için JavaScript'te yazacağınız ifadedir. Yol-duyarlı bir diff'in en güzel yanı budur: ürettiği yolları doğrudan kodunuza, console ifadenize veya JSONPath sorgunuza yapıştırabilirsiniz. Nokta veya boşluk içeren özel anahtarlar tırnak içine alınır: data['weird.key'].value. JSONPath, JMESPath veya jq ile uyumlu çalışır.

Bu aracın gerçek hayatta en çok yararı inceleme ve denetim işlerinde görülür. API yanıt şemasının versiyonlar arasında değişimini doğrulamak: eski ve yeni yanıtları yapıştırın, hangi alanların ortaya çıktığını, kaybolduğunu veya tip değiştirdiğini görün. Bir prod incident'tan sonra config değişimini denetlemek: dünkü ve bugünkü config'i yapıştırın, hangi değerin değiştiğine dair tam bir liste alın. Staging vs production karşılaştırması: feature-flag dump'larını yapıştırın, sapmış flag'i tespit edin. Migration script doğrulaması: kayıt öncesi/sonrası yapıştırın, her alanın doğru taşındığını görün. Tüm bu vakalarda metinsel diff gürültü üretirken yol-duyarlı diff sinyal üretir.

Sayısal eşitlik değer-tabanlıdır, string-tabanlı değil — yani 1 ve 1.0 eşit kabul edilir, ama 1 ve "1" eşit değildir (tip farkı gerçek bir farktır). Null ayrı bir değerdir, eksik anahtarın eş anlamlısı değildir — solda null olan ve sağda eksik olan anahtar silinme olarak raporlanır. İç içe nesneler ve diziler yapısal olarak karşılaştırılır: iki boş nesne {} eşleşir, iki boş dizi [] eşleşir, ama {} ve [] eşleşmez. Tarih dizgileri, ISO timestamp'leri ve UUID'ler opak string olarak karşılaştırılır — bulanık veya semantik karşılaştırma istiyorsanız ham farklar üzerine kendi script'inizi yazabilirsiniz.

Yan-yana görünüm kod diff'i deneyimini taklit eder: sol panel orijinal belgeyi kırmızı vurgulu silinen satırlarla gösterir, sağ panel güncellenmiş belgeyi yeşil vurgulu eklenen satırlarla gösterir, yerinde değişen satırlar aynı dikey hizada eski/yeni değer çiftiyle hafif amber vurguda görünür. Birleşik görünüm metinsel rapordur: her değişim `[OP] yol = değer` veya `[~] yol: eskiDeğer → yeniDeğer` formatında tek satırdır. GitHub yorumu, Slack thread veya 80 sütunluk wrap'te okunaklı kalır.

Performansı önemli çünkü gerçek hayattaki JSON belgeleri her zaman küçük olmuyor. Diff motoru birkaç MB'a kadar belgeleri sorunsuz işler, 1MB'a kadar olanları senkron, daha büyükleri Web Worker'da çalıştırır, yan-yana görünümü 10.000 satırlık diff'lerde de patlamayacak şekilde virtualize eder. Çok büyük belgeler (yüzlerce MB) için jd veya diff-json gibi komut satırı araçları daha hızlıdır. Ama günlük API yanıtı, config veya kayıt karşılaştırması — aktif projede günde onlarca kez yapılan iş — tarayıcı uygulaması için anında hissedilen hızdadır.

Gizlilik mimariye gömülüdür, sonradan eklenmemiştir. Diff tamamen tarayıcınızda çalışır; JSON yüklenmez, sonuç loglanmaz, telemetri toplanmaz. Bu özellik gerçek prod verisi karşılaştırırken kritik: müşteri kayıtları, dahili sistem durumu, API token'ları, üçüncü taraf servise yapıştırmak istemediğiniz hiçbir şey. Tarayıcının network sekmesini açıp bir diff sırasında ağı izleyerek doğrulayabilirsiniz: araç sayfasını yükleyen statik asset'ler dışında dış istek yoktur.

Sıkça kullanılan kalıplar: Önce normalize edin — anahtarları alfabetik sıralayan bir serializer'a sahipseniz hem metinsel diff'leriniz işe yarar hem de yol-duyarlı diff'leriniz daha deterministik olur. Önemli API yanıtlarını test fixture olarak saklayın ve gelen prod yanıtlarını contract test gibi diff'leyin; CI'da fark olduğunda kıran iş, kazara şema değişimlerini hızla yakalar. JSON ile ilgili bug raporlarken beklenen vs gerçek farkı ekleyin, yalnızca gerçeği değil; bu araç doğrudan yapıştırılabilir birleşik diff üretir.

Bu araç Omnvert'in diğer geliştirici utiliti'leriyle doğal şekilde eşleşir. Diff sonrası belgeyi JSON Görüntüleyici ile interaktif gezebilir veya JSON to TypeScript ile bir tip tanımı üretip iki belgeyi yapısal düzeyde karşılaştırabilirsiniz. Schema.org JSON-LD Builder ile ürettiğiniz yapısal veriyi eski versiyonla karşılaştırmak da yaygın bir akıştır. Regex Tester ise bir farkın yalnızca global olarak değiştirilmesi gereken bir token olduğunu gösterdiğinde cerrahi düzenleme için faydalıdır.

Kullanım senaryoları
  • İki API yanıtını karşılaştırarak versiyonlar arası şema sapmasını yakalayın.
  • Bir incident sonrası config değişimini denetleyin — hangi anahtarın taşındığını görün.
  • Staging vs production feature-flag dump'larını karşılaştırarak ortam sapmasını bulun.
  • Bir migration'ı kayıt öncesi/sonrası diff'leyerek doğrulayın.
  • Yapısal veri (JSON-LD) düzenlemelerini iki sayfa revizyonu arasında inceleyin.
  • Üretilen payload'un beklenen fixture'la karakter düzeyinde eşleştiğini doğrulayın.
  • 'Bir şey değişti' bug'larını dünkü/bugünkü yanıtı diff'leyerek triage edin.
  • Metinsel diff ile yapısal diff farkını somut örneklerle öğretin.
Nasıl çalışır
  1. 1Orijinal JSON'u sol panele, güncel JSON'u sağ panele yapıştırın.
  2. 2Görünüm seçin: yan-yana (görsel inceleme) veya birleşik (metinsel rapor).
  3. 3Bağlam isterseniz 'değişmeyenleri göster' seçin, aksi halde sadece değişimlere odaklanın.
  4. 4Üstteki 4 stat tile'ını okuyun (eklenen / silinen / değişen / aynı).
  5. 5İstediğiniz yolun üstüne tıklayarak console veya bug raporu için kopyalayın.
  6. 6Birleşik diff'i 'Rapor Kopyala' veya offline kayıt için '.txt indir' ile alın.
SSS
Neden klasik diff aracı yetmiyor?
Satır-tabanlı diff araçları JSON'u metin olarak görür. Anahtar sırası değişimi, üste alan eklenmesi veya dizinin kaydırılması — satır numaraları değişir ve hiçbir şey anlamsal hareket etmediğinde bile diff kırmızıya boyanır. Yol-duyarlı diff ağaçta yürür ve yalnızca gerçek farkları, kodunuza yapıştırabileceğiniz yolla raporlar.
1 ve 1.0 eşit sayılıyor mu?
Evet. Sayılar değer olarak karşılaştırılır, dolayısıyla 1 ve 1.0 eşleşir. Ama 1 ve "1" eşleşmez — sayı/string tip farkı gerçek bir farktır. Null ile eksik de farklıdır: değeri null olan anahtar, eksik anahtarla aynı şey değildir.
Sıralama önemsiz dizileri karşılaştırabilir miyim?
Varsayılanda diff sıralı çalışır: items[0] solda, sağdaki items[0] ile karşılaştırılır. Sırasız dizi (set) karşılaştırması için her iki tarafı da bir stabil anahtara göre sıralayıp yapıştırın. Sırasız mod ileride eklenebilir.
Yol sözdizimi nasıl?
Nesne anahtarları nokta (a.b.c), dizi indeksleri köşeli parantez (items[0].name). Özel karakter içeren anahtarlar tırnaklı: data['weird.key'].value. JSONPath uyumludur, jq ile küçük uyarlamalarla çalışır.
Ne kadar büyük JSON karşılaştırabilirim?
Her tarafta birkaç MB rahat. Motor ~1MB'a kadar senkron, daha büyüklerini Web Worker'da çalıştırır. Yüzlerce MB'lık belgeler için CLI araçları daha hızlı; günlük API yanıtı ve config'ler bu aralık içinde rahat.
Yapıştırdığım veri sunucuya gönderiliyor mu?
Hayır. Diff tamamen tarayıcınızda çalışır; hiçbir şey yüklenmez, loglanmaz, cihazınızdan ayrılmaz. Network sekmesinden doğrulayabilirsiniz — statik sayfa asset'leri dışında dış istek yapılmaz.
Diff'ten JSON Patch üretilebilir mi?
Doğrudan değil — bu araç insan tarafından okunabilen diff üretir, makinaca uygulanabilir JSON Patch (RFC 6902) değil. Çıktı yol ve işlem türü içerir, ihtiyaç olursa dönüştürmeyi script'lemek kolaydır.
Bazı değişimler neden 'değişti' yerine hem 'eklendi' hem 'silindi' olarak görünüyor?
Bir değerin tipi değiştiğinde (string → object, number → array), motor anlamlı bir 'eski → yeni' çifti gösteremediği için tek bir 'değişti' yerine eski değerin silinmesi ve yeninin eklenmesi olarak kaydeder. Aynı tip değer değişimleri tek 'değişti' olarak raporlanır.