JavaScript Düzenleyici - DigiKitApp

Sıkışık JavaScript kodunu okunaklı hale getirin.

Ne zaman kullanmalısın?

Küçültülmüş (minify edilmiş) veya kötü girintili bir JavaScript kodunu okunabilir hale getirmen, örneğin bir sitenin kodunu incelerken kullan.

Ne zaman kullanmamalısın?

Kendi yazdığın kodu her seferinde elle formatlamak yerine, editörüne otomatik formatlama eklentisi (Prettier) kurman uzun vadede daha verimli.

Adım adım kullanım

İncelemek istediğiniz kodu kopyalayın. Tarayıcının geliştirici araçlarındaki Kaynaklar sekmesi veya bir .min.js dosyası tipik kaynaklardır.
Kodu "JavaScript kodu" alanına yapıştırın.
"Çalıştır" butonuna tıklayın. Satırlara bölünmüş ve girintilenmiş kod sonuç alanında görünür.
Sonucu kopyalayıp editörünüze alın ve sözdizimi renklendirmesiyle birlikte okuyun; aramak istediğiniz fonksiyon veya değişken adlarını editörün arama özelliğiyle bulun.

Örnek

Sitenize eklediğiniz hazır bir sohbet widget'ı, belirli bir sayfada beklenmedik şekilde açılıyor. Widget'ın betiği tek satırlık, binlerce karakterlik bir dosya. Bu dosyayı araca verdiğinizde fonksiyonlar ve koşullar ayrı satırlara ayrılır, iç içe bloklar girintiyle belirginleşir. Artık sayfa adresine veya bir çerez değerine bakan koşulu bulup widget'ın neden o sayfada tetiklendiğini anlayabilirsiniz. Böylece widget sağlayıcısına daha net bir hata bildirimi yazabilir ya da kendi tarafınızdaki ayarı düzeltebilirsiniz.

Aynı yöntem, bir öğreticide sıkışık hâlde paylaşılmış kısa bir kod parçasını anlamaya çalışırken veya eski bir projede yorumsuz bırakılmış betiklere bakarken de işe yarar. Okunaklı hâle gelen kodda önce dışarıdan çağrılan fonksiyonları, sonra olay dinleyicilerini bulmak, akışı kavramanın pratik bir yoludur.

Biçimlendirici ne yapar?

Araç JavaScript kodunu her ifade ayrı satırda ve iç içe seviyeye göre iki boşluk girintiyle yeniden yazar. { sonrası yeni satır başlar ve girinti artar, ; sonrası yeni satıra geçilir, } girintiyi bir seviye azaltır. Örnek: function f(a){if(a){g();}else{h();}} yedi satırlık girintili bir yapıya dönüşür ve “} else {” aynı satırda kalır. Tırnaklı metinler, şablon dizeleri ve yorumlar bozulmaz; parantez içindeki noktalı virgüller (for döngüsü) ve parantez içindeki süslü parantezler (geri çağırma fonksiyonları) aynı satırda kalır.

Kullanırken dikkat

Araç bir ayrıştırıcı değil, karakter tabanlı bir düzenleyicidir. Düzenli ifade (regex) değişmezleri içinde tırnak ya da süslü parantez varsa çıktı bozulabilir.
Nesne değişmezleri de blok gibi satırlara bölünür: const o={a:1,b:2}; birkaç satıra yayılır.
Noktalı virgülsüz yazılmış kodda ifadeler tek satırda kalır; araç noktalı virgül eklemez.
Karmaşık ya da üretim kodu için Prettier gibi bir biçimlendirici daha güvenlidir.

Dikkat edilmesi gerekenler

Formatlama yalnızca düzeni değiştirir. Küçültme sırasında a, b, c gibi kısaltılmış değişken adları geri gelmez, bu yüzden kod okunur ama yine de çözümleme ister.
Kasıtlı olarak karartılmış (obfuscate edilmiş) kodlar formatlandıktan sonra da anlaşılması zor kalabilir.
Proje size aitse ve kaynak harita (source map) dosyası varsa, tarayıcının geliştirici araçları orijinal kodu doğrudan gösterebilir. Bu yol formatlamaktan daha bilgilendiricidir.
Başkasına ait kodu incelemek öğrenmek için faydalıdır, ancak kopyalayıp kendi projenizde kullanmadan önce lisans koşullarına bakın.

İlgili hazır promptlar: Kodlama Promptları.

Sık sorulan sorular

Girdiğim kod/veri kaydediliyor mu?

Hayır, hiçbir veri sunucuya gönderilmez veya saklanmaz; işlem tamamen tarayıcınızda gerçekleşir.

Büyük dosyalarda çalışır mı?

Evet, ancak çok büyük girdilerde (birkaç MB üzeri) tarayıcı performansı düşebilir.

Bu araç ücretsiz mi?

Evet, temel kullanım için tamamen ücretsizdir ve üyelik gerektirmez.