Less.js ile hata ayıklama

gerçeği Daha az.js tedavi etmek CSS bir tür programlama dili olarak bize sözdizimi hataları yapma imkanı verir; CSS alacağımız tek şey, stilin düzgün çıkmayacağı, ancak Daha az bizi yaratan şey, hiçbir tarzın görülmemesidir.
Bu nedenle, geliştirme sürecindeki hataları görmemize izin veren araçlara sahip olmak çok önemlidir, bu nedenle başarısız olan büyük kod blokları içinde yer bulmak için daha az zaman harcarız.
Doğa nedeniyle Less.js tarafından test odaklı geliştirme henüz mümkün değil, bu yüzden hata ayıklama Her zaman olmasa da çoğu zaman tarayıcıda yapılması gerekir, bu çok optimal olmayan bir şey ama elimizdeki çözüm bu.
1- Bu öğreticiyi yürütmek için temel bilgi ve kavramlara sahip olmamız gerekecek. CSSodaklanmış olmasına rağmen, Daha az Olası hataları gördüğümüzde yeterli bir referansa sahip olabilmemiz için stillerin nasıl oluşturulduğunu ve en azından temel özelliklerin nasıl kullanıldığını hala bilmemiz gerekiyor.
2- Kullanmak için yapılandırılmış bir ortamımız olmalı Daha az, yani projenin indirildiği ve kullanıma hazır olduğu bir klasör.
3- Eğer kullanırsak Google Chrome bir web sunucusu stiline ihtiyacımız olacak Apaçi güvenlik için bu tarayıcı Less'in yerel isteklerini engellediğinden, bu kurulumu istemiyorsak kullanabiliriz Firefox.
4- Son olarak, örneklerin yazılacağı bir metin düzenleyiciye de ihtiyacımız var. Yüce metin veya belki NotePad ++ her iki düzenleyicinin sözdizimini vurgulayabilmek için eklentileri birleştirme yeteneğine sahiptir. JavaScript ve CSS. Ayrıca, bu dosyaları seçilen konuma kaydetmek için sistemimizde izinlerimizin olması önemlidir.
Elimizdeki ilk seçeneklerden biri, kodumuzu ve sözdizimi hatalarımızı kütüphane ile doğrudan ortamımız içinde yazdırmaktır. daha az.jsBu, geliştirme ortamında kitaplığımızı doğrudan istemcide, bu durumda tarayıcıda çalıştırarak elde edilir.
Bu çok önemlidir, çünkü bir hata oluştuğunda doğrudan bu şekilde derlediğimizde az herhangi bir stil oluşturmaz, bu yüzden bir başarısızlık varsa sadece yapımızı göreceğiz HTML ama onsuz CSS. Bu tür bir hata ayıklamayı yapmak için aşağıdaki koddaki kılavuzu takip edebiliriz:

 Daha Az Js ile Hata Ayıklama 

