Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

Experiment: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.

JavaScript-Debugging und Fehlerbehandlung

In dieser Lektion kehren wir zum Thema JavaScript-Debugging zurück (das wir uns erstmals inWas ist schief gelaufen? angesehen haben). Hier werden wir tiefer in Techniken zur Fehlerverfolgung eintauchen, aber auch betrachten, wie man defensiv programmieren und Fehler im eigenen Code behandeln kann, um Probleme von vornherein zu vermeiden.

Voraussetzungen:Ein Verständnis vonHTML und denGrundlagen von CSS, Vertrautheit mit JavaScript-Grundlagen, wie sie in den vorherigen Lektionen behandelt wurden.
Lernziele:
  • Verwendung der Entwicklertools des Browsers, um das auf Ihrer Seite laufende JavaScript zu inspizieren und zu sehen, welche Fehler es erzeugt.
  • Verwendung vonconsole.log() undconsole.error() für das Debugging.
  • Erweitertes JavaScript-Debugging mit den Entwicklertools des Browsers.
  • Fehlerbehandlung mitbedingten Anweisungen,try...catch undthrow.

Rückblick auf Arten von JavaScript-Fehlern

Früher im Modul, inWas ist schief gelaufen?, haben wir allgemein die Arten von Fehlern betrachtet, die in JavaScript-Programmen auftreten können, und gesagt, dass sie grob in zwei Typen aufgeteilt werden können – Syntaxfehler und Logikfehler. Wir haben Ihnen auch geholfen, einige häufige Arten von JavaScript-Fehlermeldungen zu verstehen, und gezeigt, wie Sie mit einfachenconsole.log()-Anweisungen debuggen können.

In diesem Artikel werden wir etwas tiefer in die verfügbaren Werkzeuge zur Fehlerverfolgung eintauchen und auch Möglichkeiten zur Vermeidung von Fehlern betrachten.

Ihr Code linten

Sie sollten sicherstellen, dass Ihr Code zunächst gültig ist, bevor Sie versuchen, spezifische Fehler zu finden. Nutzen Sie denMarkup-Validierungsdienst der W3C, denCSS-Validierungsdienst und einen JavaScript-Linter wieESLint, um sicherzustellen, dass Ihr Code gültig ist. Dies wird wahrscheinlich eine Reihe von Fehlern beseitigen und es Ihnen ermöglichen, sich auf die verbleibenden Fehler zu konzentrieren.

Code-Editor-Plugins

Es ist nicht sehr praktisch, Ihren Code immer wieder auf eine Webseite kopieren und einfügen zu müssen, um seine Gültigkeit zu überprüfen. Wir empfehlen, ein Linter-Plugin in Ihrem Code-Editor zu installieren, damit Sie Fehler gemeldet bekommen, während Sie Ihren Code schreiben. Versuchen Sie, in der Plugins- oder Erweiterungsliste Ihres Code-Editors nach ESLint zu suchen und es zu installieren.

Häufige JavaScript-Probleme

Es gibt eine Reihe von häufigen JavaScript-Problemen, derer Sie sich bewusst sein sollten, wie:

  • Grundlegende Syntax- und Logikprobleme (schauen Sie sich nochmalsFehlerbehebung bei JavaScript an).
  • Stellen Sie sicher, dass Variablen usw. im richtigen Bereich definiert sind und Sie keinen Konflikten zwischen an verschiedenen Stellen deklarierten Elementen begegnen (sieheFunktionsbereiche und Konflikte).
  • Verwirrung überthis, in Bezug darauf, auf welchen Bereich es zutrifft und ob sein Wert dem entspricht, was Sie beabsichtigt hatten. Sie könnenWas ist "this"? für eine leichte Einführung lesen; Sie sollten auch Beispiele wiedieses hier studieren, das ein typisches Muster zeigt, um einenthis-Bereich in einer separaten Variablen zu speichern und dann diese Variable in geschachtelten Funktionen zu verwenden, damit Sie sicher sein können, dass Sie die Funktionalität auf den richtigenthis-Bereich anwenden.
  • Falsche Verwendung von Funktionen innerhalb von Schleifen, die mit einer globalen Variablen iterieren (allgemein gesagt: "den Bereich falsch verstehen").

