Küçültülmüş kodunuzu çevrimiçi okunur hâle getirin

Belirli bir kod biçimini düzenleyin

Her biçimin, o dile özgü ayrıntıları açıklayan ayrı bir sayfası vardır:

• JavaScript kodunu biçimlendirJavaScript
• CSS kodunu biçimlendirCSS
• HTML kodunu biçimlendirHTML
• XML kodunu biçimlendirXML
• JSON kodunu biçimlendirJSON

Kod küçültme nedir?

Geliştiriciler kodu diğer geliştiricilerin okuyabilmesi için yazar. Yorumlar, girintiler, bloklar arasındaki boş satırlar ve içeriğini anlatan değişken adları bunun içindir. Bunlar insanlara yardımcı olur, tarayıcıya değil. Kod küçültme, derleme sırasında makinenin ihtiyaç duymadığı boşlukları, satır sonlarını ve yorumları kaldırır. Çoğu zaman değişken ve işlev adları da tek harfle değiştirilir. Programın davranışı aynı kalır, yalnızca yazılış biçimi değişir.

Bunun somut bir getirisi vardır. Küçültülmüş bir JavaScript paketi, kaynak koddan genellikle yüzde 30 ila 70 daha küçüktür. Ağdan daha az veri taşınır, ilk görüntü daha hızlı oluşur ve Core Web Vitals ölçümleri iyileşebilir. Bu yüzden yayındaki sitelerin çoğu küçültülmüş JS, CSS ve HTML sunar. Karşılığında, indirdiğiniz dosya okunması güç tek bir satıra dönüşür. Dosyayı anlamak, hata ayıklamak veya ne yaptığını denetlemek istediğinizde önce okunur hâle getirmeniz gerekir.

Bu kod biçimlendirme aracı ne yapar?

LFUnminify, küçültülmüş kodu alıp etrafında yeniden okunabilir bir yapı kurar. Girintileri düzenler, ifadeleri ayrı satırlara yerleştirir, blokları ve işleçleri boşluklarla ayırır, algıladığı dile uygun tutarlı biçimlendirme kuralları uygular. Dört bin karakterlik tek satırlık bir paket, içinde gezinebileceğiniz, arama yapabileceğiniz ve mantığını izleyebileceğiniz yüzlerce düzenli satıra dönüşür.

Araç, birçok JavaScript ekibinin kullandığı Prettier biçimlendiricisini doğrudan tarayıcınızda çalıştırır. Böylece çıktı, kendi editörünüzün normal bir kaynak dosyasında üreteceği görünüme benzer. Dil otomatik algılanır: kodu yapıştırmanız yeterlidir, araç JavaScript, CSS, HTML, XML veya JSON olduğunu belirleyip uygun biçimde düzenler.

Bir sınırı açıkça belirtmek gerekir. Kodu yeniden biçimlendirmek, özgün kaynağı geri getirmek değildir. Yorumlar, özgün değişken adları ve geliştirici notları derleme sırasında silindiyse hiçbir araç bunları geri getiremez. Elde ettiğiniz kod düzenli, okunabilir ve içinde gezinilebilir durumdadır, ancak küçültme aracının verdiği kısa adlar korunur. Bu genellikle mantığı izlemek, bir işlevi bulmak veya bir betiğin nereye hangi veriyi gönderdiğini görmek için yeterlidir.

Desteklenen kod biçimleri

Tek editörde beş dil. LFUnminify, yapıştırdığınız içeriği okuyup dilini belirler ve o sözdizimine uygun ayrıştırıcıya aktarır. Menüden biçim seçmeniz gerekmez; dosya uzantısı yanlış olsa bile içerik esas alınır:

• JavaScript, ES6 ve sonraki sözdizimleri, modüller, asenkron kod ve JSX dâhil. webpack, Vite, esbuild veya Terser tarafından oluşturulan paketler için uygundur.
• CSS, modern sözdizimi, özel özellikler, medya sorguları ve iç içe kurallar dâhil. Tailwind, Sass veya PostCSS ile derlenen stil sayfalarını okumak için idealdir.
• HTML, belgeyle birlikte biçimlendirilen satır içi script ve style blokları dâhil. Bu bloklar uzun tek satırlar olarak bırakılmaz.
• XML, site haritaları, RSS akışları, SVG dosyaları, SOAP zarfları ve satır sonları olmadan oluşturulmuş yapılandırma dosyaları dâhil.
• JSON, derin iç içe API yanıtları, paket bildirim dosyaları, yapılandırmalar ve günlük verileri dâhil.

Kod biçimlendiriciye ne zaman ihtiyaç duyarsınız?

Kodu okunur hâle getirmek çoğunlukla somut bir soruyu yanıtlamanın en hızlı yoludur. Başkasının yazdığı veya sizin yazıp artık okuyamadığınız kodda şu durumlarla karşılaşabilirsiniz:

• Canlı ortamdaki bir hatayı ayıklamak. Yığın izi, paketin 1. satırındaki 24815. sütunu gösterir. Dosyayı biçimlendirmek gerçek satır numaralarıyla gezinmenizi ve hatayı üreten işlevi bulmanızı kolaylaştırır.
• Üçüncü taraf betiği denetlemek. Bir analiz etiketi, sohbet bileşeni veya satış ortaklığı betiğini sitenize eklemeden önce hangi verileri topladığını, hangi alan adlarıyla iletişim kurduğunu ve depolamaya ne yazdığını okuyun.
• Derlenmiş bir stil sayfasını okumak. Yardımcı sınıf tabanlı sistemler, tek satırlık çok büyük CSS dosyaları üretir. Biçimlendirme, basamaklanmayı görmenizi, hangi kuralın öncelik kazandığını ve sizin kuralınızın neden uygulanmadığını anlamanızı sağlar.
• Bir API yanıtını incelemek. Ağ sekmesinden kopyalanan JSON verisi, biçimlendirilmeden zor okunur. Düzenlendiğinde yapı, iç içe düzeyler ve eksik alanlar saniyeler içinde görünür olur.
• Gerçek koddan öğrenmek. İyi yazılmış bir kütüphanenin bir sorunu nasıl çözdüğünü okumak gelişmenin hızlı bir yoludur. Biçimlendirilmiş dosya, bu incelemeyi rahatça yapmanızı sağlar.

LFUnminify nasıl kullanılır?

Editöre kod eklemenin üç yolu vardır. Sol panele doğrudan yapıştırabilir, Dosya seç ile bilgisayarınızdan dosya açabilir veya dosyayı girdi alanına sürükleyip bırakabilirsiniz. Canlı bir sitenin dosyasını incelemek için tarayıcının kaynak görüntüleme özelliğinden veya geliştirici araçlarından içeriği kopyalayıp buraya yapıştırın. Alternatif olarak .js, .css, .html, .xml veya .json dosyasını kaydedip Dosya seç ile açın.

Biçimlendirme kendiliğinden başlar, bir düğme aramanız gerekmez. Araç yazmayı bırakmanızı bekler, dili algılar ve sağ panelde sözdizimi renklendirmesiyle düzenlenmiş sonucu gösterir. Çıktının tamamını tek tıklamayla panoya kopyalayabilir veya uygun adla dosya olarak indirip editörünüzde açabilirsiniz.

Uzun dosyalarda iki küçük özellik işe yarar. Belirli bir konuma atıfta bulunmak veya iki sürümü yan yana karşılaştırmak için satır numaralarını açın; tercihiniz sonraki ziyaretiniz için hatırlanır. Algılanan biçim beklediğinizden farklıysa bu da bir ipucudur. JSON sandığınız bir dosyanın JavaScript olarak algılanması, içeriğin aslında JSONP yanıtı veya bir atama içine alınmış yapılandırma olmasından kaynaklanabilir.

Kodunuz bilgisayarınızdan ayrılmaz

Bu noktayı açıkça belirtmek önemlidir. Biçimlendirme, sayfayla birlikte bir kez yüklenen JavaScript kullanılarak doğrudan tarayıcınızda yapılır. Kodunuz yüklenmez, sunucuda kuyruğa alınmaz, veritabanına yazılmaz ve kayda geçirilmez. Sayfa yüklendikten sonra internet bağlantısını kesseniz de araç çalışmaya devam eder. Bu, hiçbir şey gönderilmediğini görmenin basit bir yoludur.

Bu nedenle size özel kodu, kurum içi bir paketi, müşteri projesini veya yapısını paylaşmak istemediğiniz bir yapılandırmayı yapıştırabilirsiniz. Yapıştırdığınız ya da açtığınız içerik tarayıcınızdan çıkmaz. Araç sizin adınıza dosya da getirmez; sunucumuz hangi kodu veya siteleri incelediğinizi öğrenmez. Hesap açmanız gerekmez ve yapıştırdığınız içerik izlenmez.

LFUnminify neden ücretsiz?

LFUnminify, Ludovic Frank tarafından geliştirilen ücretsiz araç ailesinin bir üyesidir. Aynı ailede parola oluşturucu, favicon oluşturucu, renk paleti aracı ve başka yardımcılar da bulunur. Düşünce basittir: geliştiricilerin haftada birkaç kez ihtiyaç duyduğu küçük araçlar, kayıt formu, reklam duvarı veya kullanım kredisi arkasında kalmamalıdır. Bu üründe hesap, kota veya ücretli pakete geçiş teklifi yoktur.

Bu araçlar aynı zamanda çalışma biçimimizin somut örnekleridir. Her biri müşteri projelerine gösterilen özenle geliştirilen ve bakımı yapılan gerçek bir uygulamadır. Bu, bir portföy sayfasından daha fazlasını anlatır. Özel web geliştirme, hazır şablonun ötesinde bir uygulama veya teknik danışmanlık arıyorsanız sayfanın altındaki bağlantıdan bize ulaşabilirsiniz.

Sık sorulan sorular