Feilsøking med Less.js

Det faktum at Less.js behandle CSS som et slags programmeringsspråk gir oss muligheten til å begå syntaksfeil, som bare bruker CSS det eneste vi ville få er at stilen ikke ville komme ut ordentlig, men inn Mindre det som ville generere oss er at ingen stil ville bli sett.
Det er derfor det er veldig viktig å ha verktøy som lar oss se feilene i utviklingsprosessen, så vi kaster bort mindre tid på å finne innenfor store blokker med kode som er det som mislykkes.
På grunn av naturen av Less.js testorientert utvikling er ikke mulig ennå, det er derfor du gjør det feilsøking Mange ganger, om ikke alltid, må det gjøres i nettleseren, noe som ikke er veldig optimalt, men det er løsningen vi har for hånden.
1- For å gjennomføre denne opplæringen vil vi kreve grunnleggende kunnskap og forestillinger om CSS, siden selv om det er fokusert på Mindre vi må fortsatt vite hvordan stilene er bygget og hvordan i det minste de grunnleggende egenskapene brukes slik at vi kan ha en tilstrekkelig referanse når vi ser de mulige feilene.
2- Vi må ha et miljø konfigurert for å bruke Mindre, det vil si en mappe med prosjektet lastet ned og tilgjengelig for bruk.
3- Hvis vi bruker Google Chrome vi kommer til å trenge en webserverstil Apache siden denne nettleseren for sikkerhet blokkerer de lokale forespørslene til Less, kan vi bruke hvis vi ikke vil ha dette oppsettet Firefox.
4- Til slutt trenger vi også en tekstredigerer der vi kan skrive eksemplene, det kan være Sublim tekst eller kanskje NotePad ++ har begge redaktørene muligheten til å inkorporere plugins for å kunne markere syntaksen til JavaScript og av CSS. I tillegg er det viktig at vi har tillatelser i systemet vårt for å lagre disse filene på det valgte stedet.
Et av de første alternativene vi har er å skrive ut kode- og syntaksfeil direkte i miljøet vårt med biblioteket less.jsDette oppnås i utviklingsmiljøet ved å kjøre biblioteket vårt direkte på klienten, i dette tilfellet i nettleseren.
Dette er veldig viktig, siden når vi kompilerer direkte på denne måten når det oppstår en feil mindre genererer ikke noen stil, så hvis det er en feil, vil vi bare se strukturen vår HTML men uten CSS. For å gjøre denne typen feilsøking kan vi følge guiden i følgende kode:

 Feilsøking med færre Js 