Beispielsweise inbad-for-loop.html (sieheQuellcode) durchlaufen wir 10 Iterationen unter Verwendung einer mitvar definierten Variablen, erstellen jedes Mal einen Paragraphen und fügen ihm einenonclick-Ereignis-Handler hinzu. Bei einem Klick soll jeder eine Warnmeldung anzeigen, die seine Nummer enthält (den Wert voni zum Zeitpunkt der Erstellung). Stattdessen melden sie allei als 11 — weil diefor-Schleife all ihre Iterationen durchführt, bevor geschachtelte Funktionen aufgerufen werden.

Die einfachste Lösung ist, die Iterationsvariable mitlet stattvar zu deklarieren — deri-Wert, der der Funktion zugeordnet ist, ist dann einzigartig für jede Iteration. Siehegood-for-loop.html (siehe auch denQuellcode) für eine funktionierende Version.

  • Sicherstellen, dassasynchrone Operationen abgeschlossen sind, bevor versucht wird, die von ihnen zurückgegebenen Werte zu verwenden. Dies bedeutet üblicherweise, zu verstehen, wie manPromisen benutzt:await angemessen verwenden oder den Code, der das Ergebnis eines asynchronen Aufrufs verarbeitet, imthen()-Handler der Promise ausführen. SieheAnleitung zum Verwenden von Promises für eine Einführung in dieses Thema.

Hinweis:Buggy JavaScript Code: Die 10 häufigsten Fehler von JavaScript-Entwicklern hat einige schöne Diskussionen über diese häufigen Fehler und mehr.

Die JavaScript-Konsole des Browsers

Entwicklertools von Browsern haben viele nützliche Funktionen, um JavaScript zu debuggen. Zunächst wird die JavaScript-Konsole Fehler in Ihrem Code melden.

Machen Sie eine lokale Kopie unseresfetch-broken-Beispiels (siehe auch denQuellcode).

Wenn Sie sich die Konsole ansehen, werden Sie eine Fehlermeldung sehen. Die genaue Wortlaut hängt vom Browser ab, aber es wird etwas wie: "Uncaught TypeError: heroes is not iterable" und die referenzierte Zeilennummer ist 25 sein. Wenn wir uns den Quellcode ansehen, ist der relevante Codeabschnitt dieser:

js
function showHeroes(jsonObj) {  const heroes = jsonObj["members"];  for (const hero of heroes) {    // …  }}

Der Code scheitert also sofort, wenn wir versuchen,jsonObj zu verwenden (was, wie Sie vielleicht erwarten, einJSON-Objekt sein soll). Es soll aus einer externen.json-Datei mit dem folgendenfetch()-Aufruf abgerufen werden:

js
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

Sie wissen vielleicht bereits, was mit diesem Code nicht stimmt, aber lassen Sie uns ihn etwas weiter erkunden, um zu zeigen, wie Sie dies untersuchen könnten. Wir beginnen mit derConsole API, die JavaScript-Code erlaubt, mit der JavaScript-Konsole des Browsers zu interagieren. Es gibt eine Vielzahl von Funktionen; Sie haben bereitsconsole.log() kennengelernt, das eine benutzerdefinierte Nachricht in der Konsole ausgibt.

Versuchen Sie, einenconsole.log()-Aufruf hinzuzufügen, um den Rückgabewert vonfetch() zu protokollieren, wie folgt:

js
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, bevor die Fehlermeldung erscheint, wird eine neue Nachricht in der Konsole protokolliert:

Response value: [object Promise]

Dieconsole.log()-Ausgabe zeigt, dass der Rückgabewert vonfetch() nicht die JSON-Daten ist, sondern einPromise. Diefetch()-Funktion ist asynchron: Sie gibt einePromise zurück, die erst erfüllt wird, wenn die eigentliche Antwort aus dem Netzwerk empfangen wurde. Bevor wir die Antwort verwenden können, müssen wir warten, bis diePromise erfüllt ist.

console.error() und Call Stacks

Als kurzen Exkurs lassen Sie uns eine andere Konsolenmethode ausprobieren, um den Fehler zu melden —console.error(). Ersetzen Sie in Ihrem Code

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

mit

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

Speichern Sie Ihren Code und aktualisieren Sie den Browser, und Sie werden nun die Nachricht als Fehler gemeldet sehen, mit der gleichen Farbe und dem gleichen Symbol wie der nicht abgefangene Fehler darunter. Darüber hinaus gibt es nun einen ein- und ausklappbaren Pfeil neben der Nachricht. Wenn Sie diesen drücken, sehen Sie eine einzelne Zeile, die Ihnen die Zeile im JavaScript-Dokument anzeigt, von dem der Fehler stammt. Tatsächlich hat auch die nicht abgefangene Fehlerzeile dies, jedoch hat sie zwei Zeilen:

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

Dies bedeutet, dass der Fehler von der FunktionshowHeroes() in Zeile 25 kommt, wie wir bereits bemerkt haben. Wenn Sie sich Ihren Code ansehen, sehen Sie, dass der anonyme Aufruf in Zeile 10 die Zeile ist, dieshowHeroes() aufruft. Diese Zeilen werden alsCall Stack bezeichnet und können wirklich nützlich sein, wenn Sie versuchen, die Quelle eines Fehlers aus vielen verschiedenen Stellen in Ihrem Code zu ermitteln.

Derconsole.error()-Aufruf ist in diesem Fall nicht allzu nützlich, kann jedoch nützlich sein, um einen Call Stack zu erzeugen, wenn noch kein solcher verfügbar ist.

Den Fehler beheben

Lassen Sie uns nun wieder zu der Lösung unseres Problems zurückkehren. Wir können auf die Antwort von der erfülltenPromise zugreifen, indem wir die Methodethen() an das Ende desfetch()-Aufrufs anhängen. Wir können dann den resultierenden Rückgabewert an die Funktionen weitergeben, die ihn akzeptieren, wie folgt:

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

Speichern und aktualisieren, und überprüfen Sie, ob Ihr Code funktioniert. Spoiler-Alarm — die obige Änderung hat das Problem nicht behoben. Leiderhaben wir immer noch denselben Fehler!

Hinweis:Zusammengefasst: Jedes Mal, wenn etwas nicht funktioniert und ein Wert an einer Stelle in Ihrem Code nicht so scheint, wie er sollte, können Sieconsole.log(),console.error() oder eine andere ähnliche Funktion verwenden, um den Wert auszugeben und zu sehen, was passiert.

Den JavaScript-Debugger verwenden

Lassen Sie uns dieses Problem weiter untersuchen, indem wir ein fortschrittlicheres Feature der Entwicklertools des Browsers verwenden: denJavaScript-Debugger, wie er in Firefox genannt wird.

Hinweis:In anderen Browsern sind ähnliche Tools verfügbar; im Chrome derSources-Tab, Debugger in Safari (sieheSafari Web Development Tools usw.

In Firefox sieht der Debugger-Tab wie folgt aus:

Firefox-Debugger

  • 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.
  • Das rechte Panel zeigt nützliche Details zur aktuellen Umgebung —Breakpoints,Callstack und aktuell aktiveScopes.

Das Hauptmerkmal solcher Tools ist die Fähigkeit, Breakpoints im Code hinzuzufügen — das sind Punkte, an denen die Ausführung des Codes stoppt, und zu diesem Zeitpunkt können Sie die Umgebung in ihrem aktuellen Zustand untersuchen und sehen, was los ist.

Lassen Sie uns die Verwendung von Breakpoints erkunden:

  1. Der Fehler wird an derselben Zeile wie zuvor geworfen —for (const hero of heroes) { — Zeile 26 im untenstehenden Screenshot. Klicken Sie auf diese Zeile im mittleren Panel, um einen Breakpoint hinzuzufügen (Sie werden einen blauen Pfeil über sich sehen).
  2. Aktualisieren Sie nun die Seite (Cmd/Ctrl +R) — der Browser wird die Ausführung des Codes auf dieser Zeile pausieren. Zu diesem Zeitpunkt wird die rechte Seite aktualisiert, um Folgendes anzuzeigen:

Firefox-Debugger mit einem Breakpoint

  • UnterBreakpoints sehen Sie die Details zu dem Breakpoint, den Sie gesetzt haben.
  • UnterCall Stack sehen Sie einige Einträge — dies ist im Grunde dasselbe wie der Call Stack, den wir zuvor imconsole.error()-Abschnitt angeschaut haben.Call Stack zeigt eine Liste der Funktionen, die aufgerufen wurden, um die aktuelle Funktion aufzurufen. Oben haben wirshowHeroes(), die Funktion, in der wir uns gerade befinden, und zweitensonload, die die Ereignishandlerfunktion speichert, die den Aufruf vonshowHeroes() enthält.
  • UnterScopes sehen Sie den derzeit aktiven Gültigkeitsbereich für die Funktion, die wir uns ansehen. Wir haben nur drei —showHeroes,block, undWindow (der globale Gültigkeitsbereich). Jeder Bereich kann erweitert werden, um die Werte von Variablen innerhalb des Bereichs anzuzeigen, als die Ausführung des Codes gestoppt wurde.

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

  1. Erweitern Sie denshowHeroes-Bereich — Sie können daraus sehen, dass die Variable heroesundefined ist, was darauf hindeutet, dass der Zugriff auf diemembers-Eigenschaft vonjsonObj (erste Zeile der Funktion) nicht funktioniert hat.
  2. Sie können auch sehen, dass diejsonObj-Variable einResponse-Objekt speichert, kein JSON-Objekt.

Das Argument vonshowHeroes() ist der Wert, mit dem diefetch()-Promise erfüllt wurde. Diese Promise ist also nicht im JSON-Format: es ist einResponse-Objekt. Es ist ein zusätzlicher Schritt erforderlich, um den Inhalt der Antwort als JSON-Objekt abzurufen.

Wir würden gerne, dass Sie versuchen, dieses Problem selbst zu beheben. Um Ihnen den Einstieg zu erleichtern, lesen Sie die Dokumentation für dasResponse-Objekt. Wenn Sie stecken bleiben, können Sie den korrigierten Quellcode unterhttps://github.com/mdn/learning-area/tree/main/tools-testing/cross-browser-testing/javascript/fetch-fixed finden.

Hinweis:Der Debugger-Tab hat viele andere nützliche Funktionen, die wir hier nicht behandelt haben, zum Beispiel bedingte Breakpoints und Watch-Expressions. Für mehr Informationen, siehe dieDebugger-Seite.

Fehler in Ihrem JavaScript-Code behandeln

HTML und CSS sind permissiv — Fehler und nicht erkannte Funktionen können oft aufgrund der Natur der Sprachen behandelt werden. Zum Beispiel ignoriert CSS nicht erkannte Eigenschaften, und der Rest des Codes funktioniert in der Regel einfach. JavaScript ist jedoch nicht so permissiv wie HTML und CSS — wenn die JavaScript-Engine Fehler oder nicht erkannte Syntax entdeckt, wirft sie oft Fehler.

Lassen Sie uns eine häufige Strategie zur Behandlung von Fehlern in Ihrem JavaScript-Code erkunden. Die folgenden Abschnitte sollen so befolgt werden, dass Sie eine Kopie der untenstehenden Vorlagendatei alshandling-errors.html auf Ihrem lokalen Rechner erstellen, die Code-Snippets zwischen den öffnenden und schließenden<script> und</script>-Tags hinzufügen, dann die Datei in einem Browser öffnen und sich die Ausgabe in der JavaScript-Konsole der Entwicklertools ansehen.

html
<!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>

Bedingte Anweisungen

Ein häufiger Einsatz vonJavaScript-Bedingungen ist es, Fehler zu behandeln. Bedingte Anweisungen ermöglichen es Ihnen, unterschiedlichen Code auszuführen, abhängig vom Wert einer Variablen. Oft möchten Sie dies defensiv nutzen, um zu vermeiden, dass ein Fehler geworfen wird, wenn der Wert nicht existiert oder vom falschen Typ ist, oder um einen Fehler abzufangen, wenn der Wert zu einem inkorrekten Ergebnis führen könnte, das später zu Problemen führen kann.

Betrachten wir ein Beispiel. Angenommen, wir haben eine Funktion, die als Argument die Größe des Benutzers in Zoll erhält und seine Größe in Metern mit 2 Dezimalstellen zurückgibt. Dies könnte so aussehen:

js
function inchesToMeters(num) {  const mVal = (num * 2.54) / 100;  const m2dp = mVal.toFixed(2);  return m2dp;}
  1. Deklarieren Sie in Ihrem Beispiel einconst namensheight und weisen Sie ihm den Wert70 zu:

    js
    const height = 70;
  2. Kopieren Sie die obige Funktion unter die vorherige Zeile.

  3. Rufen Sie die Funktion auf, geben Sie ihr dasheight-Konstanten als Argument und protokollieren Sie den Rückgabewert in der Konsole:

    js
    console.log(inchesToMeters(height));
  4. Laden Sie das Beispiel in einem Browser und sehen Sie sich die JavaScript-Konsole der Entwicklertools an. Sie sollten dort den Wert1.78 sehen.

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

    • Wenn Sie denheight-Wert in"70" ändern (also70 als String ausgedrückt), sollte das Beispiel... immer noch funktionieren. Dies liegt daran, dass die Berechnung in der ersten Zeile den Wert in einen Zahlendatentyp coerziert. Dies ist in einem einfachen Fall wie diesem in Ordnung, aber in einem komplexeren Code kann das Vorhandensein falscher Daten zu vielen Arten von Fehlern führen, einige davon subtil und schwer zu entdecken!
    • Wenn Sieheight in einen Wert ändern, der nicht in eine Zahl coerziert werden kann, wie"70 inches" oder["Bob", 70], oderNaN, sollte das Beispiel das Ergebnis alsNaN zurückgeben. Dies könnte alle möglichen Probleme verursachen, zum Beispiel, wenn Sie die Größe des Benutzers irgendwo in der Benutzeroberfläche der Website anzeigen möchten.
    • Wenn Sie denheight-Wert komplett entfernen (indem Sie// am Anfang der Zeile hinzufügen, um ihn auszukommentieren), wird die Konsole einen Fehler anzeigen, der etwa "Uncaught ReferenceError: height is not defined" lautet, was Ihre Anwendung zum Erliegen bringen könnte.

    Offensichtlich sind keine dieser Ergebnisse großartig. Wie schützen wir uns vor schlechten Daten?

  6. Fügen wir in unserer Funktion eine Bedingung hinzu, um zu prüfen, ob die Daten in Ordnung sind, bevor wir versuchen, die Berechnung durchzuführen. Versuchen Sie, Ihre aktuelle Funktion mit der folgenden 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 noch einmal testen, sehen Sie unsere etwas nützlichere Nachricht, die Ihnen eine Vorstellung davon gibt, was getan werden muss, um das Problem zu beheben. Sie könnten dort alles hineinschreiben, was Sie möchten, einschließlich eines Versuchs, den Wert vonnum zu korrigieren, aber dies ist nicht ratsam — diese Funktion hat einen einfachen Zweck, und Sie sollten die Korrektur des Wertes anderswo im System behandeln.

    Hinweis:In derif()-Anweisung prüfen wir zunächst, ob der Datentyp vonnum"number" ist, indem wir dentypeof Operator verwenden, aber wir prüfen auch, obNumber.isNaN(num)false zurückgibt. Wir müssen dies tun, um uns spezifisch gegen den Fall vonnum, das aufNaN gesetzt ist, abzusichern, datypeof NaN dennoch"number" zurückgibt!

  8. Wenn Sie jedoch das dritte Szenario erneut ausprobieren, wird weiterhin der "Uncaught ReferenceError: height is not defined"-Fehler angezeigt. Sie können das Fehlen eines Wertes nicht in einer Funktion beheben, die versucht, den Wert zu verwenden.

Wie gehen wir damit um? Nun, es ist wahrscheinlich besser, wenn unsere Funktion einen benutzerdefinierten Fehler zurückgibt, wenn sie die korrekten Daten nicht erhält. Wir werden uns zunächst ansehen, wie das geht, und dann alle Fehler zusammen behandeln.

Benutzerdefinierte Fehler auslösen

Sie können jederzeit einen benutzerdefinierten Fehler auslösen, indem Sie diethrow Anweisung zusammen mit demError()-Konstruktor verwenden. Lassen Sie uns dies in Aktion sehen.

  1. Ersetzen Sie in Ihrer Funktion dieconsole.log()-Zeile innerhalb deselse-Blocks Ihrer Funktion 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, dassnum auf einen schlechten (d.h. nicht numerischen) Wert gesetzt ist. Diesmal sollte Ihr benutzerdefinierter Fehler geworfen werden, zusammen mit einem nützlichen Call Stack, der Ihnen hilft, die Quelle des Fehlers zu finden (beachten Sie jedoch, dass die Nachricht weiterhin besagt, dass der Fehler "ungefangen" oder "unhandled" ist). OK, Fehler sind also ärgerlich, aber das ist weitaus nützlicher als die Funktion erfolgreich auszuführen und einen nicht numerischen Wert zurückzugeben, der später zu Problemen führen könnte.

Wie behandeln wir also all diese Fehler dann?

try...catch

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

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

Imtry-Block versuchen Sie, einen Code auszuführen. Wenn dieser Code fehlerfrei ausgeführt wird, ist alles in Ordnung und dercatch-Block wird ignoriert. Wenn jedoch ein Fehler geworfen wird, wird dercatch-Block ausgeführt, der Zugriff auf dasError-Objekt gewährt, das den Fehler darstellt, und Ihnen ermöglicht, Code auszuführen, um ihn zu behandeln.

Verwenden wirtry...catch in unserem Code.

  1. Ersetzen Sie dieconsole.log()-Zeile, die dieinchesToMeters()-Funktion am Ende Ihres Skripts aufruft, durch den folgenden Block. Wir führen unsereconsole.log()-Zeile nun innerhalb einestry-Blocks aus und behandeln alle zurückgegebenen Fehler innerhalb eines entsprechendencatch-Blocks.

    js
    try {  console.log(inchesToMeters(height));} catch (error) {  console.error(error);  console.log("Insert code to handle the error");}
  2. Speichern und aktualisieren, und Sie sollten nun zwei Dinge sehen:

    • Die Fehlermeldung und der Call Stack wie zuvor, aber diesmal ohne das Label "ungefangen" oder "unhandled".
    • Die protokollierte Nachricht "Insert code to handle the error".
  3. Versuchen Sie nun,num auf einen guten (numerischen) Wert zu ändern, und Sie werden das Ergebnis der Berechnung protokolliert sehen, ohne Fehlermeldung.

Das ist bedeutend — geworfene Fehler werden jetzt nicht länger unbehandelt gelassen und bringen die Anwendung nicht zum Absturz. Sie können beliebigen Code ausführen, um den Fehler zu behandeln. Oben protokollieren wir nur eine Nachricht, aber Sie könnten zum Beispiel die Funktion aufrufen, die früher ausgeführt wurde, um den Benutzer zu bitten, seine Größe einzugeben und ihm diesmal zu bitten, den Eingabefehler zu korrigieren. Sie könnten sogar eineif...else-Anweisung verwenden, um unterschiedliche Fehlerbehandlungscodes auszuführen, je nachdem, welcher Fehlertyp zurückgegeben wird.

Feature-Erkennung

Feature-Erkennung ist nützlich, wenn Sie planen, neue JavaScript-Funktionen zu verwenden, die möglicherweise nicht in allen Browsern unterstützt werden. Testen Sie das Feature und führen Sie dann bedingt Code aus, um eine akzeptable Erfahrung sowohl in Browsern zu bieten, die das Feature unterstützen, als auch in solchen, die es nicht unterstützen. Ein schnelles Beispiel ist dieGeolocation API (die verfügbare Standortdaten für das Gerät, auf dem der Webbrowser läuft, zur Verfügung stellt), die einen Haupteinstiegspunkt für ihre Nutzung hat — einegeolocation-Eigenschaft, die auf dem globalenNavigator Objekt verfügbar ist. Daher können Sie erkennen, ob der Browser Geolocation unterstützt oder nicht, indem Sie eine ähnlicheif()-Struktur wie die, die wir zuvor gesehen haben, verwenden:

js
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 Beispiele für die Feature-Erkennung inAlternativen zum UA-Sniffing finden.

Hilfe finden

Es gibt viele andere Probleme, mit denen Sie in JavaScript (und auch HTML und CSS!) konfrontiert werden, daher ist es unschätzbar, zu wissen, wie man im Internet nach Antworten suchen kann.

Zu den besten Quellen für Unterstützungsinformationen gehören MDN (das ist hier, wo Sie sich jetzt befinden!),stackoverflow.com undcaniuse.com.

  • Um das Mozilla Developer Network (MDN) zu verwenden, machen die meisten Leute eine Suchmaschine-Suche nach der Technologie, über die sie Informationen finden möchten, plus den Begriff "mdn", zum Beispiel "mdn HTML video".
  • caniuse.com bietet Unterstützungsinformationen, zusammen mit ein paar nützlichen externen Ressourcelinks. Beispielsweise finden Sie unterhttps://caniuse.com/#search=video (Sie müssen nur das Feature eingeben, nach dem Sie suchen möchten, in das Textfeld).
  • stackoverflow.com (SO) ist ein Forum, in dem Sie Fragen stellen und sich Lösungen mit anderen Entwicklern teilen können, frühere Beiträge nachschauten und anderen Entwicklern helfen. Ihnen wird geraten, nachzusehen, ob es bereits eine Antwort auf Ihre Frage gibt, bevor Sie eine neue Frage stellen. Zum Beispiel haben wir nach "disabling autofocus on HTML dialog" auf SO gesucht und sehr schnell eine Antwort gefunden:Disable showModal auto-focusing using HTML attributes.

Abgesehen davon versuchen Sie, in 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 Entwickler werden wahrscheinlich dieselben Probleme wie Sie gehabt haben.

Zusammenfassung

Das war's also mit JavaScript-Debugging und Fehlerbehandlung. Einfach, oder? Vielleicht nicht ganz so einfach, aber dieser Artikel sollte Ihnen zumindest einen Einstieg und einige Ideen geben, wie Sie die JavaScript-bezogenen Probleme angehen können, auf die Sie stoßen werden.

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

MDN-Feedback-Box

Diese Seite wurde automatisch aus dem Englischen übersetzt.


[8]ページ先頭

©2009-2025 Movatter.jp