Depanare cu Less.js

Faptul că Less.js tratează CSS ca un fel de limbaj de programare ne oferă posibilitatea de a comite erori de sintaxă, care folosind numai CSS singurul lucru pe care l-am obține este că stilul nu va ieși corect, ci în Mai puțin ceea ce ne-ar genera este că nu s-ar vedea niciun stil.
De aceea, este foarte important să avem instrumente care să ne permită să vedem erorile din procesul de dezvoltare, așa că pierdem mai puțin timp localizându-ne în blocuri mari de cod, ceea ce eșuează.
Datorită naturii de Less.js dezvoltarea orientată spre test nu este încă posibilă, de aceea se face depanare De multe ori, dacă nu întotdeauna, trebuie făcut în browser, lucru care nu este foarte optim, dar este soluția pe care o avem la îndemână.
1- Pentru a realiza acest tutorial, va trebui să avem cunoștințe de bază și noțiuni de CSS, deoarece deși este concentrat asupra Mai puțin încă trebuie să știm cum sunt construite stilurile și cum sunt utilizate cel puțin proprietățile de bază, astfel încât să putem avea o referință adecvată atunci când vedem posibilele erori.
2- Trebuie să avem un mediu configurat pentru utilizare Mai puțin, adică un folder cu proiectul descărcat și disponibil pentru utilizare.
3- Dacă folosim Google Chrome vom avea nevoie de un stil de server web Apache deoarece acest browser pentru securitate blochează cererile locale ale lui Less, dacă nu dorim această configurare o putem folosi Firefox.
4- În cele din urmă, avem nevoie și de un editor de text în care să scriem exemplele, poate fi Text sublim sau poate NotePad ++ ambii editori au capacitatea de a încorpora pluginuri pentru a putea evidenția sintaxa JavaScript și de CSS. În plus, este important să avem permisiuni în sistemul nostru pentru a salva aceste fișiere în locația aleasă.
Una dintre primele opțiuni pe care le avem este să imprimăm erorile de cod și sintaxă direct în mediul nostru cu biblioteca mai puțin.jsAcest lucru se realizează în mediul de dezvoltare rulând biblioteca noastră direct pe client, în acest caz în browser.
Acest lucru este foarte important, deoarece atunci când compilăm direct în acest mod, atunci când apare o eroare Mai puțin nu generează niciun stil, deci dacă există un eșec, vom vedea doar structura noastră HTML dar fără CSS. Pentru a face acest tip de depanare putem urma ghidul din următorul cod:

 Depanare cu mai puține J-uri 

Primul lucru pe care îl vedem este că includem un fișier personalizat numit style-error.less Acest fișier este cel care va conține propriul cod la care vom depana, apoi trebuie să definim o variabilă numită Mai puțin și atribuiți-i un element env pe care o vom numi dezvoltare, apoi includem biblioteca noastră mai puțin.js și cu această variabilă ceea ce facem este să spunem Mai puțin că atunci când apare o eroare ne aruncă mesajul pentru care nu poate compila codul printre altele.
În arhiva noastră style-error.less vom plasa următorul cod eronat:

 h1 {culoare: roșu; dimensiunea fontului: 3em;

După cum am observat, trebuie să închidem o cheie la sfârșit, desigur, din punct de vedere analitic, această eroare pare puțin simplă și prostească, dar când avem sute de linii, este foarte sigur că la un moment dat uităm să închidem o cheie. În momentul executării documentului nostru vom vedea cum Mai puțin ne aruncă o eroare în browser:

MARI

După cum vedem compilatorul în browser Mai puțin Ne spune că există ceva ce nu recunoaște și că probabil am uitat ceva, în acest caz știm că a fost cheia pe care nu am închis-o.
Aici trebuie să facem o mică pauză, am văzut deja inițial cum putem obține erorile în Mai puținCu toate acestea, nu știm încă ce înseamnă erorile pe care le putem obține, de aceea vom defini cele mai importante, astfel încât să putem avea motive suficiente pentru a ști ce vom căuta și ce soluții posibile putem aplica.
FileErrorAceastă eroare se referă la un import eșuat dintr-un alt fișier, dacă ne amintim în fișierele noastre Mai puțin putem folosi instrucțiunea @import să includem alte fișiere pentru a ne organiza și extinde funcționalitățile.
Eroare de sintaxăAceastă eroare apare atunci când scriem incorect o declarație sau plasăm o proprietate într-un mod greșit, de exemplu atunci când declarăm o proprietate în afara unui bloc.
În imaginea următoare vedem cum arată o eroare de acest tip, o realizăm cu următorul cod:

 culoarea rosie; h1 {font-size: 3em; }

Unde putem vedea clar că proprietatea culoarea rosie este în afara poziției sale corecte, să vedem cum arată dacă îl rulăm în browser:

MARI

ParseErrorA fost eroarea pe care am detonat-o în exemplul inițial, aceasta apare atunci când uităm să plasăm acoladele sau punctele și virgulele acolo unde sunt necesare.
NameErrorAceastă eroare se întâmplă atunci când apelăm o variabilă sau o mixin care nu este definit sau nu este disponibil în mediul respectiv al fișierului Mai puțin.
Un alt lucru pe care trebuie să-l evidențiem este că Mai puțin Verifică doar dacă sintaxa și numele sunt corecte, totuși nu se va valida dacă conținutul nostru este corect, de exemplu să vedem următorul cod:

 h1 {culoare: roșu; dimensiunea fontului: 3em; lățime: roșie; }

Codul de mai sus se va compila fără nicio problemă, deși vedem clar că proprietatea lăţime Trebuie să aibă o măsurare a dimensiunii și nu o culoare, dacă executăm la fel în browserul nostru, fișierul este executat și funcționează:

MARI

Deci, trebuie să fim vigilenți, deoarece această tehnică nu este total infailibilă și există erori care nu sunt detectate.
O altă tehnică pe care o putem folosi pentru a realiza un depanare din codul nostru sunt instrumentele de dezvoltare a browserelor, în prezent principalele browsere precum Crom Da Firefox au instrumente care ne permit să înțelegem cum HTML și cum se comportă și în acest fel le putem folosi pentru a vedea codul nostru Mai puțin.
Acest lucru ne oferă un nivel mai ridicat de depanare, mai ales când nu putem folosi variabila env pe care l-am văzut în secțiunea anterioară, cu acest tip de depanare este posibil să nu avem detectarea erorilor anterioare, dar putem detecta probleme, cum ar fi stilurile care se suprapun sau au proprietăți greșite, așa cum am văzut exemplul anterior în care Mai puțin nu a detectat o lățime: roșie; de exemplu.
Pentru a demonstra acest mod de depanare, vom construi următorul stil în fișierul nostru style-error.less:

 h1 {font-size: 3em; culoare: roșie; } header {h1 {font-size: 2em; }} # content-footer {span {font-family: Times, serif; }}

Apoi în dosarul nostru HTML unde apelăm bibliotecile ar trebui să fie după cum urmează:

 Depanare mai puțin Js © 2015 Solvetic 

Următorul pas este să ne executăm HTML în browser, de unde ar trebui să obținem următoarele:

Acum, pentru a face depanarea corespunzătoare, trebuie doar să facem clic dreapta pe oricare dintre titluri și să căutăm opțiunea care ne spune inspectează elementul, odată cu aceasta, consola de depanare a browserului va fi ridicată.
Odată ajuns acolo, putem inspecta al doilea titlu și vom vedea ceva interesant, există o proprietate care este tăiată și se întâmplă deoarece atunci când se suprapune este eliminată pentru acel element, cu aceasta demonstrăm cum putem localiza problemele și situațiile care scapă. compilatorul de Mai puțin. Să vedem apoi în imaginea următoare cum arată această acțiune:

Pentru primii pași în Mai puțin Cu aceste instrumente vom obține cu siguranță o experiență de dezvoltare optimă, reducând cantitatea de erori prin omisiune pe care o putem avea, deoarece atunci când trebuie să scriem sute de rânduri, ceva poate merge prost.
Cu aceasta încheiem acest tutorial, am văzut câteva opțiuni de depanare pentru Mai puțin folosind resurse pe care le avem deja, în acest fel nu trebuie să descărcăm alte instrumente sau să căutăm documentația externă a terților. Desigur, există și alte instrumente și completări care ne ajută să îndeplinim aceste tipuri de cerințe, totuși trebuie să investigați puțin mai mult, iar curba de învățare va fi mai mare pentru a atinge același obiectiv.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv