Debuggen mit Less.js

Die Tatsache, dass Weniger.js behandeln die CSS als eine Art Programmiersprache gibt uns die Möglichkeit, Syntaxfehler zu begehen, die nur mit CSS Das einzige, was wir bekommen würden, ist, dass der Stil nicht richtig herauskommt, aber in Weniger Was uns erzeugen würde, wäre, dass kein Stil zu sehen wäre.
Aus diesem Grund ist es sehr wichtig, über Tools zu verfügen, die es uns ermöglichen, die Fehler im Entwicklungsprozess zu erkennen, damit wir weniger Zeit damit verschwenden, in großen Codeblöcken zu suchen, die fehlschlagen.
Der Natur wegen von Less.js testorientierte Entwicklung ist noch nicht möglich, deshalb tun debuggen Oft, wenn nicht immer, muss dies im Browser erfolgen, was nicht sehr optimal ist, aber es ist die Lösung, die wir zur Hand haben.
1- Um dieses Tutorial durchführen zu können, benötigen wir grundlegende Kenntnisse und Vorstellungen von CSS, da es sich zwar auf Weniger wir müssen noch wissen, wie die Stile aufgebaut sind und wie zumindest die grundlegenden Eigenschaften verwendet werden, damit wir bei möglichen Fehlern eine angemessene Referenz haben.
2- Wir müssen eine für die Verwendung konfigurierte Umgebung haben Weniger, d. h. ein Ordner mit dem heruntergeladenen und zur Verwendung verfügbaren Projekt.
3- Wenn wir verwenden Google Chrome Wir werden einen Webserver-Stil brauchen Apache Da dieser Browser aus Sicherheitsgründen die lokalen Anfragen von Less blockiert, können wir dieses Setup verwenden, wenn wir dieses Setup nicht möchten Feuerfuchs.
4- Schließlich brauchen wir auch noch einen Texteditor, in den die Beispiele geschrieben werden können, es kann sein Erhabener Text oder vielleicht NotePad ++ haben beide Editoren die Möglichkeit, Plugins zu integrieren, um die Syntax von . hervorzuheben JavaScript und von CSS. Darüber hinaus ist es wichtig, dass wir in unserem System über Berechtigungen verfügen, um diese Dateien am ausgewählten Ort zu speichern.
Eine der ersten Möglichkeiten, die wir haben, besteht darin, unsere Code- und Syntaxfehler direkt in unserer Umgebung mit der Bibliothek auszugeben weniger.jsDies wird in der Entwicklungsumgebung erreicht, indem unsere Bibliothek direkt auf dem Client ausgeführt wird, in diesem Fall im Browser.
Dies ist sehr wichtig, da wir beim Auftreten eines Fehlers direkt auf diese Weise kompilieren weniger erzeugt keinen Stil, wenn es also einen Fehler gibt, sehen wir nur unsere Struktur HTML aber ohne CSS. Um diese Art von Debugging durchzuführen, können wir der Anleitung im folgenden Code folgen:

 Debuggen mit weniger Js 

Das erste, was wir sehen, ist, dass wir eine benutzerdefinierte Datei namens . einbinden Stilfehler.weniger Diese Datei enthält den eigenen Code, den wir debuggen, dann müssen wir eine Variable namens . definieren weniger und weise ihm ein Element zu env die wir anrufen Entwicklung, dann binden wir unsere Bibliothek ein weniger.js und mit dieser Variable sagen wir was wir machen weniger dass es beim Auftreten eines Fehlers unter anderem die Nachricht wirft, für die es den Code nicht kompilieren kann.
In unserem Archiv Stilfehler.weniger Wir werden den folgenden fehlerhaften Code platzieren:

 h1 {Farbe: rot; Schriftgröße: 3em;

Wie wir bemerkt haben, müssen wir am Ende einen Schlüssel schließen, analytisch sieht dieser Fehler natürlich etwas einfach und albern aus, aber wenn wir Hunderte von Zeilen haben, ist es sehr sicher, dass wir irgendwann vergessen, einen Schlüssel zu schließen. Im Moment der Ausführung unseres Dokuments werden wir dann sehen, wie Weniger wirft uns einen Fehler im Browser:

VERGRÖSSERN

Wie wir den Compiler im Browser sehen Weniger Es sagt uns, dass es etwas gibt, das es nicht erkennt und dass wir wahrscheinlich etwas vergessen haben. In diesem Fall wissen wir, dass es der Schlüssel war, den wir nicht geschlossen haben.
Hier müssen wir eine kleine Pause machen, wir haben anfangs schon gesehen, wie wir die Fehler in WenigerWir wissen jedoch noch nicht, was die Fehler, die wir erhalten, bedeuten können, deshalb werden wir die wichtigsten definieren, damit wir genügend Gründe haben, um zu wissen, wonach wir suchen und welche möglichen Lösungen wir anwenden können.
DateifehlerDieser Fehler bezieht sich auf einen fehlgeschlagenen Import aus einer anderen Datei, wenn wir uns in unseren Dateien erinnern weniger wir können die anleitung gebrauchen @importieren um andere Dateien einzubinden, um unsere Funktionalitäten zu organisieren und zu erweitern.
Syntax-FehlerDieser Fehler tritt auf, wenn wir eine Anweisung falsch schreiben oder eine Eigenschaft falsch platzieren, beispielsweise wenn wir eine Eigenschaft außerhalb eines Blocks deklarieren.
Im folgenden Bild sehen wir, wie ein Fehler dieser Art aussieht, wir erreichen ihn mit folgendem Code:

 Farbe Rot; h1 {Schriftgröße: 3em; }

Wo wir deutlich sehen können, dass die Immobilie Farbe Rot nicht an der richtigen Position ist, sehen wir uns an, wie es aussieht, wenn wir es im Browser ausführen:

VERGRÖSSERN

ParseErrorEs war der Fehler, den wir im ersten Beispiel ausgelöst haben. Dieser tritt auf, wenn wir vergessen, die geschweiften Klammern oder Semikolons dort zu platzieren, wo sie benötigt werden.
NameFehlerDieser Fehler tritt auf, wenn wir eine Variable aufrufen oder a mischen die in der Umgebung dieser Datei nicht definiert oder nicht verfügbar ist Weniger.
Eine andere Sache, die wir hervorheben müssen, ist, dass Weniger Es überprüft nur, ob die Syntax und die Namen korrekt sind, es wird jedoch nicht überprüft, ob unser Inhalt korrekt ist. Sehen wir uns beispielsweise den folgenden Code an:

 h1 {Farbe: rot; Schriftgröße: 3em; Breite: rot; }

Der obige Code wird ohne Probleme kompiliert, obwohl wir deutlich sehen, dass die Eigenschaft Breite Es muss eine Größenangabe und keine Farbe haben, wenn wir dasselbe in unserem Browser ausführen, wird die Datei ausgeführt und funktioniert:

VERGRÖSSERN

Wir müssen also wachsam sein, da diese Technik nicht völlig unfehlbar ist und es Fehler gibt, die nicht erkannt werden.
Eine weitere der Techniken, die wir verwenden können, um ein debuggen unseres Codes sind die Browser-Entwicklertools, derzeit die wichtigsten Browser wie Chrom Ja Feuerfuchs haben Werkzeuge, die es uns ermöglichen zu verstehen, wie die HTML und wie es sich verhält und auf diese Weise können wir sie verwenden, um unseren Code zu sehen Weniger.
Dies gibt uns ein höheres Maß an debuggen, insbesondere wenn wir die Variable nicht verwenden können env wie wir im vorherigen Abschnitt gesehen haben, können wir bei dieser Art des Debuggens möglicherweise nicht die vorherigen Fehler erkennen, aber wir können Probleme wie Stile erkennen, die sich überschneiden oder falsche Eigenschaften haben, wie wir im vorherigen Beispiel gesehen haben, wo Weniger nicht erkannt Breite: rot; zum Beispiel.
Um diese Art des Debuggens zu demonstrieren, werden wir den folgenden Stil in unserer Datei erstellen Stilfehler.weniger:

 h1 {Schriftgröße: 3em; Farbe: Tomate; } Überschrift {h1 {Schriftgröße: 2em; }} # content-footer {span {font-family: Times, serif; }}

Dann in unserer Datei HTML wo wir die Bibliotheken aufrufen, sollte wie folgt lauten:

 Weniger Js debuggen © 2015 Solvetic 

Der nächste Schritt ist die Ausführung unserer HTML im Browser, wo wir Folgendes erhalten sollten:

Um nun das entsprechende Debugging durchzuführen, müssen wir nur mit der rechten Maustaste auf einen der Titel klicken und nach der Option suchen, die uns sagt Element prüfen, damit wird die Debug-Konsole des Browsers aufgehoben.
Dort können wir unseren zweiten Titel inspizieren und werden etwas Interessantes sehen, es gibt eine Eigenschaft, die durchgestrichen wird und weil sie bei Überlappung für dieses Element eliminiert wird. Damit zeigen wir, wie wir Probleme und Situationen lokalisieren können, die entkommen der Compiler von Weniger. Sehen wir uns dann im folgenden Bild an, wie diese Aktion aussieht:

Für die ersten Schritte in Weniger Mit diesen Tools werden wir sicherlich ein optimales Entwicklungserlebnis erzielen und die Anzahl der Fehler durch Auslassen reduzieren, die wir möglicherweise haben, denn wenn wir Hunderte von Zeilen schreiben müssen, kann etwas schief gehen.
Damit beenden wir dieses Tutorial, wir haben ein paar Debugging-Optionen für gesehen Weniger Ressourcen nutzen, die wir bereits haben, auf diese Weise müssen wir keine anderen Tools herunterladen oder nach externer Dokumentation von Drittanbietern suchen. Natürlich gibt es andere Tools und Ergänzungen, die uns helfen, diese Art von Anforderungen zu erfüllen, aber Sie müssen ein wenig mehr untersuchen und die Lernkurve wird größer sein, um das gleiche Ziel zu erreichen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben