JSON Karşılaştır & Fark Bul
$.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"
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.
- İ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.
- 1Orijinal JSON'u sol panele, güncel JSON'u sağ panele yapıştırın.
- 2Görünüm seçin: yan-yana (görsel inceleme) veya birleşik (metinsel rapor).
- 3Bağlam isterseniz 'değişmeyenleri göster' seçin, aksi halde sadece değişimlere odaklanın.
- 4Üstteki 4 stat tile'ını okuyun (eklenen / silinen / değişen / aynı).
- 5İstediğiniz yolun üstüne tıklayarak console veya bug raporu için kopyalayın.
- 6Birleşik diff'i 'Rapor Kopyala' veya offline kayıt için '.txt indir' ile alın.