Otklanjanje pogrešaka s Less.js

Činjenica da se Manje.js liječiti CSS kao svojevrsni programski jezik daje nam mogućnost činjenja sintaksnih grešaka, koje samo CSS jedino što bismo dobili je da stil ne bi izašao kako treba, već u Manje ono što bi nas generiralo je da se ne vidi nikakav stil.
Zato je vrlo važno imati alate koji nam omogućuju uvid u pogreške u procesu razvoja, pa gubimo manje vremena na lociranje unutar velikih blokova koda, što je ono što ne uspijeva.
Zbog prirode autor Less.js razvoj orijentiran na testiranje još nije moguć, zato se radi otklanjanje pogrešaka Mnogo puta, ako ne i uvijek, to se mora učiniti u pregledniku, nešto što nije baš optimalno, ali to je rješenje koje nam je pri ruci.
1- Za izvođenje ovog vodiča trebat ćemo imati osnovno znanje i predodžbe o CSS, budući da je usredotočen na Manje još moramo znati kako su stilovi izgrađeni i kako se koriste barem osnovna svojstva kako bismo mogli imati odgovarajuću referencu kad vidimo moguće pogreške.
2- Moramo imati okruženje konfigurirano za korištenje Manje, odnosno mapu s projektom koji je preuzet i dostupan za korištenje.
3- Ako koristimo Google Chrome trebat će nam stil web poslužitelja Apač budući da ovaj sigurnosni preglednik blokira lokalne zahtjeve Less -a, ako ne želimo ovu postavku, možemo je koristiti Firefox.
4- Konačno, potreban nam je i uređivač teksta gdje možemo pisati primjere, to može biti Uzvišen tekst ili možda NotePad ++ oba urednika imaju mogućnost uključivanja dodataka kako bi mogli istaknuti sintaksu JavaScript i od CSS. Osim toga, važno je da u našem sustavu imamo dopuštenja za spremanje ovih datoteka na odabrano mjesto.
Jedna od prvih mogućnosti koju imamo je ispisati naš kôd i sintaksne pogreške izravno u našem okruženju s bibliotekom manje.jsTo se postiže u razvojnom okruženju izvođenjem naše biblioteke izravno na klijentu, u ovom slučaju unutar preglednika.
To je vrlo važno, budući da na ovaj način kompiliramo izravno kada dođe do pogreške manje ne generira nikakav stil, pa ćemo u slučaju kvara vidjeti samo našu strukturu HTML ali bez CSS. Da bismo izvršili ovu vrstu otklanjanja pogrešaka, možemo slijediti vodič u sljedećem kodu:

 Otklanjanje pogrešaka s manje Js -a 

Prvo što vidimo je da uključujemo prilagođenu datoteku pod nazivom style-error.less Ova datoteka će sadržavati vlastiti kod na koji ćemo otklanjati pogreške, tada moramo definirati varijablu tzv manje i dodijeliti mu element env koju ćemo nazvati razvoj, zatim uključujemo našu knjižnicu manje.js i s ovom varijablom ono što radimo je reći manje da kad dođe do pogreške baci nam poruku za koju između ostalog ne može sastaviti kôd.
U našoj arhivi style-error.less postavit ćemo sljedeću pogrešnu šifru:

 h1 {boja: crvena; veličina fonta: 3em;

Kao što smo primijetili da moramo zatvoriti ključ na kraju, naravno analitički ova pogreška izgleda pomalo jednostavno i glupo, ali kada imamo stotine redaka vrlo je sigurno da u jednom trenutku zaboravimo zatvoriti ključ. U trenutku izvršavanja našeg dokumenta vidjet ćemo kako Manje baca nam pogrešku u pregledniku:

POVEĆAJTE

Kao što vidimo prevoditelj u pregledniku Manje Govori nam da postoji nešto što ne prepoznaje i da smo vjerojatno nešto zaboravili, u ovom slučaju znamo da je to bio ključ koji nismo zatvorili.
Ovdje moramo napraviti malu stanku, već smo u početku vidjeli kako možemo dobiti greške u ManjeMeđutim, još ne znamo što znače pogreške koje možemo dobiti, zato ćemo definirati najvažnije kako bismo mogli imati dovoljno osnova da znamo što ćemo tražiti i koja moguća rješenja možemo primijeniti.
FileErrorOva se pogreška odnosi na neuspjeli uvoz iz druge datoteke, ako se sjećamo u našim datotekama manje možemo se poslužiti uputom @uvoz uključiti druge datoteke za organiziranje i proširenje naših funkcionalnosti.
Sintaktička pogreškaDo ove pogreške dolazi kada pogrešno napišemo izjavu ili postavimo svojstvo na pogrešan način, na primjer pri deklaraciji svojstva izvan bloka.
Na sljedećoj slici vidimo kako izgleda pogreška ove vrste, postižemo je sljedećim kodom:

 boja: crvena; h1 {font-size: 3em; }

Gdje možemo jasno vidjeti da je vlasništvo boja: crvena nije na svom mjestu, da vidimo kako izgleda ako ga pokrenemo u pregledniku:

POVEĆAJTE

ParseErrorTo je pogreška koju smo detonirali u početnom primjeru, to se događa kada zaboravimo postaviti zagrade ili točku -zarez gdje su potrebne.
Greška u nazivuOva se pogreška događa kada pozovemo varijablu ili a mixin koji nije definiran ili nije dostupan u okruženju te datoteke Manje.
Još jedna stvar koju moramo istaknuti je da Manje On samo provjerava jesu li sintaksa i nazivi točni, no neće se provjeriti je li naš sadržaj točan, na primjer da vidimo sljedeći kod:

 h1 {boja: crvena; veličina fonta: 3em; širina: crvena; }

Gornji kôd će se sastaviti bez ikakvih problema, iako jasno vidimo da je to svojstvo širina Mora imati mjerenje veličine, a ne boju, ako istu izvršimo u pregledniku, datoteka se izvršava i radi:

POVEĆAJTE

Stoga moramo biti na oprezu jer ova tehnika nije potpuno nepogrešiva ​​i postoje pogreške koje se ne otkrivaju.
Još jedna od tehnika koje možemo koristiti za izradu a otklanjanje pogrešaka našeg koda su alati za razvoj programera preglednika, trenutno glavni preglednici poput Krom Y Firefox imaju alate koji nam omogućuju da razumijemo kako se HTML i kako se ponaša i na taj način ih možemo koristiti za pregled našeg koda Manje.
To nam daje višu razinu otklanjanje pogrešaka, osobito kada ne možemo koristiti varijablu env što smo vidjeli u prethodnom odjeljku, s ovom vrstom otklanjanja pogrešaka možda nećemo otkriti prethodne pogreške, ali možemo otkriti probleme poput stilova koji se preklapaju ili imaju pogrešna svojstva kao što smo vidjeli u prethodnom primjeru gdje Manje nije otkrio a širina: crvena; na primjer.
Kako bismo demonstrirali ovaj način uklanjanja pogrešaka, izgradit ćemo sljedeći stil unutar naše datoteke style-error.less:

 h1 {font-size: 3em; boja: rajčica; } zaglavlje {h1 {font-size: 2em; }} # content-footer {span {font-family: Times, serif; }}

Zatim u našoj datoteci HTML gdje nazivamo knjižnice trebale bi biti sljedeće:

 Otklanjanje pogrešaka Manje Js © 2015 Solvetic 

Sljedeći korak je pokrenuti naš HTML u pregledniku, gdje bismo trebali dobiti sljedeće:

Sada da bismo izvršili odgovarajuće ispravljanje pogrešaka, samo moramo desnom tipkom miša kliknuti bilo koji naslov i potražiti opciju koja nam govori pregledati element, s ovim će se podići konzola za ispravljanje pogrešaka preglednika.
Kad tamo stignemo pregledati svoj drugi naslov i vidjet ćemo nešto zanimljivo, postoji svojstvo koje se precrtava i to je zato što se pri preklapanju eliminira za taj element, time pokazujemo kako možemo locirati probleme i situacije koje izbjegnu sastavljač Manje. Pogledajmo onda na sljedećoj slici kako izgleda ova radnja:

Za prve korake Manje Pomoću ovih alata zasigurno ćemo steći optimalno razvojno iskustvo, smanjujući količinu grešaka propustom koje možemo imati, jer kad moramo napisati stotine redaka, nešto može krenuti po zlu.
Ovim smo završili ovaj vodič, vidjeli smo nekoliko opcija za ispravljanje pogrešaka za Manje koristeći resurse koje već imamo, na ovaj način ne moramo preuzimati druge alate niti tražiti vanjsku dokumentaciju trećih strana. Naravno, postoje i drugi alati i nadopune koji nam pomažu u ispunjavanju ovih vrsta zahtjeva, međutim morate još malo istražiti i krivulja učenja bit će veća za postizanje istog cilja.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod