Debugowanie za pomocą Less.js

Fakt, że Less.js traktować CSS jako rodzaj języka programowania daje nam możliwość popełniania błędów składniowych, które przy użyciu tylko CSS jedyne, co byśmy dostali, to to, że styl nie wyszedłby poprawnie, ale w Mniej to, co by nas wygenerowało, to brak stylu.
Dlatego bardzo ważne jest posiadanie narzędzi, które pozwalają nam dostrzec błędy w procesie rozwoju, dzięki czemu tracimy mniej czasu na lokalizowanie w dużych blokach kodu, który zawodzi.
Ze względu na naturę wysłana przez Less.js rozwój zorientowany na testy nie jest jeszcze możliwy, dlatego robienie odpluskwić Wielokrotnie, jeśli nie zawsze, trzeba to zrobić w przeglądarce, co nie jest zbyt optymalne, ale takie rozwiązanie mamy pod ręką.
1- Do przeprowadzenia tego samouczka będziemy potrzebować podstawowej wiedzy i pojęć CSS, bo choć jest skupiony na Mniej nadal musimy wiedzieć, jak zbudowane są style i jak są używane przynajmniej podstawowe właściwości, abyśmy mogli mieć odpowiednie odniesienie, gdy zobaczymy możliwe błędy.
2- Musimy mieć skonfigurowane środowisko do użycia Mniej, czyli folder z pobranym projektem i dostępnym do użycia.
3- Jeśli używamy Google Chrome będziemy potrzebować stylu serwera WWW Apache ponieważ ta przeglądarka dla bezpieczeństwa blokuje lokalne żądania Less, jeśli nie chcemy tej konfiguracji, możemy użyć Firefox.
4- Na koniec potrzebujemy również edytora tekstu, w którym można pisać przykłady, może być Wzniosły tekst a może NotePad ++ oba edytory mają możliwość włączenia wtyczek, aby móc podświetlić składnię JavaScript i CSS. Ponadto ważne jest, abyśmy mieli w naszym systemie uprawnienia do zapisywania tych plików w wybranej lokalizacji.
Jedną z pierwszych dostępnych opcji jest drukowanie naszego kodu i błędów składniowych bezpośrednio w naszym środowisku za pomocą biblioteki less.jsOsiąga się to w środowisku programistycznym, uruchamiając naszą bibliotekę bezpośrednio na kliencie, w tym przypadku w przeglądarce.
Jest to bardzo ważne, ponieważ gdy kompilujemy bezpośrednio w ten sposób, gdy wystąpi błąd mniej nie generuje żadnego stylu, więc w przypadku awarii zobaczymy tylko naszą strukturę HTML lecz bez CSS. Aby wykonać tego typu debugowanie, możemy postępować zgodnie z przewodnikiem w następującym kodzie:

 Debugowanie za pomocą Less Js 

Pierwszą rzeczą, którą widzimy, jest to, że dołączamy niestandardowy plik o nazwie style-error.less Ten plik jest tym, który będzie zawierał własny kod do którego będziemy debugować, wtedy musimy zdefiniować zmienną o nazwie mniej i przypisz mu element zazdrościć które zadzwonimy rozwój, następnie dołączamy naszą bibliotekę less.js i z tą zmienną, co robimy, to mówimy mniej że gdy wystąpi błąd, rzuca nam komunikat, dla którego nie może skompilować kodu między innymi.
W naszym archiwum style-error.less umieścimy następujący błędny kod:

 h1 {kolor: czerwony; rozmiar czcionki: 3em;

Jak zauważyliśmy, musimy zamknąć klawisz na końcu, oczywiście analitycznie ten błąd wygląda trochę prosto i głupio, ale gdy mamy setki linii, jest bardzo pewne, że w pewnym momencie zapomnimy zamknąć klawisz. W momencie wykonywania naszego dokumentu zobaczymy jak Mniej zgłasza nam błąd w przeglądarce:

POWIĘKSZAĆ

Jak widzimy kompilator w przeglądarce Mniej Mówi nam, że jest coś, czego nie rozpoznaje i że prawdopodobnie o czymś zapomnieliśmy, w tym przypadku wiemy, że był to klucz, którego nie zamknęliśmy.
Tutaj musimy zrobić małą przerwę, już początkowo widzieliśmy, jak możemy uzyskać błędy w MniejNie wiemy jednak jeszcze, co oznaczają błędy, które możemy uzyskać, dlatego zdefiniujemy te najważniejsze, aby mieć wystarczające podstawy, by wiedzieć, czego będziemy szukać i jakie możliwe rozwiązania możemy zastosować.
Błąd plikuTen błąd dotyczy nieudanego importu z innego pliku, jeśli pamiętamy w naszych plikach mniej możemy skorzystać z instrukcji @import dołączyć inne pliki w celu uporządkowania i rozszerzenia naszych funkcjonalności.
Błąd składniTen błąd pojawia się, gdy nieprawidłowo piszemy instrukcję lub umieszczamy właściwość w niewłaściwy sposób, na przykład podczas deklarowania właściwości poza blokiem.
Na poniższym obrazku widzimy jak wygląda tego typu błąd, osiągamy go następującym kodem:

 kolor czerwony; h1 {rozmiar czcionki: 3em; }

Gdzie możemy wyraźnie zobaczyć, że nieruchomość kolor czerwony jest niewłaściwa pozycja, zobaczmy, jak to wygląda, gdy uruchomimy go w przeglądarce:

POWIĘKSZAĆ

Błąd przetwarzaniaTo był błąd, który detonowaliśmy w początkowym przykładzie, dzieje się tak, gdy zapomnimy umieścić nawiasy klamrowe lub średniki tam, gdzie są potrzebne.
NazwaBłądTen błąd występuje, gdy wywołujemy zmienną lub a mieszanie który nie jest zdefiniowany lub nie jest dostępny w środowisku tego pliku Mniej.
Kolejną rzeczą, którą musimy podkreślić, jest to Mniej Weryfikuje tylko poprawność składni i nazw, jednak nie sprawdzi, czy nasza treść jest poprawna, na przykład zobaczmy następujący kod:

 h1 {kolor: czerwony; rozmiar czcionki: 3em; szerokość: czerwona; }

Powyższy kod skompiluje się bez problemu, chociaż wyraźnie widzimy, że właściwość szerokość Musi mieć wymiar rozmiaru a nie kolor, jeśli wykonamy to samo w naszej przeglądarce plik jest wykonywany i działa:

POWIĘKSZAĆ

Musimy więc być czujni, ponieważ ta technika nie jest całkowicie nieomylna i są błędy, które nie są wykrywane.
Kolejna z technik, których możemy użyć do wykonania odpluskwić naszego kodu to narzędzia programistyczne przeglądarki, obecnie główne przeglądarki takie jak Chrom Tak Firefox posiadamy narzędzia, które pozwalają nam zrozumieć, w jaki sposób HTML i jak się zachowuje i w ten sposób możemy je wykorzystać, aby zobaczyć nasz kod Mniej.
To daje nam wyższy poziom odpluskwić, zwłaszcza gdy nie możemy skorzystać ze zmiennej zazdrościć które widzieliśmy w poprzedniej sekcji, przy tego rodzaju debugowaniu możemy nie wykryć poprzednich błędów, ale możemy wykryć problemy, takie jak nakładające się style lub mające nieprawidłowe właściwości, jak widzieliśmy w poprzednim przykładzie, gdzie Mniej nie wykrył a szerokość: czerwona; na przykład.
Aby zademonstrować ten sposób debugowania, zbudujemy w naszym pliku następujący styl: style-error.less:

 h1 {rozmiar czcionki: 3em; kolor: pomidorowy; } nagłówek {h1 {rozmiar-czcionki: 2em; }} # content-footer {span {font-family: Times, serif; }}

Następnie w naszym pliku HTML gdzie nazywamy biblioteki powinny wyglądać następująco:

 Debugowanie Less Js © 2015 Solvetic 

Następnym krokiem jest uruchomienie naszego HTML w przeglądarce, gdzie powinniśmy otrzymać:

Teraz, aby wykonać odpowiedni debug, wystarczy kliknąć prawym przyciskiem myszy dowolny z tytułów i poszukać opcji, która mówi nam sprawdź element, dzięki temu konsola debugowania przeglądarki zostanie podniesiona.
Tam możemy przyjrzeć się naszemu drugiemu tytułowi i zobaczymy coś interesującego, jest właściwość, która jest przekreślana, a to dlatego, że podczas nakładania się jest eliminowana dla tego elementu, dzięki temu pokazujemy, jak możemy zlokalizować problemy i sytuacje, które umykają kompilator Mniej. Zobaczmy więc na poniższym obrazku, jak wygląda ta akcja:

Na pierwsze kroki w Mniej Dzięki tym narzędziom z pewnością uzyskamy optymalne doświadczenie programistyczne, zmniejszając ilość błędów przez pominięcia, które możemy mieć, ponieważ gdy musimy napisać setki wierszy, coś może pójść nie tak.
Na tym kończymy ten samouczek, widzieliśmy kilka opcji debugowania dla Mniej korzystając z zasobów, które już posiadamy, w ten sposób nie musimy pobierać innych narzędzi ani szukać zewnętrznej dokumentacji osób trzecich. Oczywiście istnieją inne narzędzia i dodatki, które pomagają nam sprostać tego typu wymaganiom, jednak musisz zbadać trochę więcej, a krzywa uczenia się będzie większa, aby osiągnąć ten sam cel.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt