Kod Biçimlendirici
XML, HTML ve CSS'i biçimlendirip küçültün, JavaScript'i küçültün - hepsi tarayıcınızda.
İlgili araçlar
- JSON AraçlarıJSON'u biçimlendirin, küçültün, onarın ve tam hata konumlarıyla doğrulayın; ağaç görünümünde gezin ve JSON, CSV ile YAML arasında dönüştürün.
- Kodlayıcı / ÇözücüBase64, URL'ler ve HTML varlıklarını kodlayıp çözün, sayı tabanlarını dönüştürün.
- Metin AraçlarıKelimeleri ve karakterleri sayın, yazım biçimini değiştirin ve başlıkları URL slug'larına çevirin.
Bu araç hakkında
Kod Biçimlendirici, tek bir anahtarın arkasındaki dört dildir. XML, tarayıcının kendi XML ayrıştırıcısına verilir ve 2 ya da 4 boşluk girintisiyle yeniden oluşturulur veya küçültülür; yorumlar (yalnızca biçimlendirilmiş çıktıda) ve CDATA bölümleri korunur; ayrıştırılamayan bir belge için ayrıştırıcının kendi hata mesajı döner. CSS ve HTML'in her birinin bir Biçimlendirme modu ve bir Küçültme modu vardır. CSS biçimlendirici kuralları ve iç içe at-kurallarını girintiler, dizeleri, yorumları ve parantezli değerleri yazıldığı gibi aktarır; HTML biçimlendirici blok öğeleri kendi satırlarına koyar ve pre, textarea, script ile style içeriğini bayt bayt olduğu gibi bırakır. Her ikisi de sonuç gösterilmeden önce girdiye karşı denetlenir ve girdiyle eşleşmeyen bir kopya yazdırmak yerine girdiyi dokunmadan geri verir. HTML küçültme üç kuralı açıkça sunar - yorumları kaldır, koşullu yorumları koru, Boole özniteliklerini daralt - her biri bozabileceği şeyle birlikte. JavaScript yalnızca küçültülür: yorumları ve girintiyi kaldırır ama satır sonlarını korur ve hiçbir şeyi yeniden adlandırmaz. Burada hiçbir şey kuralları birleştirmez, kullanılmayan kodu kaldırmaz veya tanımlayıcıları yeniden adlandırmaz; XML modu yalnızca belgenin iyi biçimli olduğunu kontrol eder - belge bir DTD veya XSD şemasına karşı doğrulanmaz.
Dört dilin tamamı açık olan sayfanın içinde çalışır. XML, tarayıcının yerleşik DOMParser'ı ile ayrıştırılır; CSS ve HTML biçimlendiricileri ile üç küçültücü, sayfa paketindeki sıradan fonksiyonlardır. Kodunuz hiçbir zaman XGM API'sine gönderilmez, URL'ye yazılmaz ve bu tarayıcıda saklanmaz. Adres çubuğu yalnızca dili tutar, ?lang=html, ?lang=css veya ?lang=js olarak - XML varsayılandır ve parametre taşımaz - bu yüzden paylaştığınız bir bağlantı doğru modu boş bir girdiyle açar. Kopyalama, indirme ve JSON dışa aktarımı, zaten ekrandaki sonuçtan üretilir. Sayfanın kendiliğinden yaptığı tek istek, analitiği kabul ettikten sonra gönderilen sayfa görüntüleme olayıdır; bu olay sayfa yolunu ve araç adını taşır, kodunuzu asla.
Nasıl kullanılır
- Kod Biçimlendirici aracını açın.
- İncelemek istediğiniz girdiyi yapıştırın veya yazın.
- Tarayıcınızda hesaplanan sonucu okuyun; girdi XGM'e gönderilmez.
- Çıktıyı yalnızca doğru göründüğünü kontrol ettikten sonra kopyalayın.
- Daha geniş bir teşhis görünümü gerekiyorsa ilgili XGM araçlarını kullanın.
SSS
XML biçimlendirici boş öğelerimi neden kendi kendine kapanan etiketlere dönüştürdü?
Çıktı, özgün metninizden değil, ayrıştırılmış belge ağacından yazılır ve alt düğümü olmayan bir öğe boş öğe biçiminde yazılır. XML 1.0, hemen ardından kapanış etiketi gelen bir açılış etiketi ile kendi kendine kapanan biçimi aynı öğe olarak tanımlar; yani belgede değişen bir şey yok. XML'i gerçek bir ayrıştırıcıyla okuyan bir tüketici bunu fark etmez; ham metin üzerinde eşleştirme yapan biri fark edebilir.
Öğelerimin içindeki boşluklar biçimlendirmeden sonra neden farklı?
Metin düğümleri kırpılır ve öğeler arasındaki yalnızca boşluktan oluşan metin atılır; bu yüzden içeriğinizin çevresinde girinti eklenebilir ya da kaldırılabilir. Bu, veri belgeleri için güvenlidir ama karma içerik için değildir; orada bir kelimeyle satır içi bir öğe arasındaki boşluk metnin parçasıdır. Belgenizde boşluk anlamlıysa onu küçültün ya da olduğu gibi bırakın; CDATA bölümleri her iki durumda da değiştirilmeden aktarılır.
JavaScript küçültücü neyi garanti eder, neyi etmez?
Yorumları ve girintiyi kaldırır ama her satır sonunu korur; böylece otomatik noktalı virgül ekleme, kaynağınızdaki gibi tam olarak aynı çözülür - kendi satırındaki bir return yine undefined döndürür. Değişkenleri yeniden adlandırmaz, ölü kodu atmaz, sabitleri katlamaz veya söz dizimi düzeyini değiştirmez; bu yüzden kazanç, bir derleme aracının sağladığından çok daha küçüktür. /*! ile başlayan ya da @license veya @preserve içeren yorumlar bilerek korunur.
CSS küçültücü neden “a :hover” içindeki boşluğu korurken “color : red” içindekini kaldırdı?
İki noktadan önceki bir boşluk, bir seçicide alt öğe birleştiricisidir, bir bildirimde ise sadece gürültüdür; bu yüzden küçültücü hangisini okuduğuna karar vermek için bir sonraki {, ; veya } işaretine kadar ileriye bakar. Dizgilere, calc() içindeki boşluklara ve seçici birleştiricilerinin çevresindeki boşluklara dokunulmaz; } işaretinden önceki son ; kaldırılır ve yorumlar /*! ile başlamadıkça silinir.
HTML'imin içindeki script neden hâlâ küçültülmedi ve metnim neden birbirine girdi?
HTML modu her pre, textarea, script ve style bloğunu ayırır ve dokunmadan geri koyar; bu yüzden gömülü CSS ve JavaScript küçültülmez - onları ayrıca CSS veya JavaScript modundan geçirin. Geriye kalanın yorumları, koşullu yorumlar hariç, kaldırılır ve etiketler arasındaki boşluklar daraltılır; bu da iki bağlantı ya da iki span gibi bitişik satır içi öğeler arasında görünen boşluğu ortadan kaldırır. Tasarruf rakamı ham UTF-8 baytlarını karşılaştırır, sıkıştırılmış bir yanıtın gerçekte neye mal olacağını değil.
Tam Kod Biçimlendirici rehberini okuyun (İngilizce)