Det første vi ser er at vi inkluderer en egendefinert fil som heter stil-feil. uten Denne filen er den som vil inneholde den egen koden som vi vil feilsøke, så må vi definere en variabel som kalles mindre og tilordne det et element env som vi vil kalle utvikling, så inkluderer vi biblioteket vårt less.js og med denne variabelen er det vi gjør å fortelle mindre at når det oppstår en feil, sender den oss meldingen som den blant annet ikke kan kompilere koden for.
I vårt arkiv stil-feil. uten vi skal plassere følgende feilkode:

 h1 {farge: rød; skriftstørrelse: 3em;

Som vi la merke til må vi lukke en nøkkel på slutten, selvfølgelig ser analytisk ut denne feilen litt enkel og dum, men når vi har hundrevis av linjer er det veldig sikkert at vi på et tidspunkt glemmer å lukke en nøkkel. I det øyeblikket vi utfører dokumentet, får vi se hvordan Mindre gir oss en feil i nettleseren:

FORSTØRRE

Som vi ser kompilatoren i nettleseren Mindre Det forteller oss at det er noe det ikke gjenkjenner og at vi sannsynligvis har glemt noe, i dette tilfellet vet vi at det var nøkkelen som vi ikke lukket.
Her må vi ta en liten pause, vi så allerede i utgangspunktet hvordan vi kan få feilene i MindreImidlertid vet vi ikke ennå hva feilene vi kan oppnå betyr, det er derfor vi skal definere de viktigste slik at vi kan ha tilstrekkelig grunn til å vite hva vi skal se etter og hvilke mulige løsninger vi kan bruke.
FileErrorDenne feilen refererer til en mislykket import fra en annen fil, hvis vi husker det i filene våre mindre vi kan bruke instruksjonene @import å inkludere andre filer for å organisere og utvide funksjonalitetene våre.
SyntaksfeilDenne feilen oppstår når vi feilaktig skriver en uttalelse eller plasserer en eiendom på feil måte, for eksempel når vi deklarerer en eiendom utenfor en blokk.
I det følgende bildet ser vi hvordan en feil av denne typen ser ut, vi oppnår den med følgende kode:

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

Der kan vi tydelig se at eiendommen fargen rød er ute av riktig posisjon, la oss se hvordan det ser ut hvis vi kjører det i nettleseren:

FORSTØRRE

ParseErrorDet var feilen som vi detonerte i det første eksemplet, dette skjer når vi glemmer å plassere bukseseler eller semikolon der de er nødvendige.
NameErrorDenne feilen skjer når vi kaller en variabel eller a blanding som ikke er definert eller ikke tilgjengelig i den filens miljø Mindre.
En annen ting som vi må markere er det Mindre Det bekrefter bare at syntaksen og navnene er riktige, men det vil ikke validere om innholdet vårt er riktig, for eksempel la oss se følgende kode:

 h1 {farge: rød; skriftstørrelse: 3em; bredde: rød; }

Koden ovenfor vil kompilere uten problemer, selv om vi tydelig ser at eiendommen bredde Den må ha en størrelsesmåling og ikke en farge. Hvis vi utfører det samme i nettleseren vår, kjøres filen og fungerer:

FORSTØRRE

Så vi må være årvåkne siden denne teknikken ikke er helt ufeilbarlig og det er feil som ikke oppdages.
En annen av teknikkene som vi kan bruke til å lage en feilsøking av koden vår er nettleserutviklerverktøyene, for tiden de viktigste nettleserne som f.eks Chrome Y Firefox har verktøy som lar oss forstå hvordan HTML og hvordan den oppfører seg, og på denne måten kan vi bruke dem til å se koden vår Mindre.
Dette gir oss et høyere nivå på feilsøking, spesielt når vi ikke kan bruke variabelen env som vi så i forrige seksjon, med denne typen feilsøking har vi kanskje ikke påvisning av de tidligere feilene, men vi kan oppdage problemer som stiler som overlapper eller har feil egenskaper slik vi så det forrige eksemplet der Mindre oppdaget ikke a bredde: rød; for eksempel.
For å demonstrere denne måten å feilsøke, skal vi bygge følgende stil inne i filen vår stil-feil. uten:

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

Så i filen vår HTML der vi kaller bibliotekene bør være som følger:

 Debugging Less Js © 2015 Solvetic 

Det neste trinnet er å kjøre vår HTML i nettleseren, der vi bør få følgende:

For å gjøre den korresponderende feilsøkingen, må vi bare høyreklikke på en av titlene og se etter alternativet som forteller oss inspisér element, med dette vil nettleserens feilsøkingskonsoll bli løftet.
Når vi er der kan vi inspisere vår andre tittel, og vi vil se noe interessant, det er en eiendom som blir krysset av, og det er fordi når den overlapper den elimineres for det elementet, med denne demonstrerer vi hvordan vi kan finne problemer og situasjoner som unnslipper kompilatoren av Mindre. La oss se på det følgende bildet hvordan denne handlingen ser ut:

For de første trinnene i Mindre Med disse verktøyene vil vi helt sikkert få en optimal utviklingsopplevelse, noe som reduserer mengden feil ved utelatelse som vi kan ha, siden noe som kan gå galt når vi må skrive hundrevis av linjer.
Med dette avslutter vi denne opplæringen, vi har sett et par feilsøkingsalternativer for Mindre Ved å bruke ressurser som vi allerede har, trenger vi på denne måten ikke å laste ned andre verktøy eller lete etter ekstern tredjeparts dokumentasjon. Selvfølgelig er det andre verktøy og komplementer som hjelper oss å oppfylle denne typen krav, men du må undersøke litt mer, og læringskurven vil være større for å oppnå det samme målet.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng