Oops, ich habe es schon wieder getan: Debugging häufig auftretender Fehler in JavaScript

Manchmal fällt es schwer, JavaScript-Code zu schreiben, und manchmal ist es einfach beängstigend, was vielen Entwicklern bekannt ist. Im Laufe der Arbeit treten zwangsläufig Fehler auf, von denen einige häufig wiederkehren. In diesem Artikel, der für Anfänger-Entwickler gedacht ist, wird über diese Fehler und deren Lösungen gesprochen. Zur Veranschaulichung stammen die Namen der Funktionen, Eigenschaften und Objekte aus einem beliebten Lied. All dies hilft, sich schnell einzuprägen, wie gängige Fehler behoben werden.

Wir erinnern daran: alle Leser von „Habr“ erhalten einen Rabatt von 10.000 Rubel bei der Anmeldung zu einem beliebigen Kurs von Skillbox mit dem Aktionscode „Habr“.

Skillbox empfiehlt: Praktischer Kurs „Mobiler Entwickler PRO“.

TypeError: Eigenschaft 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)

Das oben angegebene Codebeispiel gibt den Fehler Uncaught TypeError: Cannot read property ‘lucky’ of undefined aus. Das Problem ist, dass das Objekt girl keine Eigenschaft named hat, wohl aber die Eigenschaft name. Da die Eigenschaft girl.named nicht definiert ist, kann auch nicht darauf zugegriffen werden, denn formal existiert sie nicht. Wenn man jedoch girl.named.lucky durch girl.name ersetzt, funktioniert alles und das Programm gibt Lucky zurück.

Mehr über Eigenschaften kann man hier.

Methoden zur Behebung von TypeError-Fehlern

TypeError-Fehler treten auf, wenn der Programmierer versucht, Aktionen mit Daten auszuführen, die nicht dem bestimmten Typ entsprechen. Ein Beispiel hierfür wäre die Anwendung von .bold(), der Zugriff auf eine undefinierte Eigenschaft oder der Aufruf einer Funktion, die tatsächlich keine Funktion ist.

Wenn man beispielsweise girl () aufruft, erscheint der Fehler Uncaught TypeError: yourVariable.bold is not a function und girl is not a function, da tatsächlich ein Objekt und keine Funktion aufgerufen wird.

Um die Fehler zu beheben, ist es wichtig, die Variablen zu untersuchen. Was ist also girl? Und was ist girl.named? Das kann man herausfinden, indem man den Code analysiert, die Variablen über console.log ausgibt, die debug-Befehle verwendet oder den Namen der Variablen in der Konsole aufruft. Man muss sicherstellen, dass man mit dem Datentyp operieren kann, der in der Variablen enthalten ist. Wenn er nicht passt, sollte man ihn ändern, zum Beispiel eine Bedingung hinzufügen oder einen try..catch-Block verwenden – und schon hat man Kontrolle über den Ablauf der Operation.

Stacküberlauf

Wenn man den Autoren des Liedes Baby One More Time (das ist Britney Spears, genau) Glauben schenken darf, bedeutet das Wort hit in diesem Kontext den Wunsch der Sängerin, dass sie noch einmal angerufen wird (hier ist die Erklärung des Kontexts des Liedes, Anm. des Übersetzers). Es ist durchaus möglich, dass dieser Wunsch zu einer Erhöhung der Anrufanzahl im realen Leben führt. Aber in der Programmierung ist es Rekursion, die im Fall eines Stacküberlaufs einen Fehler verursachen kann.

Fehler erscheinen folgendermaßen:

Fehler: Kein Speicherplatz im Stack (Edge)
InternalError: Zu viel Rekursion (Firefox)
RangeError: Maximale Stapelgröße überschritten (Chrome)

Ein Stacküberlauf tritt auf, wenn der Entwickler den Basisfall in der Rekursion nicht berücksichtigt hat oder wenn der Code nicht auf den vorgesehenen Fall verweist.

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

In diesem Fall kann stillBelieve niemals den Wert false annehmen, weshalb immer ein Aufruf von oneMoreTime stattfindet, die Funktion jedoch niemals abgeschlossen wird.

Wenn man hingegen auf zwei Freunde hofft, wird dies das loneliness (Einsamkeit) verringern, und man muss den Anruf nicht erwarten.

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

Ein Beispiel können Situationen mit endlosen Schleifen sein, in denen das System keine Fehlermeldung ausgibt und die Seite, auf der der JavaScript-Code ausgeführt wird, einfach einfriert. Das passiert, wenn die while-Schleife kein Abschlusskriterium hat.

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

Das Problem kann wie folgt gelöst werden:

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

Fehlerbehebung bei endlosen Schleifen und Rekursionen

Wenn es ein Problem mit einer endlosen Schleife gibt, sollte man in Chrome oder Edge den Tab schließen und in Firefox das Browserfenster. Danach muss der Code gründlich überprüft werden. Wenn das Problem nicht gefunden werden kann, sollte der Befehl debugger in die Schleife oder Funktion eingefügt werden, um den Wert der Variablen zu überprüfen. Wenn das Ergebnis nicht den Erwartungen entspricht, kann man es leicht ändern.

Im obigen Beispiel sollte der Debugger als erste Zeile der Funktion oder Schleife hinzugefügt werden. Dann muss der Debugging-Tab in Chrome geöffnet werden, um die Variablen im Scope zu analysieren. Mit der Schaltfläche 'Next' können deren Änderungen bei jeder Iteration verfolgt werden. Dies alles ist einfach zu bewerkstelligen, und in den meisten Fällen liegt das Problem darin.

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

Syntaxfehler

Einer der häufigsten Fehler in JavaScript ist der SyntaxError. Erweiterungen für Texteditoren können helfen, diese zu vermeiden. So hebt Bracket Pair Colorizer die Klammern im Code mit verschiedenen Farben hervor, während Prettier oder ein ähnliches Analysewerkzeug die Möglichkeit bietet, Fehler schnell zu finden. Die beste Option, um die Wahrscheinlichkeit eines SyntaxErrors zu verringern, ist eine minimale Verschachtelung.

Teilen Sie in den Kommentaren: Was tun Sie, um Fehler zu vermeiden oder sie schnell zu erkennen und zu beheben?

Skillbox empfiehlt:

• Zweijähriger praktischer Kurs „Ich bin ein Webentwickler PRO“.
• Online-Kurs „C#-Entwickler von Grund auf“.
• Praktischer Jahreskurs „PHP-Entwickler von 0 bis PRO“.

Quelle: habr.com