{"id":32769,"date":"2019-10-31T21:48:48","date_gmt":"2019-10-31T18:48:48","guid":{"rendered":"https:\/\/prohoster.info\/blog\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript\/"},"modified":"2019-10-31T21:48:48","modified_gmt":"2019-10-31T18:48:48","slug":"oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","status":"publish","type":"post","link":"https:\/\/prohoster.info\/de\/blog\/novosti-interneta\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, I did it again: Debugging g\u00e4ngiger Fehler in JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nManchmal ist das Schreiben von JavaScript-Code eine Herausforderung und kann sogar abschreckend sein, was vielen Entwicklern bekannt ist. W\u00e4hrend der Arbeit treten unvermeidlich Fehler auf, von denen einige h\u00e4ufig wiederkehren. Dieser Artikel richtet sich an angehende Entwickler und behandelt diese Fehler sowie deren L\u00f6sungen. Zur Veranschaulichung wurden die Namen von Funktionen, Eigenschaften und Objekten aus einem beliebten Lied<\/a><\/noindex>. Das alles hilft, sich schnell einzupr\u00e4gen, wie man h\u00e4ufige Fehler behebt.
\n<\/a><\/noindex><\/p>\n

Wir erinnern daran:<\/b> alle Leser von \u201eHabr\u201c erhalten einen Rabatt von 10.000 Rubel bei der Anmeldung zu einem beliebigen Kurs von Skillbox mit dem Aktionscode \u201eHabr\u201c.<\/i><\/p>\n

Skillbox empfiehlt:<\/b> Praktischer Kurs \u201eMobile Entwickler PRO\u201c<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: Eigenschaft ist nicht definiert<\/h3>\n

<\/p>\n

let girl = {\n    name: \"Lucky\",\n    location: \"Hollywood\",\n    profession: \"star\",\n    thingsMissingInHerLife: true,\n    lovely: true,\n    cry: function() {\n        return \"cry, cry, cries in her lonely heart\"\n    }\n}\nconsole.log(girl.named.lucky)<\/code><\/pre>\n
\nDas obige Codebeispiel gibt den Fehler Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined aus. Das Problem ist, dass das Objekt girl keine Eigenschaft named hat, obwohl es die Eigenschaft name gibt. Da die Eigenschaft girl.named nicht definiert ist, kann auch nicht darauf zugegriffen werden, weil sie formal nicht existiert. Wenn man jedoch girl.named.lucky durch girl.name ersetzt, funktioniert alles und das Programm gibt Lucky zur\u00fcck.<\/p>\n
Weitere Informationen zu Eigenschaften finden Sie hier nachlesen.<\/a><\/noindex>.<\/p>\n
Methoden zur Behebung von TypeError<\/h3>\n
\nTypeError-Fehler treten auf, wenn ein Programmierer versucht, mit Daten zu arbeiten, die nicht dem angegebenen Typ entsprechen. Ein Beispiel w\u00e4re die Anwendung von .bold(), das Abfragen einer undefined-Eigenschaft oder der Aufruf einer Funktion, die tats\u00e4chlich keine Funktion ist.<\/p>\n
Wenn man also versucht, girl() aufzurufen, erscheint der Fehler Uncaught TypeError: yourVariable.bold is not a function und girl is not a function, da tats\u00e4chlich ein Objekt und keine Funktion aufgerufen wird.<\/p>\n
Um Fehler zu beheben, muss man die Variablen untersuchen. Was ist also girl? Und was ist girl.named? Dies l\u00e4sst sich herausfinden, indem man den Code analysiert, die Variablen mit console.log ausgibt, einen debug-Befehl verwendet oder den Namen der Variablen in der Konsole aufruft. Man sollte sicherstellen, dass man den Datentyp, der in der Variablen enthalten ist, bearbeiten kann. Wenn dieser nicht geeignet ist, sollte man ihn \u00e4ndern, zum Beispiel durch das Hinzuf\u00fcgen einer Bedingung oder eines try..catch-Blocks, um die Kontrolle \u00fcber die Ausf\u00fchrung der Operation zu erhalten.<\/p>\n
Stack\u00fcberlauf<\/h3>\n
\nWenn man den Autoren des Songs \"Baby One More Time\" (das ist Britney Spears, ja) Glauben schenkt, dann bedeutet das Wort \"hit\" in diesem Kontext den Wunsch der S\u00e4ngerin, dass sie noch einmal angerufen wird (hier eine Erkl\u00e4rung zum Kontext des Songs \u2013 Anmerkung des \u00dcbersetzers). Es k\u00f6nnte gut sein, dass dieser Wunsch in der realen Welt zu einer erh\u00f6hten Anzahl von Anrufen f\u00fchrt. In der Programmierung hingegen handelt es sich um Rekursion, die einen Fehler verursachen kann, wenn der Aufrufstapel \u00fcberl\u00e4uft.<\/p>\n
Fehler sehen folgenderma\u00dfen aus:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nEin \u00dcberlauf des Stapels tritt auf, wenn der Entwickler den Basisfall in der Rekursion nicht ber\u00fccksichtigt hat oder wenn der Code nicht auf den vorgesehenen Fall verweist.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness++\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nIn diesem Fall kann stillBelieve niemals den Wert false annehmen, daher wird oneMoreTime jedes Mal aufgerufen, aber die Ausf\u00fchrung der Funktion wird nie beendet.<\/p>\n
Wenn man jedoch anf\u00e4ngt, auf zwei Freunde zu hoffen, verringert sich die Einsamkeit (loneliness), und man kann auf einen Anruf verzichten.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness--\n    stillBelieve = false\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nEin Beispiel sind unendliche Schleifen, bei denen das System keine Fehlermeldung ausgibt und die Seite, auf der der JavaScript-Code ausgef\u00fchrt wird, einfach einfriert. Dies geschieht, wenn die while-Schleife keine Abschlussbedingung hat.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Tanzen, bis die Welt endet\")\n}<\/code><\/pre>\n
\nDas Problem l\u00e4sst sich wie folgt l\u00f6sen:<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Tanzen, bis die Welt endet\")\n  worldEnded = true\n}<\/code><\/pre>\n
<\/p>\n
Debugging von unendlichen Schleifen und Rekursionen<\/h3>\n
\nWenn ein Problem mit einer unendlichen Schleife auftritt, muss im Chrome oder Edge der Tab geschlossen werden, w\u00e4hrend im Firefox das Browserfenster geschlossen wird. Danach sollte der Code gr\u00fcndlich analysiert werden. Wenn das Problem nicht gefunden werden kann, sollte der Befehl debugger in die Schleife oder Funktion eingef\u00fcgt werden, um den Wert der Variablen zu \u00fcberpr\u00fcfen. Wenn das Ergebnis nicht den Erwartungen entspricht, kann dies leicht ersetzt werden.<\/p>\n
Im obigen Beispiel sollte der Debugger in der ersten Zeile der Funktion oder Schleife hinzugef\u00fcgt werden. Danach muss das Debugging-Panel in Chrome ge\u00f6ffnet werden, um die Variablen im Scope zu analysieren. Mit der Schaltfl\u00e4che 'Next' k\u00f6nnen Sie deren \u00c4nderungen bei jeder Iteration verfolgen. Das alles ist einfach, und in den meisten F\u00e4llen befindet sich das Problem.<\/p>\n
Detailliertere Informationen dazu finden Sie hier (f\u00fcr Chrome<\/a><\/noindex>) und hier (f\u00fcr Firefox<\/a><\/noindex>).<\/p>\n
Syntaxfehler<\/h3>\n
\nEiner der h\u00e4ufigsten Fehler in JavaScript ist der SyntaxError. Um diese zu vermeiden, helfen Erweiterungen f\u00fcr Texteditoren. So hebt Bracket Pair Colorizer die Klammern im Code in verschiedenen Farben hervor, und Prettier oder ein \u00e4hnliches Analysewerkzeug erm\u00f6glicht es, Fehler schnell zu finden. Die beste Methode, um die Wahrscheinlichkeit eines SyntaxErrors zu verringern, ist eine minimale Verschachtelung.<\/p>\n
Teilen Sie in den Kommentaren mit: Was tun Sie, um Fehler zu vermeiden oder sie schnell zu erkennen und zu beheben?<\/p>\n
Skillbox empfiehlt:<\/b><\/p>\n