JavaScript-Debugging und Fehlerbehandlung

Rückblick auf Arten von JavaScript-Fehlern

Früher im Modul, in Was ist schiefgelaufen?, betrachteten wir weitgehend die Arten von Fehlern, die in JavaScript-Programmen auftreten können, und sagten, dass sie grob in zwei Typen unterteilt werden können — Syntaxfehler und Logikfehler. Wir haben Ihnen auch geholfen, einige häufige Arten von JavaScript-Fehlermeldungen zu verstehen, und Ihnen gezeigt, wie man mit einfachen Debugging-Maßnahmen wie console.log()-Anweisungen vorgeht.

In diesem Artikel werden wir etwas tiefer in die Werkzeuge eintauchen, die Ihnen zur Verfügung stehen, um Fehler aufzuspüren, und auch Möglichkeiten betrachten, um Fehler von vornherein zu vermeiden.

Linting Ihres Codes

Sie sollten sicherstellen, dass Ihr Code zunächst gültig ist, bevor Sie versuchen, spezifische Fehler aufzuspüren. Nutzen Sie den Markup Validation Service des W3C, den CSS Validation Service und einen JavaScript-Linter wie ESLint, um sicherzustellen, dass Ihr Code gültig ist. Dadurch werden wahrscheinlich einige Fehler aufgedeckt, sodass Sie sich auf die verbleibenden Fehler konzentrieren können.

Plugins für Code-Editoren

Es ist nicht sehr bequem, Ihren Code immer wieder auf eine Webseite zu kopieren und einzufügen, um seine Gültigkeit zu überprüfen. Wir empfehlen, ein Linter-Plugin in Ihrem Code-Editor zu installieren, damit Sie Fehler direkt beim Schreiben Ihres Codes gemeldet bekommen. Versuchen Sie, nach ESLint in der Plugins- oder Erweiterungsliste Ihres Code-Editors zu suchen und es zu installieren.

Häufige JavaScript-Probleme

Es gibt eine Reihe von häufigen JavaScript-Problemen, auf die Sie achten sollten, wie zum Beispiel:

• Grundlegende Syntax- und Logikprobleme (sehen Sie sich auch JavaScript-Fehlerbehebung an).
• Sicherstellen, dass Variablen, etc. im richtigen Geltungsbereich definiert sind und Sie nicht in Konflikte zwischen an verschiedenen Stellen deklarierten Objekten geraten (siehe Funktionsbereich und Konflikte).
• Verwirrung hinsichtlich this, in Bezug auf den Geltungsbereich, auf den es sich bezieht, und ob sein Wert das ist, was Sie beabsichtigt haben. Sie können Was ist "this"? für eine leichte Einführung lesen; Sie sollten auch Beispiele wie dieses studieren, das ein typisches Muster zeigt, den this-Geltungsbereich in einer separaten Variable zu speichern und dann diese Variable in verschachtelten Funktionen zu verwenden, um sicherzustellen, dass die Funktionalität auf den richtigen this-Geltungsbereich angewendet wird.
• Unkorrekte Nutzung von Funktionen innerhalb von Schleifen, die mit einer globalen Variablen iterieren (allgemeiner "Falscher Geltungsbereich").

• Sicherstellen, dass asynchrone Operationen abgeschlossen sind, bevor versucht wird, die zurückgegebenen Werte zu verwenden. Dies bedeutet normalerweise, zu verstehen, wie man Promises verwendet: den Einsatz von await angemessen zu nutzen oder den Code auszuführen, um das Ergebnis eines asynchronen Aufrufs im Handler der then()-Methode zu behandeln. Siehe Anleitung zur Verwendung von Promises für eine Einführung in dieses Thema.

Die JavaScript-Konsole im Browser

Entwicklertools im Browser haben viele nützliche Funktionen zum Debuggen von JavaScript. Zu Beginn wird die JavaScript-Konsole Fehler in Ihrem Code melden.

Machen Sie eine lokale Kopie unseres fetch-broken Beispiels (siehe auch den Source Code).

Wenn Sie in die Konsole schauen, sehen Sie eine Fehlermeldung. Die genaue Wortwahl ist browserabhängig, aber sie wird etwas Ähnliches sein wie: "Uncaught TypeError: heroes is not iterable", und die referenzierte Zeilennummer ist 25. Wenn wir uns den Quellcode ansehen, ist der relevante Abschnitt dieser:

function showHeroes(jsonObj) {
  const heroes = jsonObj["members"];

  for (const hero of heroes) {
    // …
  }
}

Der Code schlägt also fehl, sobald wir versuchen, jsonObj zu verwenden (welches, wie Sie vielleicht erwarten, ein JSON-Objekt sein soll). Das soll aus einer externen .json-Datei mit folgendem fetch()-Aufruf abgerufen werden:

const requestURL =
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";

const response = fetch(requestURL);
populateHeader(response);
showHeroes(response);

Aber das schlägt fehl.

Die Console-API

Vielleicht wissen Sie schon, was mit diesem Code nicht stimmt, aber lassen Sie uns ihn weiter erkunden, um zu zeigen, wie Sie dies untersuchen könnten. Wir beginnen mit der Console-API, die es JavaScript-Code ermöglicht, mit der JavaScript-Konsole des Browsers zu interagieren. Es sind eine Anzahl von Funktionen verfügbar; Sie sind bereits auf console.log() gestoßen, welches eine benutzerdefinierte Nachricht an die Konsole ausgibt.

Fügen Sie einen console.log()-Aufruf hinzu, um den Rückgabewert von fetch() zu protokollieren, so:

const requestURL =
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";

const response = fetch(requestURL);
console.log(`Response value: ${response}`);
populateHeader(response);
showHeroes(response);

Aktualisieren Sie die Seite im Browser. Diesmal, vor der Fehlermeldung, sehen Sie eine neue Nachricht in der Konsole:

Response value: [object Promise]

Die console.log()-Ausgabe zeigt, dass der Rückgabewert von fetch() nicht die JSON-Daten sind, sondern ein Promise. Die fetch()-Funktion ist asynchron: Sie gibt ein Promise zurück, das erst erfüllt wird, wenn die eigentliche Antwort vom Netzwerk empfangen wurde. Bevor wir die Antwort verwenden können, müssen wir warten, bis das Promise erfüllt ist.

console.error() und Call Stacks

Als kurzen Exkurs wollen wir eine andere Konsolenmethode verwenden, um den Fehler zu melden — console.error(). Ersetzen Sie in Ihrem Code

console.log(`Response value: ${response}`);

durch

console.error(`Response value: ${response}`);

Speichern Sie Ihren Code und aktualisieren Sie den Browser, und Sie werden jetzt sehen, dass die Nachricht als Fehler gemeldet wird, mit derselben Farbe und Symbolik wie der nicht abgefangene Fehler darunter. Zusätzlich gibt es jetzt einen Erweiterungspfeil neben der Nachricht. Wenn Sie darauf klicken, sehen Sie eine einzelne Zeile, die Ihnen die Zeile in der JavaScript-Datei anzeigt, aus der der Fehler stammt. Tatsächlich hat auch die Zeile des nicht abgefangenen Fehlers diesen Pfeil, jedoch enthält sie zwei Zeilen:

showHeroes http://localhost:7800/js-debug-test/index.js:25
<anonymous> http://localhost:7800/js-debug-test/index.js:10

Das bedeutet, dass der Fehler von der showHeroes()-Funktion auf Zeile 25 kommt, wie wir zuvor festgestellt haben. Wenn Sie sich Ihren Code ansehen, werden Sie feststellen, dass der anonyme Aufruf in Zeile 10 die Zeile ist, die showHeroes() aufruft. Diese Zeilen werden als Call Stack bezeichnet und können wirklich nützlich sein, wenn Sie versuchen, die Quelle eines Fehlers zu finden, der viele verschiedene Stellen in Ihrem Code betrifft.

Der console.error()-Aufruf ist in diesem Fall nicht besonders nützlich, aber er kann nützlich sein, um einen Call Stack zu erzeugen, wenn noch keiner verfügbar ist.

Beheben des Fehlers

Jedenfalls, lassen Sie uns zu unserem Fehler zurückkehren und versuchen, ihn zu beheben. Wir können die Antwort von dem erfüllten Promise abrufen, indem wir die then()-Methode an das Ende des fetch()-Aufrufs anhängen. Dann können wir den daraus resultierenden Antwortwert in die Funktionen übergeben, die ihn akzeptieren, so:

fetch(requestURL).then((response) => {
  populateHeader(response);
  showHeroes(response);
});

Speichern und aktualisieren, und sehen Sie, ob Ihr Code funktioniert. Spoiler-Alarm — die obige Änderung hat das Problem nicht behoben!

Verwendung des JavaScript-Debuggers

Lassen Sie uns dieses Problem weiter untersuchen mit einem höheren Maß an Komplexität durch die Verwendung eines besseren Features der Entwickler-Tools des Browsers: des JavaScript-Debuggers, wie er in Firefox genannt wird.

In Firefox sieht der Debugger-Tab so aus:

• Links können Sie das Skript auswählen, das Sie debuggen möchten (in diesem Fall haben wir nur eines).
• Das mittlere Panel zeigt den Code im ausgewählten Skript an.
• Das rechte Panel zeigt nützliche Details zur aktuellen Umgebung — Breakpoints, Call Stack und aktuell aktive Scopes.

Das Hauptfeature solcher Tools ist die Möglichkeit, Breakpoints zu Ihrem Code hinzuzufügen — dies sind Punkte, an denen die Ausführung des Codes stoppt, und an diesem Punkt können Sie die Umgebung in ihrem aktuellen Zustand untersuchen und sehen, was passiert.

Lassen Sie uns die Verwendung von Breakpoints erkunden:

1. Der Fehler wird in der gleichen Zeile wie zuvor ausgelöst — for (const hero of heroes) { — Zeile 26 im unten gezeigten Screenshot. Klicken Sie auf die Zeilennummer im mittleren Panel, um einen Breakpoint hinzuzufügen (Sie werden einen blauen Pfeil sehen, der darüber erscheint).
2. Aktualisieren Sie jetzt die Seite (Cmd/Ctrl + R) — der Browser wird die Ausführung des Codes in dieser Zeile anhalten. Zu diesem Zeitpunkt wird die rechte Seite aktualisiert, um Folgendes anzuzeigen:

• Unter Breakpoints sehen Sie die Details des gesetzten Breakpoints.
• Unter Call Stack sehen Sie ein paar Einträge — im Grunde ist dies der gleiche Call Stack wie den, den wir uns vorhin im console.error()-Abschnitt angesehen haben. Call Stack zeigt eine Liste der Funktionen, die aufgerufen wurden, um die aktuelle Funktion aufzurufen. Oben haben wir showHeroes(), die Funktion, in der wir uns befinden, und als Zweites haben wir onload, welches die Event-Handler-Funktion enthält, die den Aufruf von showHeroes() enthält.
• Unter Scopes sehen Sie den aktuell aktiven Scope für die Funktion, die wir betrachten. Wir haben nur drei — showHeroes, block und Window (den globalen Scope). Jeder Scope kann erweitert werden, um die Variablen in ihm und ihre Werte zu sehen, als die Ausführung des Codes gestoppt wurde.

Wir können in hier einige sehr nützliche Informationen finden:

1. Erweitern Sie den showHeroes-Scope — Sie sehen hier, dass die heroes-Variable undefined ist, was darauf hindeutet, dass der Zugriff auf die members-Eigenschaft von jsonObj (erste Zeile der Funktion) nicht funktioniert hat.
2. Sie können auch sehen, dass die jsonObj-Variable ein Response-Objekt speichert und kein JSON-Objekt.

Das Argument für showHeroes() ist der Wert, mit dem das fetch()-Promise erfüllt wurde. Dieses Promise ist also nicht im JSON-Format: Es ist ein Response-Objekt. Es gibt einen zusätzlichen Schritt, der nötig ist, um den Inhalt der Antwort als JSON-Objekt zu erhalten.

Wir möchten, dass Sie versuchen, dieses Problem selbst zu beheben. Um Ihnen den Einstieg zu erleichtern, sehen Sie sich die Dokumentation zum Response-Objekt an. Wenn Sie steckenbleiben, können Sie den korrigierten Quellcode unter https://github.com/mdn/learning-area/tree/main/tools-testing/cross-browser-testing/javascript/fetch-fixed finden.

Fehlerbehandlung in Ihrem JavaScript-Code

HTML und CSS sind nachsichtig — Fehler und nicht erkannte Features können oft aufgrund der Natur der Sprachkonstrukte behandelt werden. Beispielsweise ignoriert CSS nicht erkannte Eigenschaften, und der restliche Code funktioniert oft einfach. JavaScript ist jedoch nicht so nachsichtig wie HTML und CSS — wenn die JavaScript-Engine auf Fehler oder unbekannte Syntax trifft, wirft sie oft Fehler.

Lassen Sie uns eine übliche Strategie zur Fehlerbehandlung in Ihrem JavaScript-Code erkunden. Die folgenden Abschnitte sind dazu gedacht, Schritt für Schritt nachgemacht zu werden, indem Sie die unten angegebene Vorlage als handling-errors.html auf Ihrem lokalen Rechner kopieren, die Code-Snippets zwischen den öffnenden und schließenden <script>- und </script>-Tags hinzufügen und dann die Datei in einem Browser öffnen, um sich die Ausgabe im JavaScript-Console der Entwicklertools anzusehen.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Handling JS errors</title>
  </head>
  <body>
    <script>
      // Code goes below this line
    </script>
  </body>
</html>

Konditionale Anweisungen

Eine häufige Verwendung von JavaScript-Konditionalen ist die Behandlung von Fehlern. Konditionale Anweisungen ermöglichen es Ihnen, je nach Wert einer Variablen unterschiedlichen Code auszuführen. Oft werden Sie dies defensiv verwenden wollen, um zu vermeiden, dass ein Fehler geworfen wird, wenn der Wert nicht existiert oder vom falschen Typ ist, oder um einen Fehler aufzufangen, wenn der Wert ein inkorrektes Ergebnis zurückgeben würde, was später zu Problemen führen könnte.

Schauen wir uns ein Beispiel an. Angenommen, wir haben eine Funktion, die als Argument die Größe eines Benutzers in Zoll entgegennehmen und ihre Größe in Metern zurückgeben soll, auf 2 Dezimalstellen gerundet. Dies könnte folgendermaßen aussehen:

function inchesToMeters(num) {
  const mVal = (num * 2.54) / 100;
  const m2dp = mVal.toFixed(2);
  return m2dp;
}

1. Deklarieren Sie in Ihrem Beispiel-Datei im <script>-Element eine const namens height und weisen Sie ihr einen Wert von 70 zu:

   js

   const height = 70;
   

2. Kopieren Sie die obige Funktion unter diese Zeile.

3. Rufen Sie die Funktion auf, indem Sie ihr das height-Konstant als Argument übergeben, und protokollieren Sie den Rückgabewert an die Konsole:

   js

   console.log(inchesToMeters(height));
   

4. Laden Sie das Beispiel in einem Browser und schauen Sie sich das JavaScript-Console der Entwicklertools an. Sie sollten einen Wert von 1.78 sehen, der darauf protokolliert wird.

5. Dies funktioniert also einwandfrei isoliert. Aber was passiert, wenn die bereitgestellten Daten fehlen oder nicht korrekt sind? Probieren Sie diese Szenarien aus:

   • Wenn Sie den height-Wert in "70" ändern (d.h. 70 als String ausgedrückt), sollte das Beispiel ... immer noch einwandfrei funktionieren. Dies liegt daran, dass die Berechnung in der ersten Code-Zeile den Wert in einen Nummerndatentyp zwingt. In einem einfachen Fall wie diesem ist dies in Ordnung, aber in komplexerem Code können falsche Daten zu allerlei Bugs führen, von denen einige subtil und schwer zu erkennen sein können!
   • Wenn Sie height in einen Wert ändern, der nicht in eine Zahl verwandelt werden kann, wie "70 inches" oder ["Bob", 70], oder NaN, sollte das Beispiel das Ergebnis als NaN zurückgeben. Dies könnte alle möglichen Probleme verursachen, z.B. wenn Sie die Benutzergröße irgendwo in der Benutzeroberfläche der Webseite verwenden möchten.
   • Wenn Sie den height-Wert ganz entfernen (kommentieren Sie ihn aus, indem Sie // an den Anfang der Zeile setzen), zeigt die Konsole einen Fehler an, etwa "Uncaught ReferenceError: height is not defined", was dazu führen kann, dass Ihre Anwendung zum Stillstand kommt.

   Offensichtlich sind keine dieser Ergebnisse großartig. Wie verteidigen wir uns gegen fehlerhafte Daten?

6. Lassen Sie uns eine konditionale Anweisung in unsere Funktion aufnehmen, um zu testen, ob die Daten brauchbar sind, bevor wir versuchen, die Berechnung durchzuführen. Versuchen Sie, Ihre aktuelle Funktion durch folgende zu ersetzen:

   js

   function inchesToMeters(num) {
     if (typeof num !== "number" || Number.isNaN(num)) {
       console.log("A number was not provided. Please correct the input.");
       return undefined;
     }
     const mVal = (num * 2.54) / 100;
     const m2dp = mVal.toFixed(2);
     return m2dp;
   }
   

7. Wenn Sie nun die ersten beiden Szenarien erneut versuchen, sehen Sie unsere geringfügig nützlichere Nachricht zurückgegeben, die Ihnen eine Vorstellung davon gibt, was getan werden muss, um das Problem zu beheben. Sie könnten dort alles einfügen, was Sie möchten, einschließlich des Versuchs, Code auszuführen, um den Wert von num zu korrigieren, aber das wird nicht empfohlen — diese Funktion hat einen einfachen Zweck, und Sie sollten das Korrigieren des Wertes an einer anderen Stelle im System handhaben.

   Hinweis: In der if()-Anweisung prüfen wir zuerst, ob der Datentyp von num "number" ist, indem wir den typeof-Operator verwenden, aber auch testen, ob Number.isNaN(num) false zurückgibt. Wir müssen dies tun, um für den speziellen Fall von num vorbeugend zu handeln, der auf NaN gesetzt ist, weil typeof NaN weiterhin "number" zurückgibt!

8. Wenn Sie jedoch das dritte Szenario erneut versuchen, wird immer noch der "Uncaught ReferenceError: height is not defined"-Fehler an Sie weitergegeben. Sie können nicht von innerhalb einer Funktion heraus beheben, dass ein Wert nicht verfügbar ist, wenn die Funktion diesen Wert verwenden möchte.

Wie gehen wir damit um? Nun, es ist wahrscheinlich besser, unsere Funktion dazu zu bringen, einen benutzerdefinierten Fehler zurückzugeben, wenn sie nicht die richtigen Daten erhält. Zuerst schauen wir uns an, wie man das macht, und dann behandeln wir alle Fehler zusammen.

Benutzerdefinierte Fehler werfen

Sie können jederzeit in Ihrem Code einen benutzerdefinierten Fehler auslösen mit der throw-Anweisung, in Verbindung mit dem Error()-Konstruktor. Lassen Sie uns das in Aktion sehen.

1. Ersetzen Sie in Ihrer Funktion die console.log()-Zeile innerhalb des else-Blocks durch die folgende Zeile:

   js

   throw new Error("A number was not provided. Please correct the input.");
   

2. Führen Sie Ihr Beispiel erneut aus, aber stellen Sie sicher, dass num auf einen schlechten (d.h. keinen zahlenwertigen) Wert eingestellt ist. Dieses Mal sollten Sie Ihren benutzerdefinierten Fehler ausgelöst sehen, zusammen mit einem nützlichen Call Stack, der Ihnen hilft, die Quelle des Fehlers zu lokalisieren (obwohl beachten Sie, dass die Nachricht uns immer noch sagt, dass der Fehler "uncaught" oder "unhandled" ist). Okay, Fehler sind ärgerlich, aber dies ist viel nützlicher, als die Funktion erfolgreich auszuführen und einen nicht-nummerischen Wert zurückzugeben, der später Probleme verursachen könnte.

Wie behandeln wir dann alle diese Fehler?

try...catch

Die try...catch-Anweisung ist speziell dafür ausgelegt, Fehler zu behandeln. Sie hat die folgende Struktur:

try {
  // Run some code
} catch (error) {
  // Handle any errors
}

Innerhalb des try-Blocks versuchen Sie, etwas Code auszuführen. Wenn dieser Code ohne einen ausgelösten Fehler läuft, ist alles in Ordnung, und der catch-Block wird ignoriert. Wenn jedoch ein Fehler ausgelöst wird, wird der catch-Block ausgeführt, der Zugriff auf das Error-Objekt hat, das den Fehler darstellt, und es Ihnen ermöglicht, Code auszuführen, um ihn zu behandeln.

Lassen Sie uns try...catch in unserem Code verwenden.

1. Ersetzen Sie die console.log()-Zeile, die die inchesToMeters()-Funktion am Ende Ihrer Skript-Datei aufruft, durch den folgenden Block. Wir führen jetzt unsere console.log()-Zeile innerhalb eines try-Blocks aus und behandeln alle Fehler, die er zurückgibt, innerhalb eines entsprechenden catch-Blocks.

   js

   try {
     console.log(inchesToMeters(height));
   } catch (error) {
     console.error(error);
     console.log("Insert code to handle the error");
   }
   

2. Speichern und aktualisieren Sie, und Sie sollten nun zwei Dinge sehen:

   • Die Fehlermeldung und den Call Stack wie zuvor, aber diesmal ohne das Label "uncaught" oder "unhandled".
   • Die geloggte Nachricht "Insert code to handle the error".

3. Versuchen Sie nun, num auf einen gültigen (nummerischen) Wert einzustellen, und Sie sehen das Ergebnis der Berechnung geloggt, ohne Fehlermeldung.

Dies ist von Bedeutung — sämtliche ausgelöste Fehler sind nun nicht mehr unbehandelt, was bedeutet, dass sie die Anwendung nicht mehr zum Absturz bringen werden. Sie können beliebigen Code ausführen, um den Fehler zu behandeln. Oben loggen wir lediglich eine Nachricht, aber zum Beispiel könnten Sie eine Methode aufrufen, die den Benutzer um die Eingabe seiner Größe gebeten hat, und ihn diesmal um Korrektur des Eingabefehlers bitten. Sie könnten sogar eine if...else-Anweisung verwenden, um je nach Art des zurückgegebenen Fehlers unterschiedlichen Fehlerbehandlungscode auszuführen.

Feature-Detection

Feature-Detection ist nützlich, wenn Sie planen, neue JavaScript-Funktionen zu verwenden, die möglicherweise nicht in allen Browsern unterstützt werden. Testen Sie auf das Feature und führen Sie dann bedingte Code-Ausführung, um sowohl in Browsern, die das Feature unterstützen, als auch in denen, die es nicht unterstützen, ein akzeptables Erlebnis bereitzustellen. Ein schnelles Beispiel: Die Geolocation API (welche verfügbare Standortdaten für das Gerät, auf dem der Webbrowser läuft, zur Verfügung stellt) hat einen Haupteinstiegspunkt für die Nutzung — eine geolocation-Eigenschaft, die auf dem globalen Navigator-Objekt verfügbar ist. Daher können Sie die geolocation-Unterstützung im Browser erkennen, indem Sie eine ähnliche if()-Struktur verwenden, wie wir sie früher gesehen haben:

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition((position) => {
    // show the location on a map, perhaps using the Google Maps API
  });
} else {
  // Give the user a choice of static maps instead
}

Sie können einige weitere Feature-Detection-Beispiele in Alternativen zu UA sniffing finden.

Hilfe finden

Es gibt viele andere Probleme, denen Sie mit JavaScript (und HTML und CSS!) begegnen werden, und das Wissen, wie man online Antworten finden kann, ist von unschätzbarem Wert.

Zu den besten Informationsquellen gehören MDN (das ist, wo Sie sich gerade befinden!), stackoverflow.com und caniuse.com.

• Um das Mozilla Developer Network (MDN) zu verwenden, führen die meisten Leute eine Suchmaschinensuche nach der Technologie durch, für die sie Informationen suchen, plus den Begriff "mdn", zum Beispiel, "mdn HTML video".
• caniuse.com bietet Support-Informationen sowie einige nützliche externe Ressourcenlinks. Beispielsweise siehe https://caniuse.com/#search=video (Sie müssen nur das Feature, nach dem Sie suchen, in das Textfeld eingeben).
• stackoverflow.com (SO) ist eine Forum-Seite, auf der Sie Fragen stellen und Lösungsansätze von anderen EntwicklerInnen erhalten können, vorhergehende Beiträge nachschlagen und anderen Entwicklern helfen können. Es wird empfohlen, zu überprüfen, ob es bereits eine Antwort auf Ihre Frage gibt, bevor Sie eine neue Frage stellen. Zum Beispiel, wir haben nach "deaktivieren Autofokus auf HTML dialog" auf SO gesucht, und sehr schnell Disable showModal auto-focusing using HTML attributes gefunden.

Außerdem versuchen Sie, mit Ihrer bevorzugten Suchmaschine nach einer Antwort auf Ihr Problem zu suchen. Es ist oft nützlich, nach spezifischen Fehlermeldungen zu suchen, wenn Sie welche haben — andere EntwicklerInnen werden wahrscheinlich auf die gleichen Probleme gestoßen sein wie Sie.

Zusammenfassung

Das ist also JavaScript-Debugging und Fehlerbehandlung. Einfach, oder? Vielleicht nicht so einfach, aber dieser Artikel sollte Ihnen zumindest einen Start geben, und einige Ideen, wie Sie die JavaScript-bezogenen Probleme angehen können, denen Sie begegnen.

Das war's für das Modul Dynamisches Scripting mit JavaScript; Glückwunsch zum Erreichen des Endes! Im nächsten Modul helfen wir Ihnen, JavaScript-Frameworks und -Bibliotheken zu erkunden.

• Zurück
• Übersicht: Dynamisches Scripting mit JavaScript
• Weiter