Gördüğümüz ilk şey, adında özel bir dosya eklememizdir. stil hatası.less Bu dosya, hata ayıklayacağımız kendi kodunu içerecektir, o zaman adında bir değişken tanımlamalıyız. az ve ona bir eleman atayın ortam hangisini arayacağız gelişim, sonra kütüphanemizi dahil ediyoruz daha az.js ve bu değişkenle yaptığımız şey söylemek az bir hata oluştuğunda, diğer şeylerin yanı sıra kodunu derleyemediği mesajı bize atar.
arşivimizde stil hatası.less aşağıdaki hatalı kodu yerleştireceğiz:

 h1 {renk: kırmızı; yazı tipi boyutu: 3em;

Sonunda bir anahtarı kapatmamız gerektiğini fark ettiğimiz gibi, elbette analitik olarak bu hata biraz basit ve saçma görünüyor, ancak yüzlerce satırımız olduğunda bir noktada bir anahtarı kapatmayı unuttuğumuz çok kesin. Belgemizi yürütürken nasıl yapılacağını göreceğiz. Daha az bize tarayıcıda bir hata veriyor:

BÜYÜT

Derleyiciyi tarayıcıda gördüğümüz gibi Daha az Bize tanımadığı bir şey olduğunu ve muhtemelen bir şeyi unuttuğumuzu söyler, bu durumda kapatmadığımız anahtar olduğunu biliriz.
Burada küçük bir duraklama yapmalıyız, başlangıçta hataları nasıl elde edebileceğimizi gördük. Daha azAncak, elde edebileceğimiz hataların ne anlama geldiğini henüz bilmiyoruz, bu yüzden neyi arayacağımızı ve hangi olası çözümleri uygulayabileceğimizi bilmek için yeterli zemine sahip olabilmemiz için en önemlilerini tanımlayacağız.
Dosya hatasıBu hata, dosyalarımızda hatırlıyorsak, başka bir dosyadan başarısız bir içe aktarma anlamına gelir. az talimatı kullanabiliriz @içe aktarmak işlevselliklerimizi düzenlemek ve genişletmek için diğer dosyaları dahil etmek.
Sözdizimi hatasıBu hata, örneğin bir bloğun dışında bir özellik bildirirken, bir ifadeyi yanlış yazdığımızda veya bir özelliği yanlış şekilde yerleştirdiğimizde oluşur.
Aşağıdaki resimde bu tür bir hatanın nasıl göründüğünü görüyoruz, bunu aşağıdaki kodla elde ediyoruz:

 kırmızı renk; h1 {yazı tipi boyutu: 3em; }

Mülkiyet olduğunu açıkça görebildiğimiz yer kırmızı renk uygun konumunda değil, tarayıcıda çalıştırırsak nasıl göründüğünü görelim:

BÜYÜT

Ayrıştırma hatasıİlk örnekte patlattığımız hataydı, bu, parantezleri veya noktalı virgülleri ihtiyaç duyulan yere yerleştirmeyi unuttuğumuzda ortaya çıkıyor.
AdHatasıBu hata, bir değişken veya bir karıştırmak o dosyanın ortamında tanımlanmamış veya mevcut olmayan Daha az.
Vurgulamamız gereken bir diğer husus ise, Daha az Yalnızca sözdiziminin ve adların doğru olduğunu doğrular, ancak içeriğimizin doğru olup olmadığını doğrulamaz, örneğin aşağıdaki kodu görelim:

 h1 {renk: kırmızı; yazı tipi boyutu: 3em; genişlik: kırmızı; }

Yukarıdaki kod, herhangi bir sorun olmadan derlenecektir, ancak özelliğin açık olduğunu açıkça görüyoruz. Genişlik Bir renk değil, bir boyut ölçümüne sahip olmalıdır, aynısını tarayıcımızda çalıştırırsak dosya yürütülür ve çalışır:

BÜYÜT

Bu teknik tamamen hatasız olmadığı ve tespit edilemeyen hatalar olduğu için dikkatli olmalıyız.
yapmak için kullanabileceğimiz tekniklerden bir diğeri. hata ayıklama kodumuzun bir kısmı tarayıcı geliştirici araçlarıdır, şu anda aşağıdaki gibi ana tarayıcılar Krom Y Firefox nasıl olduğunu anlamamızı sağlayan araçlara sahiptir. HTML ve nasıl davrandığını ve bu şekilde kodumuzu görmek için onları kullanabiliriz. Daha az.
Bu bize daha yüksek bir hata ayıklama, özellikle değişkeni kullanamadığımızda ortam önceki bölümde gördüğümüz gibi, bu tür hata ayıklama ile önceki hataları tespit edemeyebiliriz, ancak önceki örnekte gördüğümüz gibi çakışan veya yanlış özelliklere sahip stiller gibi sorunları tespit edebiliriz. Daha az tespit etmedi genişlik: kırmızı; Örneğin.
Bu şekilde hata ayıklamayı göstermek için dosyamızın içinde aşağıdaki stili oluşturacağız. stil hatası.less:

 h1 {yazı tipi boyutu: 3em; renk: domates; } başlık {h1 {yazı tipi boyutu: 2em; }} # content-footer {span {font-family: Times, serif; }}

Daha sonra dosyamızda HTML kütüphaneler dediğimiz yer şu şekilde olmalıdır:

 Daha Az Js Hata Ayıklama © 2015 Solvetic 

Bir sonraki adım bizim çalıştırmaktır HTML tarayıcıda, aşağıdakileri almamız gereken yer:

Şimdi ilgili hata ayıklamayı yapmak için, başlıklardan herhangi birine sağ tıklamamız ve bize şunu söyleyen seçeneği aramamız gerekiyor. öğeyi incelemek, bununla tarayıcının hata ayıklama konsolu kaldırılacaktır.
Bir kez orada ikinci başlığımızı inceleyebiliriz ve ilginç bir şey göreceğiz, üstü çizilen bir özellik var ve bunun nedeni, üst üste bindiğinde o öğe için elimine edilmesidir, bununla, kaçan sorunları ve durumları nasıl bulabileceğimizi gösteriyoruz. derleyicisi Daha az. O zaman aşağıdaki resimde bu eylemin neye benzediğini görelim:

İlk adımlar için Daha az Bu araçlarla, yüzlerce satır yazmak zorunda kaldığımızda bir şeyler ters gidebileceğinden, sahip olabileceğimiz ihmal yoluyla hataların miktarını azaltarak kesinlikle en uygun geliştirme deneyimini elde edeceğiz.
Bununla bu öğreticiyi sonlandırıyoruz, birkaç hata ayıklama seçeneği gördük. Daha az zaten sahip olduğumuz kaynakları kullanarak, bu şekilde başka araçlar indirmemiz veya harici üçüncü taraf belgeleri aramamız gerekmez. Elbette bu tür gereksinimleri karşılamamıza yardımcı olacak başka araçlar ve tamamlayıcılar da var, ancak biraz daha araştırmanız gerekiyor ve aynı hedefe ulaşmak için öğrenme eğrisi daha büyük olacak.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.