Felsökning med Less.js

Faktumet att Less.js behandla CSS som ett slags programmeringsspråk ger oss möjlighet att begå syntaxfel, som endast använder CSS det enda vi skulle få är att stilen inte skulle komma ut ordentligt, men in Mindre det som skulle generera oss är att ingen stil skulle ses.
Det är därför det är mycket viktigt att ha verktyg som gör att vi kan se felen i utvecklingsprocessen, så vi slösar mindre tid på att lokalisera inom stora kodblock som är det som misslyckas.
På grund av naturen av Less.js testorienterad utveckling är ännu inte möjlig, det är därför man gör felsöka Många gånger, om inte alltid, måste det göras i webbläsaren, något som inte är särskilt optimalt men det är lösningen som vi har till hands.
1- För att kunna genomföra denna handledning kommer vi att kräva grundläggande kunskaper och föreställningar om CSS, eftersom även om det är fokuserat på Mindre vi måste fortfarande veta hur stilarna är byggda och hur åtminstone de grundläggande egenskaperna används så att vi kan få en adekvat referens när vi ser de möjliga felen.
2- Vi måste ha en miljö konfigurerad för att använda Mindre, det vill säga en mapp med projektet nedladdat och tillgängligt för användning.
3- Om vi ​​använder Google Chrome vi kommer att behöva en webbserverstil Apache eftersom den här webbläsaren för säkerhet blockerar de lokala förfrågningarna från Less, kan vi använda om vi inte vill ha den här inställningen Firefox.
4- Slutligen behöver vi också en textredigerare där vi kan skriva exemplen, det kan vara Sublim text eller kanske NotePad ++ båda redaktörerna har möjlighet att införliva plugins för att kunna markera syntaxen för JavaScript och av CSS. Dessutom är det viktigt att vi har behörigheter i vårt system för att spara dessa filer på den valda platsen.
Ett av de första alternativen vi har är att skriva ut våra kod- och syntaxfel direkt i vår miljö med biblioteket less.jsDetta uppnås i utvecklingsmiljön genom att köra vårt bibliotek direkt på klienten, i detta fall i webbläsaren.
Detta är mycket viktigt, eftersom när vi kompilerar direkt på detta sätt när ett fel uppstår mindre genererar inte någon stil, så om det blir ett fel ser vi bara vår struktur HTML men utan CSS. För att göra denna typ av felsökning kan vi följa guiden i följande kod:

 Felsökning med färre Js 

Det första vi ser är att vi inkluderar en anpassad fil som heter stil-fel. utan Denna fil är den som kommer att innehålla den egna koden som vi kommer att felsöka, sedan måste vi definiera en variabel som kallas mindre och tilldela det ett element env som vi kommer att kalla utveckling, då inkluderar vi vårt bibliotek less.js och med denna variabel är det vi gör att berätta mindre att när ett fel uppstår skickar det till oss meddelandet för vilket det inte kan kompilera koden bland annat.
I vårt arkiv stil-fel. utan vi kommer att placera följande felaktiga kod:

 h1 {färg: röd; typsnitt: 3em;

Som vi märkte måste vi stänga en nyckel i slutet, naturligtvis analytiskt ser detta fel lite enkelt och dumt ut, men när vi har hundratals rader är det mycket säkert att vi någon gång glömmer att stänga en nyckel. I det ögonblick då vi kör vårt dokument får vi se hur Mindre ger oss ett fel i webbläsaren:

FÖRSTORA

Som vi ser kompilatorn i webbläsaren Mindre Den berättar att det finns något som det inte känner igen och att vi förmodligen har glömt något, i det här fallet vet vi att det var nyckeln som vi inte stängde.
Här måste vi göra en liten paus, vi såg redan inledningsvis hur vi kan få fel i MindreMen vi vet ännu inte vad de fel vi kan få betyder, det är därför vi kommer att definiera de viktigaste så att vi kan ha tillräckliga skäl att veta vad vi ska leta efter och vilka möjliga lösningar vi kan tillämpa.
FileErrorDet här felet avser en misslyckad import från en annan fil, om vi kommer ihåg det i våra filer mindre vi kan använda instruktionen @importera att inkludera andra filer för att organisera och utöka våra funktioner.
SyntaxfelDetta fel uppstår när vi felaktigt skriver ett uttalande eller placerar en egendom på fel sätt, till exempel när vi deklarerar en egendom utanför ett block.
I följande bild ser vi hur ett fel av denna typ ser ut, vi uppnår det med följande kod:

 färgen röd; h1 {font-size: 3em; }

Där vi tydligt kan se att fastigheten färgen röd är ur rätt läge, låt oss se hur det ser ut om vi kör det i webbläsaren:

FÖRSTORA

ParseErrorDet var felet som vi detonerade i det första exemplet, detta inträffar när vi glömmer att placera hängslen eller semikolon där de behövs.
NameErrorDetta fel uppstår när vi anropar en variabel eller a blanda i som inte är definierad eller inte tillgänglig i den filens miljö Mindre.
En annan sak som vi måste lyfta fram är det Mindre Det verifierar bara att syntaxen och namnen är korrekta, men det kommer inte att valideras om vårt innehåll är korrekt, till exempel låt oss se följande kod:

 h1 {färg: röd; typsnitt: 3em; bredd: röd; }

Ovanstående kod kommer att kompilera utan problem, även om vi tydligt ser att egendomen bredd Den måste ha en storleksmätning och inte en färg, om vi kör samma i vår webbläsare körs filen och fungerar:

FÖRSTORA

Så vi måste vara vaksamma eftersom denna teknik inte är helt ofelbar och det finns fel som inte upptäcks.
En annan av de tekniker som vi kan använda för att göra en felsöka av vår kod är verktyg för utvecklare av webbläsare, för närvarande de viktigaste webbläsarna som t.ex. Krom Y Firefox har verktyg som gör att vi kan förstå hur HTML och hur det beter sig och på så sätt kan vi använda dem för att se vår kod Mindre.
Detta ger oss en högre nivå av felsöka, särskilt när vi inte kan använda variabeln env som vi såg i föregående avsnitt, med denna typ av felsökning kanske vi inte har upptäckt de tidigare felen men vi kan upptäcka problem som stilar som överlappar eller har fel egenskaper som vi såg föregående exempel där Mindre upptäckte inte a bredd: röd; till exempel.
För att visa detta sätt att felsöka kommer vi att bygga följande stil inuti vår fil stil-fel. utan:

 h1 {font-size: 3em; färg: tomat; } rubrik {h1 {font-size: 2em; }} # content-footer {span {font-family: Times, serif; }}

Sedan i vår fil HTML där vi kallar biblioteken ska vara följande:

 Debugging Less Js © 2015 Solvetic 

Nästa steg är att köra vår HTML i webbläsaren, där vi ska få följande:

För att göra motsvarande felsökning måste vi bara högerklicka på någon av titlarna och leta efter alternativet som berättar för oss inspektera elementet, med detta kommer webbläsarens felsökningskonsol att lyftas.
Väl där kan vi inspektera vår andra titel och vi kommer att se något intressant, det finns en egenskap som sträcks över och det är för att när den överlappar den elimineras för det elementet, med denna visar vi hur vi kan lokalisera problem och situationer som flyr kompilatorn av Mindre. Låt oss sedan se i följande bild hur denna åtgärd ser ut:

För de första stegen i Mindre Med dessa verktyg kommer vi säkert att få en optimal utvecklingsupplevelse, vilket minskar antalet fel genom utelämnande som vi kan ha, eftersom när vi måste skriva hundratals rader kan något gå fel.
Med detta avslutar vi denna handledning, vi har sett ett par felsökningsalternativ för Mindre Genom att använda resurser som vi redan har behöver vi på detta sätt inte ladda ner andra verktyg eller leta efter extern tredjepartsdokumentation. Naturligtvis finns det andra verktyg och komplement som hjälper oss att uppfylla dessa krav, men du måste undersöka lite mer och inlärningskurvan blir större för att uppnå samma mål.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng