Foutopsporing met Less.js

Het feit dat Less.js behandel de CSS als een soort programmeertaal geeft ons de mogelijkheid om syntaxisfouten te maken, die alleen met behulp van CSS het enige dat we zouden krijgen is dat de stijl er niet goed uit zou komen, maar in Minder wat ons zou genereren, is dat er geen stijl zou worden gezien.
Daarom is het erg belangrijk om tools te hebben waarmee we de fouten in het ontwikkelingsproces kunnen zien, zodat we minder tijd verspillen aan het lokaliseren binnen grote blokken code dat is wat mislukt.
Vanwege de natuur door Less.js testgericht ontwikkelen is nog niet mogelijk, daarom doen debuggen Vaak, zo niet altijd, moet het in de browser worden gedaan, iets dat niet erg optimaal is, maar het is de oplossing die we bij de hand hebben.
1- Om deze tutorial uit te voeren, hebben we basiskennis en noties van: CSS, want hoewel het is gericht op Minder we moeten nog steeds weten hoe de stijlen zijn gebouwd en hoe in ieder geval de basiseigenschappen worden gebruikt, zodat we een adequate referentie kunnen hebben wanneer we de mogelijke fouten zien.
2- We moeten een omgeving hebben geconfigureerd om te gebruiken Minder, dat wil zeggen, een map met het project gedownload en beschikbaar voor gebruik.
3- Als we Google Chrome we hebben een webserverstijl nodig Apache aangezien deze browser voor beveiliging de lokale verzoeken van Less blokkeert, kunnen we deze setup gebruiken als we deze niet willen Firefox.
4- Ten slotte hebben we ook een teksteditor nodig waar we de voorbeelden kunnen schrijven, het kan zijn Sublieme tekst of misschien hebben NotePad ++ beide editors de mogelijkheid om plug-ins op te nemen om de syntaxis van te kunnen benadrukken JavaScript en van CSS. Daarnaast is het belangrijk dat we permissies in ons systeem hebben om deze bestanden op de gekozen locatie op te slaan.
Een van de eerste opties die we hebben, is om onze code- en syntaxisfouten rechtstreeks in onze omgeving met de bibliotheek af te drukken minder.jsDit wordt bereikt in de ontwikkelomgeving door onze bibliotheek direct op de client te draaien, in dit geval binnen de browser.
Dit is erg belangrijk, want wanneer we op deze manier direct compileren wanneer er een fout optreedt minder genereert geen stijl, dus als er een storing is, zien we alleen onze structuur HTML maar zonder CSS. Om dit type foutopsporing uit te voeren, kunnen we de gids in de volgende code volgen:

 Foutopsporing met minder Js 

Het eerste dat we zien, is dat we een aangepast bestand opnemen met de naam style-error.less Dit bestand is degene die de eigen code zal bevatten waarnaar we zullen debuggen, dan moeten we een variabele definiëren met de naam minder en wijs het een element toe benijden die we zullen noemen ontwikkeling, dan nemen we onze bibliotheek op minder.js en met deze variabele wat we doen is vertellen minder dat wanneer er een fout optreedt, het ons het bericht stuurt waarvoor het onder andere de code niet kan compileren.
In ons archief stijlfout.less we gaan de volgende foutieve code plaatsen:

 h1 {kleur: rood; lettergrootte: 3em;

Zoals we hebben opgemerkt, moeten we aan het einde een sleutel sluiten, natuurlijk ziet deze fout er analytisch een beetje simpel en dwaas uit, maar als we honderden regels hebben, is het zeer zeker dat we op een gegeven moment vergeten een sleutel te sluiten. Op het moment dat ons document wordt uitgevoerd, zullen we zien hoe: Minder geeft ons een foutmelding in de browser:

VERGROTEN

Zoals we de compiler in de browser zien Minder Het vertelt ons dat er iets is dat het niet herkent en dat we waarschijnlijk iets zijn vergeten, in dit geval weten we dat het de sleutel was die we niet hebben gesloten.
Hier moeten we een kleine pauze inlassen, we hebben in eerste instantie al gezien hoe we de fouten kunnen verkrijgen in MinderWe weten echter nog niet wat de fouten die we kunnen krijgen betekenen, daarom gaan we de belangrijkste definiëren, zodat we voldoende grond hebben om te weten waar we naar zullen zoeken en welke mogelijke oplossingen we kunnen toepassen.
BestandsfoutDeze fout verwijst naar een mislukte import uit een ander bestand, als we ons dat herinneren in onze bestanden minder we kunnen de instructie gebruiken: @importeren om andere bestanden op te nemen om onze functionaliteiten te organiseren en uit te breiden.
Syntax errorDeze fout treedt op wanneer we een statement verkeerd schrijven of een eigenschap op de verkeerde manier plaatsen, bijvoorbeeld bij het declareren van een eigenschap buiten een blok.
In de volgende afbeelding zien we hoe een fout van dit type eruit ziet, we bereiken het met de volgende code:

 kleur rood; h1 {lettergrootte: 3em; }

Waar we duidelijk kunnen zien dat de woning kleur rood niet op de juiste plaats staat, laten we eens kijken hoe het eruit ziet als we het in de browser uitvoeren:

VERGROTEN

Verwerkings foutHet was de fout die we in het eerste voorbeeld tot ontploffing hebben gebracht, dit gebeurt wanneer we vergeten de accolades of puntkomma's te plaatsen waar ze nodig zijn.
NaamfoutDeze fout treedt op wanneer we een variabele of a . aanroepen mixen die niet is gedefinieerd of niet beschikbaar is in de omgeving van dat bestand Minder.
Een ander ding dat we moeten benadrukken, is dat: Minder Het controleert alleen of de syntaxis en namen correct zijn, maar het valideert niet of onze inhoud correct is, laten we bijvoorbeeld de volgende code bekijken:

 h1 {kleur: rood; lettergrootte: 3em; breedte: rood; }

De bovenstaande code compileert zonder enig probleem, hoewel we duidelijk zien dat de eigenschap breedte Het moet een maat hebben en geen kleur, als we hetzelfde in onze browser uitvoeren, wordt het bestand uitgevoerd en werkt het:

VERGROTEN

We moeten dus waakzaam zijn, aangezien deze techniek niet volledig onfeilbaar is en er fouten zijn die niet worden gedetecteerd.
Nog een van de technieken die we kunnen gebruiken om een debuggen van onze code zijn de browserontwikkelaarstools, momenteel de belangrijkste browsers zoals: Chroom Y Firefox beschikken over hulpmiddelen die ons in staat stellen te begrijpen hoe de HTML en hoe het zich gedraagt ​​en op deze manier kunnen we ze gebruiken om onze code te zien Minder.
Dit geeft ons een hoger niveau van debuggen, vooral als we geen gebruik kunnen maken van de variabele benijden die we in de vorige sectie zagen, met dit type foutopsporing hebben we misschien niet de detectie van de vorige fouten, maar we kunnen problemen detecteren zoals stijlen die elkaar overlappen of verkeerde eigenschappen hebben, zoals we het vorige voorbeeld zagen waar Minder heeft geen gedetecteerd breedte: rood; bijvoorbeeld.
Om deze manier van debuggen te demonstreren, gaan we de volgende stijl in ons bestand bouwen: style-error.less:

 h1 {lettergrootte: 3em; kleur: tomaat; } kop {h1 {lettergrootte: 2em; }} # content-footer {span {font-family: Times, serif; }}

Dan in ons bestand HTML waar we de bibliotheken noemen, zou als volgt moeten zijn:

 Debuggen Minder Js © 2015 Solvetic 

De volgende stap is het runnen van onze HTML in de browser, waar we het volgende zouden moeten krijgen:

Om nu de bijbehorende debug te maken, hoeven we alleen maar met de rechtermuisknop op een van de titels te klikken en naar de optie te zoeken die ons vertelt inspecteer element, hiermee wordt de debug-console van de browser opgeheven.
Eenmaal daar kunnen we onze tweede titel inspecteren en we zullen iets interessants zien, er is een eigenschap die wordt doorgestreept en het is omdat bij overlapping het voor dat element wordt geëlimineerd, hiermee laten we zien hoe we problemen en situaties kunnen lokaliseren die ontsnappen de samensteller van Minder. Laten we in de volgende afbeelding eens kijken hoe deze actie eruitziet:

Voor de eerste stappen in Minder Met deze tools zullen we zeker een optimale ontwikkelingservaring krijgen, waardoor het aantal fouten door weglatingen die we kunnen hebben, verminderen, want wanneer we honderden regels moeten schrijven, kan er iets mis gaan.
Hiermee beëindigen we deze tutorial, we hebben een aantal foutopsporingsopties gezien voor: Minder met behulp van bronnen die we al hebben, hoeven we op deze manier geen andere tools te downloaden of op zoek te gaan naar externe documentatie van derden. Natuurlijk zijn er andere tools en aanvullingen die ons helpen om aan dit soort vereisten te voldoen, maar je moet wat meer onderzoek doen en de leercurve zal groter zijn om hetzelfde doel te bereiken.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven