Hoppla, ich habe es wieder getan: Häufige Fehler in JavaScript debuggen

Das Schreiben von JavaScript-Code kann herausfordernd und manchmal geradezu einschüchternd sein, wie viele Entwickler wissen. Im Arbeitsprozess treten zwangsläufig Fehler auf, die sich zum Teil häufig wiederholen. Dieser Artikel richtet sich an unerfahrene Entwickler und befasst sich mit diesen Fehlern und deren Behebung. Aus Gründen der Übersichtlichkeit werden die Namen von Funktionen, Eigenschaften und Objekten übernommen bekanntes Lied. All dies hilft Ihnen, sich schnell daran zu erinnern, wie Sie häufige Fehler korrigieren können.

Erinnerung: für alle Leser von „Habr“ – ein Rabatt von 10 Rubel bei der Anmeldung zu einem beliebigen Skillbox-Kurs mit dem Aktionscode „Habr“.

Skillbox empfiehlt: Praktischer Kurs „Mobile Developer PRO“.

TypeError: Eigenschaft ist nicht definiert

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

Der obige Beispielcode löst den Fehler Uncaught TypeError: Cannot read property 'lucky' of undefined aus. Das Problem besteht darin, dass das Mädchenobjekt keine benannte Eigenschaft hat, obwohl es eine Namenseigenschaft hat. Und da die Eigenschaft girl.named nicht definiert ist, können Sie nicht darauf zugreifen, da sie formal nicht existiert. Wenn Sie jedoch girl.named.lucky durch girl.name ersetzen, funktioniert alles und das Programm gibt Lucky zurück.

Sie können mehr über die Eigenschaften erfahren lesen Sie hier.

So beheben Sie TypeErrors

Typfehler treten auf, wenn ein Programmierer versucht, Aktionen für Daten auszuführen, die keinem bestimmten Typ entsprechen. Beispiele hierfür sind die Verwendung von .bold(), die Abfrage einer undefinierten Eigenschaft oder der Aufruf einer Funktion, die eigentlich keine Funktion ist.

Wenn Sie also versuchen, girl() aufzurufen, erhalten Sie die Fehlermeldung Uncaught TypeError: yourVariable.bold is not a function und girl ist keine Funktion, da es sich tatsächlich um ein aufgerufenes Objekt und nicht um eine Funktion handelt.

Um Fehler zu beseitigen, müssen Sie die Variablen untersuchen. Also, was ist ein Mädchen? Was ist girl.named? Sie können dies herausfinden, indem Sie den Code analysieren, Variablen mit console.log oder dem Debugger-Befehl anzeigen oder den Variablennamen in der Konsole aufrufen. Sie müssen sicherstellen, dass der in der Variablen enthaltene Datentyp bearbeitet werden kann. Wenn es nicht passt, ändern Sie es, fügen Sie beispielsweise eine Bedingung oder einen try..catch-Block hinzu – und gewinnen Sie die Kontrolle über die Ausführung der Operation.

Paketüberfluss

Glaubt man den Autoren des Textes zum Lied „Baby One More Time“ (das ist Britney Spears, ja), dann bedeutet das Wort „Hit“ in diesem Zusammenhang den Wunsch der Sängerin, noch einmal genannt zu werden (hier ist eine Erklärung des eigentlichen Kontexts). Lied - Anmerkung des Übersetzers). Es kann durchaus sein, dass dieser Wunsch im wirklichen Leben zu einer Zunahme der Anrufe führt. In der Programmierung handelt es sich jedoch um eine Rekursion, die einen Fehler verursachen kann, wenn der Aufrufstapel überläuft.

Die Fehler sehen so aus:

Fehler: Nicht genügend Stapelspeicherplatz (Edge)
InternalError: zu viel Rekursion (Firefox)
RangeError: Maximale Aufrufstapelgröße überschritten (Chrome)

Ein Stapelüberlauf tritt auf, wenn der Entwickler den Basisfall bei der Rekursion nicht berücksichtigt oder wenn der Code den beabsichtigten Fall nicht berücksichtigt.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

In diesem Fall kann stillBelieve niemals falsch sein, daher wird jedes Mal oneMoreTime aufgerufen, die Funktion wird jedoch nie abgeschlossen.

Wenn Sie anfangen, sich auf zwei Freunde zu verlassen, verringert sich die Einsamkeit und Sie müssen nicht auf einen Anruf warten.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

Ein Beispiel sind Fälle mit Endlosschleifen, bei denen das System keine Fehlermeldung generiert, die Seite, auf der der JavaScript-Code ausgeführt wird, jedoch einfach einfriert. Dies geschieht, wenn die while-Schleife keine Beendigungsbedingung hat.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

Sie können das Problem wie folgt lösen:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

Debuggen von Endlosschleifen und Rekursionen

Wenn Sie ein Endlosschleifenproblem haben, müssen Sie die Registerkarte in Chrome oder Edge und das Browserfenster in Firefox schließen. Danach müssen Sie den Code sorgfältig analysieren. Wenn Sie das Problem nicht finden können, lohnt es sich, Ihrer Schleife oder Funktion einen Debugger-Befehl hinzuzufügen und die Werte der Variablen zu überprüfen. Sollte das Ergebnis nicht den Erwartungen entsprechen, dann tauschen wir es aus, das geht ganz einfach.

Im obigen Beispiel sollte debugger als erste Zeile der Funktion oder Schleife hinzugefügt werden. Dann müssen Sie die Registerkarte „Debug“ in Chrome öffnen und die Variablen im Gültigkeitsbereich analysieren. Mit der Schaltfläche „Weiter“ können Sie deren Änderungen bei jeder Iteration verfolgen. All dies ist einfach durchzuführen und in den meisten Fällen wird das Problem gefunden.

Mehr dazu können Sie hier lesen (für Chrome) und hier (für Firefox).

Syntax-Fehler

Einer der häufigsten Fehler in JavaScript ist SyntaxError. Mithilfe von Texteditor-Erweiterungen können Sie diese vermeiden. Beispielsweise markiert Bracket Pair Colorizer Klammern im Code mit unterschiedlichen Farben und Prettier oder ein ähnliches Analysetool ermöglicht das schnelle Auffinden von Fehlern. Die beste Option, um die Wahrscheinlichkeit eines SyntaxError zu verringern, ist eine minimale Verschachtelung.

Teilen Sie es in den Kommentaren: Was tun Sie, um Fehler zu vermeiden bzw. diese schnell zu erkennen und zu beseitigen?

Skillbox empfiehlt:

• Zweijähriges Praktikum „Ich bin ein PRO-Webentwickler“.
• Online Kurs „C#-Entwickler von 0“.
• Praktisches Jahr „PHP-Entwickler von 0 bis PRO“.

Source: habr.com