{"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\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, ich habe es schon wieder getan: Debugging h\u00e4ufig auftretender Fehler in JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nManchmal f\u00e4llt es schwer, JavaScript-Code zu schreiben, und manchmal ist es einfach be\u00e4ngstigend, was vielen Entwicklern bekannt ist. Im Laufe der Arbeit treten zwangsl\u00e4ufig Fehler auf, von denen einige h\u00e4ufig wiederkehren. In diesem Artikel, der f\u00fcr Anf\u00e4nger-Entwickler gedacht ist, wird \u00fcber diese Fehler und deren L\u00f6sungen gesprochen. Zur Veranschaulichung stammen die Namen der Funktionen, Eigenschaften und Objekte aus einem beliebten Lied<\/a><\/noindex>. All dies hilft, sich schnell einzupr\u00e4gen, wie g\u00e4ngige Fehler behoben werden.
\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 \u201eMobiler Entwickler PRO\u201c<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: Eigenschaft 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 oben angegebene 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, 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\u00fcck.<\/p>\n
Mehr \u00fcber Eigenschaften kann man hier<\/a><\/noindex>.<\/p>\n
Methoden zur Behebung von TypeError-Fehlern<\/h3>\n
\nTypeError-Fehler treten auf, wenn der Programmierer versucht, Aktionen mit Daten auszuf\u00fchren, die nicht dem bestimmten Typ entsprechen. Ein Beispiel hierf\u00fcr w\u00e4re die Anwendung von .bold(), der Zugriff auf eine undefinierte Eigenschaft oder der Aufruf einer Funktion, die tats\u00e4chlich keine Funktion ist.<\/p>\n
Wenn man beispielsweise girl () aufruft, 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 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 \u00fcber 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 \u00e4ndern, zum Beispiel eine Bedingung hinzuf\u00fcgen oder einen try..catch-Block verwenden \u2013 und schon hat man Kontrolle \u00fcber den Ablauf der Operation.<\/p>\n
Stack\u00fcberlauf<\/h3>\n
\nWenn 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\u00e4ngerin, dass sie noch einmal angerufen wird (hier ist die Erkl\u00e4rung des Kontexts des Liedes, Anm. des \u00dcbersetzers). Es ist durchaus m\u00f6glich, dass dieser Wunsch zu einer Erh\u00f6hung der Anrufanzahl im realen Leben f\u00fchrt. Aber in der Programmierung ist es Rekursion, die im Fall eines Stack\u00fcberlaufs einen Fehler verursachen kann.<\/p>\n
Fehler erscheinen folgenderma\u00dfen:<\/p>\n
Fehler: Kein Speicherplatz im Stack (Edge)
\nInternalError: Zu viel Rekursion (Firefox)
\nRangeError: Maximale Stapelgr\u00f6\u00dfe \u00fcberschritten (Chrome)
\n <\/i>
\nEin Stack\u00fcberlauf 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, weshalb immer ein Aufruf von oneMoreTime stattfindet, die Funktion jedoch niemals abgeschlossen wird.<\/p>\n
Wenn man hingegen auf zwei Freunde hofft, wird dies das loneliness (Einsamkeit) verringern, und man muss den Anruf nicht erwarten.<\/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 k\u00f6nnen Situationen mit endlosen Schleifen sein, in denen das System keine Fehlermeldung ausgibt und die Seite, auf der der JavaScript-Code ausgef\u00fchrt wird, einfach einfriert. Das passiert, wenn die while-Schleife kein Abschlusskriterium hat.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nDas Problem kann wie folgt gel\u00f6st werden:<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n  worldEnded = true\n}<\/code><\/pre>\n
<\/p>\n
Fehlerbehebung bei endlosen Schleifen und Rekursionen<\/h3>\n
\nWenn es ein Problem mit einer endlosen Schleife gibt, sollte man in Chrome oder Edge den Tab schlie\u00dfen und in Firefox das Browserfenster. Danach muss der Code gr\u00fcndlich \u00fcberpr\u00fcft 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 man es leicht \u00e4ndern.<\/p>\n
Im obigen Beispiel sollte der Debugger als erste Zeile der Funktion oder Schleife hinzugef\u00fcgt werden. Dann muss der Debugging-Tab in Chrome ge\u00f6ffnet werden, um die Variablen im Scope zu analysieren. Mit der Schaltfl\u00e4che 'Next' k\u00f6nnen deren \u00c4nderungen bei jeder Iteration verfolgt werden. Dies alles ist einfach zu bewerkstelligen, und in den meisten F\u00e4llen liegt das Problem darin.<\/p>\n
Mehr dar\u00fcber k\u00f6nnen Sie hier lesen (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. Erweiterungen f\u00fcr Texteditoren k\u00f6nnen helfen, diese zu vermeiden. So hebt Bracket Pair Colorizer die Klammern im Code mit verschiedenen Farben hervor, w\u00e4hrend Prettier oder ein \u00e4hnliches Analysewerkzeug die M\u00f6glichkeit bietet, Fehler schnell zu finden. Die beste Option, um die Wahrscheinlichkeit eines SyntaxErrors zu verringern, ist eine minimale Verschachtelung.<\/p>\n
Teilen Sie in den Kommentaren: Was tun Sie, um Fehler zu vermeiden oder sie schnell zu erkennen und zu beheben?<\/p>\n
Skillbox empfiehlt:<\/b><\/p>\n