JSON Görüntüleyici nedir?
Ham JSON, makineler için harika, insan gözü için tam bir kâbustur. Beş seviyeli süslü parantezler, sondaki virgüller, tek uzun bir satır — nasıl olduğunu biliyorsunuz. JSON Görüntüleyici bunu gerçekten gezebileceğiniz bir şeye dönüştürür: her dizi bir satır olur, her nesne bir sütun grubuna dönüşür ve iç içe yapılar içine girebileceğiniz tablo içinde tablolar haline gelir.
Sadece veriyi GÖRMEK istediğiniz an için yapıldı. Ayrıştırmak değil, doğrulamak değil, dönüştürmek değil — görmek. Bir fetch yanıtı, bir GraphQL payload’u, bir log satırı, her ne olursa olsun içine atın. Görüntüleyici bunu öyle serer ki, API’nin beklediğiniz şeyi döndürüp döndürmediğini ve şeklin kodunuzun istediğiyle eşleşip eşleşmediğini bir bakışta anlarsınız.
Her şey tarayıcınızda çalışır — yükleme yok, hesap yok, bir öğleden sonra boyunca yapabileceğiniz yapıştır-ve-görüntüle döngüsü sayısında sınır yok.
Burada JSON Nasıl Görüntülenir
Verinizin yapılandırılmış görünümüne üç adımda. Editörün altındaki düğmeler burada okuduklarınızla eşleşir.
Yapıştırın veya örnek yükleyin
API istemcinizden (Postman, Insomnia, tarayıcı DevTools Network sekmesi) JSON’u kopyalayıp sola yapıştırın. Önce görüntüleyiciyi iş başında görmek isterseniz, küçük bir veri kümesi yüklemek için Örnek’e basın.
{"order": {"id": "ORD-4821", "customer": {"name": "Priya Shah", "tier": "gold"}, "items": [{"sku": "SKU-101", "qty": 2}, {"sku": "SKU-204", "qty": 1}], "total": 189.50}}JSON’unuz bozuksa, editörün hemen altında ayrıştırıcının nerede pes ettiğini gösteren bir mesaj görürsünüz.
Yapıyı gezin
Giriş her değiştiğinde sağ taraf anında yeniden çizilir. Nesne dizileri, her anahtar için bir sütunla satırlar halinde görünür. İç içe nesneler ve diziler, hücrenin içinde kendi mini tablolarına dönüşür, böylece order.customer.tier gibi bir zinciri görsel olarak takip edebilirsiniz. Bir kayıtta satırdan çok anahtar olduğunda yönelimi değiştirmek için Ana veya İç İçe kullanın — bazen anahtarları satır, değerleri sütun olarak okumak daha kolaydır. Düzen, RFC 8259’da tanımlanan JSON tiplerini takip eder.
Baktığınız şeyi daraltın
Her sütunun bir filtre kutusu vardır. Tier sütununa gold, SKU sütununa SKU-1, durum sütununa pending yazın — eşleşmeyen satırlar gizlenir. Filtreler büyük/küçük harfe duyarsızdır ve birikir (tier=gold VE status=paid). Bir sütun görüşünüzü bozuyorsa, Düzenle’ye, ardından başlıktaki kaldır (×) simgesine tıklayıp atın.
Geniş veri için tam ekrana geçin
20+ sütunlu veri kümeleri için Tam Ekran’a basın. Tablo tüm görünüm alanına genişler, böylece yan panel yolunuzda olmadan yatay kaydırabilirsiniz. Şişman bir GraphQL sorgusunu veya denormalize bir raporu debug etmek için harika.
Bittiğinde paylaşın veya dışa aktarın
İşaretlemeye değer bir şey mi buldunuz? Kısa bir link oluşturmak için Paylaş’a basın (1 saat, 1 gün veya 1 hafta) ve takım arkadaşınıza gönderin — aynı görünümü, aynı JSON’u, yeniden yapıştırmadan açar. Veya tabloyu Excel, Google Sheets veya LibreOffice için .xls olarak indirmek üzere Excel’e tıklayın. Ayrıştırma istemci tarafında JSON.parse() ile yapılır.
Görüntüleyicinin işe yaradığı anlar
API Yanıtlarına göz atma
Postman’da bir endpoint’e istek attınız, 8 KB JSON geri geldi ve iç içe bir shipping.address.country alanının dolu olup olmadığını bilmeniz gerekiyor. Yanıtı buraya yapıştırın, iki saniyede cevabınızı alın. Kafadan JSON ayrıştırmaya gerek yok.
Log akışlarını okuma
<a href="https://www.elastic.co/elasticsearch" target="_blank" rel="noopener">Elasticsearch</a>, CloudWatch veya herhangi bir JSON-line logger’dan gelen yapılandırılmış loglar tek satırlık bloblar olarak gelir. Birini buraya atın ve zaman damgası, servis, seviye, mesaj ve trace ID’yi düzgünce görün — sabahın ikisinde tutarsız bir servisi izlerken çok işe yarar.
Şema örneklerini gözden geçirme
Bir <a href="https://swagger.io/specification/" target="_blank" rel="noopener">Swagger/OpenAPI</a> spesifikasyonundaki veya ekibin README’sindeki örnek payload’lara mı bakıyorsunuz? Örnek bloğu yapıştırın ve şeklin üzerinden alan alan gezin. Girintili JSON’u baştan sona okumaktan daha hızlı ve opsiyonel/eksik alanları hemen fark edersiniz.
Paydaşlara veri gösterme
PM’iniz checkout API’sinin ne döndürdüğünü bilmek istiyor ama “işte bir JSON blob” cevap olmaz. Bir paylaşım linki oluşturun, Slack’e yapıştırın ve o düzgün bir tablo görsün — parantez ve iki nokta üst üste açıklamasına gerek kalmadan.
SSS
JSON görüntüleyici ile JSON parser arasında ne fark var?
Oldukça örtüşürler ama bakış açıları farklıdır. Parser, JSON metnini kullanılabilir bir yapıya çevirmeye (ve kötü sözdizimini işaretlemeye) odaklanır. Görüntüleyici ise çıktıya — ayrıştırılmış sonucun okunabilir hale nasıl getirildiğine — odaklanır. Bu araç kaputun altında ikisini de yapar ama arayüz, sadece doğrulamaya değil, büyük ya da derin iç içe veriyi gezmeye göre ayarlanmıştır.
Verim tarayıcımdan çıkıyor mu?
Hayır. Ayrıştırma ve görüntüleme JavaScript ile yerel olarak yapılır. Veri yalnızca “Paylaş”’a tıklayıp kısa bir link oluşturduğunuzda dışarı çıkar ve o zaman bile süre kontrolü sizde (1 saat ile 1 hafta arası). Hassas bir şeye bakıyorsanız basitçe paylaşmayın — sekmeyi kapatın, hepsi gider.
İç içe geçme ne kadar derin olabilir?
Kesin bir sınır yok. Görüntüleyici, iç içe dizileri ve nesneleri ne kadar derine inerseniz inin özyinelemeli olarak render eder. Çok derin yapılar bir noktada görsel olarak yoğunlaşır — beş altı seviyeden sonra, gerçekten önemsediğiniz dala odaklanmak için Filtre satırını kullanmayı, ya da İç İçe düğmesiyle iç içe yönelimi değiştirmeyi düşünün.
Sadece nesneleri değil, ilkel değer dizilerini de görebilir miyim?
Evet. ["read", "write", "admin"] gibi bir dizi tek sütunlu liste olarak render edilir. Karışık diziler (nesne + ilkel) da çalışır — her öğe kendi satırını alır ve görüntüleyici sütun kümesini nesnelerde bulunan anahtarlardan çıkarır.
JSON’u yeniledikten sonra neden bazı sütunlar gitmiş?
Daha önce sütunları kaldırdıysanız (düzenle modunda × simgesiyle), görüntüleyici mevcut oturum için bunu hatırlar ve temeldeki anahtarları JSON’dan da gizler. Yeni JSON yapıştırmak tespiti yeniden çalıştırır. Beklediğiniz bir sütun yoksa, düzenle modunun onu atıp atmadığını ya da anahtarın her kayıtta gerçekten olup olmadığını kontrol edin.
Ne büyüklükte bir JSON dosyası rahatça çalışır?
Birkaç MB’a kadar dosyalar hızlı render olur. 5 MB’ın üzerinde tarayıcının çalıştığını hissedersiniz. 10 MB üzeri biraz ağırlaşır ama görüntüleyici yine de idare eder — rutin olarak 50 MB+ veri kümeleriyle uğraşıyorsanız, önce jq veya gron gibi bir CLI aracı kullanın, sonra ilgili dilimi buraya yapıştırın.
İlgili JSON Araçları
Görüntüleme, JSON ile yapmak isteyebileceğiniz şeylerin sadece bir dilimi. Daha spesifik bir şey lazımsa şunları deneyin: