Debugging med Less.js

Det faktum, at Less.js behandle CSS som en slags programmeringssprog giver os mulighed for at begå syntaksfejl, som kun bruger CSS det eneste, vi ville få, er, at stilen ikke ville komme ordentligt ud, men ind Mindre hvad ville generere os er, at ingen stil ville blive set.
Derfor er det meget vigtigt at have værktøjer, der giver os mulighed for at se fejlene i udviklingsprocessen, så vi spilder mindre tid på at lokalisere inden for store blokke kode, det er det, der fejler.
På grund af naturen af Less.js testorienteret udvikling er endnu ikke mulig, derfor gør fejlfinde Mange gange, hvis ikke altid, skal det gøres i browseren, noget der ikke er særlig optimalt, men det er den løsning, vi har lige ved hånden.
1- For at gennemføre denne vejledning kræver vi grundlæggende viden og forestillinger om CSS, siden selvom det er fokuseret på Mindre vi skal stadig vide, hvordan stilarterne er opbygget, og hvordan i det mindste de grundlæggende egenskaber bruges, så vi kan have en tilstrækkelig reference, når vi ser de mulige fejl.
2- Vi skal have et miljø konfigureret til at bruge Mindre, det vil sige en mappe med projektet downloadet og tilgængelig til brug.
3- Hvis vi bruger Google Chrome vi får brug for en webserverstil Apache da denne browser til sikkerhed blokerer de lokale anmodninger om Less, kan vi bruge, hvis vi ikke ønsker denne opsætning Firefox.
4- Endelig har vi også brug for en teksteditor, hvor vi kan skrive eksemplerne, det kan være Sublim tekst eller måske har NotePad ++ begge redaktører mulighed for at inkorporere plugins for at kunne fremhæve syntaksen for JavaScript og af CSS. Derudover er det vigtigt, at vi har tilladelser i vores system til at gemme disse filer på den valgte placering.
En af de første muligheder, vi har, er at udskrive vores kode- og syntaksfejl direkte i vores miljø med biblioteket less.jsDette opnås i udviklingsmiljøet ved at køre vores bibliotek direkte på klienten, i dette tilfælde i browseren.
Dette er meget vigtigt, da når vi kompilerer direkte på denne måde, når der opstår en fejl mindre genererer ikke nogen stil, så hvis der er en fejl, vil vi kun se vores struktur HTML men uden CSS. For at gøre denne type fejlretning kan vi følge guiden i følgende kode:

 Debugging med færre Js 

Den første ting, vi ser, er, at vi inkluderer en brugerdefineret fil kaldet style-error.less Denne fil er den, der vil indeholde den egen kode, som vi vil fejlsøge, så skal vi definere en variabel kaldet mindre og tildel det et element env som vi vil kalde udvikling, så inkluderer vi vores bibliotek less.js og med denne variabel er det, vi gør, at fortælle mindre at når der opstår en fejl, sender den os den besked, som den blandt andet ikke kan kompilere koden for.
I vores arkiv style-error.less vi vil placere følgende fejlagtige kode:

 h1 {farve: rød; skrifttype: 3em;

Som vi bemærkede, er vi nødt til at lukke en nøgle i slutningen, selvfølgelig ser analytisk selvfølgelig denne fejl lidt enkel og fjollet ud, men når vi har hundredvis af linjer er det meget sikkert, at vi på et tidspunkt glemmer at lukke en nøgle. I øjeblikket med udførelsen af ​​vores dokument vil vi derefter se hvordan Mindre sender os en fejl i browseren:

FORSTØRRE

Som vi ser kompilatoren i browseren Mindre Det fortæller os, at der er noget, det ikke genkender, og at vi sandsynligvis har glemt noget, i dette tilfælde ved vi, at det var nøglen, som vi ikke lukkede.
Her skal vi lave en lille pause, vi så allerede oprindeligt, hvordan vi kan få fejlene i MindreVi ved dog endnu ikke, hvad de fejl, vi kan få, betyder, derfor vil vi definere de vigtigste, så vi kan have tilstrækkelig grund til at vide, hvad vi vil kigge efter, og hvilke mulige løsninger vi kan anvende.
FileErrorDenne fejl refererer til en mislykket import fra en anden fil, hvis vi husker det i vores filer mindre vi kan bruge instruktionen @importere at inkludere andre filer for at organisere og udvide vores funktioner.
Syntaks fejlDenne fejl opstår, når vi forkert skriver en erklæring eller placerer en ejendom på den forkerte måde, for eksempel når vi erklærer en ejendom uden for en blok.
I det følgende billede ser vi, hvordan en fejl af denne type ser ud, vi opnår det med følgende kode:

 farve: rød; h1 {font-size: 3em; }

Hvor vi tydeligt kan se, at ejendommen farve: rød er ude af sin korrekte position, lad os se, hvordan det ser ud, hvis vi kører det i browseren:

FORSTØRRE

ParseErrorDet var den fejl, vi detonerede i det første eksempel, dette sker, når vi glemmer at placere selerne eller semikolon, hvor de er nødvendige.
NavnefejlDenne fejl opstår, når vi kalder en variabel eller a mixin som ikke er defineret eller ikke er tilgængelig i filens miljø Mindre.
En anden ting, som vi skal fremhæve, er det Mindre Det verificerer kun, at syntaksen og navnene er korrekte, men det valideres ikke, hvis vores indhold er korrekt, lad os f.eks. Se følgende kode:

 h1 {farve: rød; skrifttype: 3em; bredde: rød; }

Ovenstående kode vil kompilere uden problemer, selvom vi tydeligt ser, at ejendommen bredde Den skal have en størrelsesmåling og ikke en farve, hvis vi udfører det samme i vores browser, udføres filen og fungerer:

FORSTØRRE

Så vi skal være på vagt, da denne teknik ikke er helt ufeilbarlig, og der er fejl, der ikke opdages.
En anden af ​​de teknikker, som vi kan bruge til at lave en fejlfinde af vores kode er browserudviklerværktøjerne, i øjeblikket de vigtigste browsere som f.eks Chrome Y Firefox har værktøjer, der giver os mulighed for at forstå, hvordan HTML og hvordan det opfører sig, og på denne måde kan vi bruge dem til at se vores kode Mindre.
Dette giver os et højere niveau af fejlfinde, især når vi ikke kan gøre brug af variablen env som vi så i det foregående afsnit, med denne type fejlretning har vi muligvis ikke detektering af de tidligere fejl, men vi kan opdage problemer som stilarter, der overlapper eller har forkerte egenskaber, som vi så det tidligere eksempel, hvor Mindre opdagede ikke a bredde: rød; for eksempel.
For at demonstrere denne måde at fejlsøge vil vi bygge følgende stil inde i vores fil style-error.less:

 h1 {font-size: 3em; farve: tomat; } header {h1 {font-size: 2em; }} # content-footer {span {font-family: Times, serif; }}

Så i vores fil HTML hvor vi kalder bibliotekerne skal være som følger:

 Debugging Less Js © 2015 Solvetic 

Det næste trin er at køre vores HTML i browseren, hvor vi skulle få følgende:

For nu at foretage den tilsvarende fejlfinding skal vi bare højreklikke på en af ​​titlerne og se efter den mulighed, der fortæller os inspicere element, med dette vil browserens debug -konsol blive ophævet.
Når vi er der, kan vi inspicere vores anden titel, og vi vil se noget interessant, der er en egenskab, der bliver overstreget, og det er fordi, når den overlapper den elimineres for det element, med denne demonstrerer vi, hvordan vi kan lokalisere problemer og situationer, der undslipper kompilatoren af Mindre. Lad os derefter se i følgende billede, hvordan denne handling ser ud:

Til de første trin i Mindre Med disse værktøjer får vi helt sikkert en optimal udviklingsoplevelse, hvilket reducerer mængden af ​​fejl ved udeladelse, som vi måtte have, da når vi skal skrive hundredvis af linjer, kan der gå noget galt.
Med dette afslutter vi denne vejledning, vi har set et par fejlfindingsmuligheder for Mindre ved hjælp af ressourcer, som vi allerede har, behøver vi på denne måde ikke at downloade andre værktøjer eller lede efter ekstern tredjepartsdokumentation. Selvfølgelig er der andre værktøjer og komplementer, der hjælper os med at opfylde disse krav, men du skal undersøge lidt mere, og indlæringskurven vil være større for at nå det samme mål.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt