JavaScript-Debugging und Fehlerbehandlung
In dieser Lektion kehren wir zum Thema Debugging von JavaScript zurück (das wir erstmals in What went wrong? betrachtet haben). Hier werden wir tiefer in Techniken zur Fehlersuche eintauchen, aber auch darauf eingehen, wie Sie defensiv programmieren und Fehler in Ihrem Code behandeln können, um Probleme im Vorfeld zu vermeiden.
Voraussetzungen: | Verständnis von HTML und den Grundlagen von CSS, Vertrautheit mit den JavaScript-Grundlagen, wie sie in früheren Lektionen behandelt wurden. |
---|---|
Lernziele: |
|
Rückblick auf Arten von JavaScript-Fehlern
Früher im Modul, in What went wrong?, haben wir allgemein die Arten von Fehlern betrachtet, die in JavaScript-Programmen auftreten können, und gesagt, dass sie grob in zwei Typen unterteilt werden können — Syntaxfehler und Logikfehler. Wir haben Ihnen auch geholfen, einige gängige Arten von JavaScript-Fehlermeldungen zu verstehen, und Ihnen gezeigt, wie Sie einfache Debugging-Vorgänge mit console.log()
-Anweisungen durchführen können.
In diesem Artikel werden wir etwas tiefer in die Ihnen zur Verfügung stehenden Werkzeuge zur Fehlersuche eintauchen und auch Möglichkeiten erörtern, Fehler von vornherein zu vermeiden.
Linting Ihres Codes
Sie sollten sicherstellen, dass Ihr Code gültig ist, bevor Sie versuchen, spezifische Fehler zu finden. 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. Dies wird wahrscheinlich eine Reihe von Fehlern aufdecken, sodass Sie sich auf die verbleibenden Fehler konzentrieren können.
Code-Editor-Plugins
Es ist nicht sehr praktisch, Ihren Code immer wieder in 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 Ihnen bei der Eingabe Ihres Codes Fehler gemeldet werden. Versuchen Sie, in der Plugin- oder Erweiterungsliste Ihres Code-Editors nach ESLint zu suchen und installieren Sie es.
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 (nochmals, werfen Sie einen Blick auf Troubleshooting JavaScript).
- Sicherstellen, dass Variablen usw. im richtigen Gültigkeitsbereich definiert sind und dass es keine Konflikte zwischen Elementen gibt, die an verschiedenen Stellen deklariert wurden (siehe Function scope and conflicts).
- Verwirrung über this, in Bezug darauf, auf welchen Gültigkeitsbereich es zutrifft und ob sein Wert das ist, was Sie beabsichtigt haben. Sie können What is "this"? für eine leichte Einführung lesen; Sie sollten auch Beispiele studieren wie dieses, das ein typisches Muster zeigt, bei dem ein
this
-Gültigkeitsbereich in einer separaten Variable gespeichert wird, die dann in verschachtelten Funktionen verwendet wird, sodass Sie sicher sein können, dass Sie die Funktionalität auf das korrektethis
anwenden. - Falsche Verwendung von Funktionen in Schleifen, die mit einer globalen Variable iterieren (allgemeiner "falsche Bestimmung des Gültigkeitsbereichs").
Zum Beispiel, in bad-for-loop.html (siehe Quellcode), durchlaufen wir 10 Iterationen mit einer Variable, die mit var
definiert ist, erstellen jedes Mal einen Absatz und fügen ihm einen onclick-Ereignishandler hinzu. Wenn sie geklickt werden, soll jede einen Alarm mit ihrer Nummer anzeigen (den Wert von i
zu dem Zeitpunkt, als sie erstellt wurde). Stattdessen melden alle i
als 11 — weil die for
-Schleife alle ihre Iterationen abschließt, bevor verschachtelte Funktionen aufgerufen werden.
Die einfachste Lösung ist, die Iterationsvariable mit let
anstelle von var
zu deklarieren — der Wert von i
, der mit der Funktion verbunden ist, ist dann für jede Iteration einzigartig. Siehe good-for-loop.html (sehen Sie sich auch den Quellcode an) für eine Version, die funktioniert.
- Sicherstellen, dass asynchrone Operationen abgeschlossen sind, bevor versucht wird, die von ihnen zurückgegebenen Werte zu verwenden. Dies bedeutet normalerweise, dass Sie verstehen, wie man Promisen verwendet: der korrekte Einsatz von
await
oder das Ausführen des Codes zur Handhabung des Ergebnisses eines asynchronen Aufrufs imthen()
-Handler der Promise. Siehe How to use promises für eine Einführung in dieses Thema.
Hinweis: Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make enthält einige schöne Diskussionen über diese häufigen Fehler und mehr.
Die JavaScript-Konsole im Browser
Browser-Entwicklerwerkzeuge 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 Quellcode).
Wenn Sie auf die Konsole schauen, sehen Sie eine Fehlermeldung. Die genaue Formulierung hängt vom Browser ab, aber sie wird in etwa so lauten: "Uncaught TypeError: heroes is not iterable", und die referenzierte Zeilennummer ist 25. Wenn wir uns den Quellcode ansehen, betrifft der relevante Codeabschnitt dies:
function showHeroes(jsonObj) {
const heroes = jsonObj["members"];
for (const hero of heroes) {
// …
}
}
Der Code bricht also ab, sobald wir versuchen, jsonObj
zu verwenden (von dem Sie vermutlich erwarten, dass es ein JSON-Objekt) ist. Dieses 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 bereits, was an diesem Code falsch ist, aber lassen Sie uns dies 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. Sie bietet eine Reihe von Funktionen; Sie sind bereits auf console.log()
gestoßen, die eine benutzerdefinierte Nachricht in der Konsole ausgibt.
Versuchen Sie, einen console.log()
-Aufruf hinzuzufügen, 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 sehen Sie vor der Fehlermeldung eine neue Nachricht, die in der Konsole protokolliert wird:
Response value: [object Promise]
Die console.log()
-Ausgabe zeigt, dass der Rückgabewert von fetch()
nicht die JSON-Daten sind, es ist ein Promise
. Die fetch()
-Funktion ist asynchron: Sie gibt eine Promise
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 darauf warten, dass die Promise
erfüllt wird.
console.error()
und Aufrufstapel
Als kurze Abschweifung, lassen Sie uns versuchen, eine andere Konsolenmethode zur Fehlerberichterstattung zu verwenden — 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 sehen jetzt die Nachricht als Fehler gemeldet, mit der gleichen Farbe und dem gleichen Symbol wie der nicht abgefangene Fehler darunter. Zusätzlich gibt es nun einen Ein- und Ausklapp-Pfeil neben der Nachricht. Wenn Sie darauf klicken, sehen Sie eine einzelne Zeile, die Ihnen die Zeile im JavaScript-File angibt, aus der der Fehler stammt. Tatsächlich hat die Zeile des nicht abgefangenen Fehlers auch diese Angabe, aber sie hat 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 aus der showHeroes()
-Funktion, 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 Aufrufstapel bezeichnet, und sie 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 Aufrufstapel zu generieren, wenn noch keiner verfügbar ist.
Den Fehler beheben
Jedenfalls, kehren wir zu dem Versuch zurück, unseren Fehler zu beheben. Wir können auf die Antwort von der erfüllten Promise
zugreifen, indem wir die then()
-Methode an das Ende des fetch()
-Aufrufs anhängen. Wir können den resultierenden Antwortwert dann in Funktionen übergeben, die ihn akzeptieren, so:
fetch(requestURL).then((response) => {
populateHeader(response);
showHeroes(response);
});
Speichern und aktualisieren, und sehen Sie nach, ob Ihr Code funktioniert. Spoiler-Alarm — die oben genannte Änderung hat das Problem nicht behoben. Leider haben wir immer noch den gleichen Fehler!
Hinweis:
Zusammenfassend lässt sich sagen, wann immer etwas nicht funktioniert und ein Wert an einem Punkt in Ihrem Code nicht das zu sein scheint, was er sein sollte, können Sie console.log()
, console.error()
oder eine andere ähnliche Funktion verwenden, um den Wert auszugeben und zu sehen, was passiert.
JavaScript-Debugger verwenden
Lassen Sie uns dieses Problem weiter mit einem fortschrittlicheren Feature der Entwicklerwerkzeuge des Browsers untersuchen: dem JavaScript-Debugger, wie er in Firefox genannt wird.
Hinweis: Ähnliche Werkzeuge sind in anderen Browsern verfügbar; der Sources tab in Chrome, Debugger in Safari (siehe Safari Web Development Tools), usw.
In Firefox sieht das Debugger-Tab so aus:
- Auf der linken Seite 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 aktive Scopes.
Das Hauptfeature solcher Werkzeuge ist die Möglichkeit, Breakpoints im 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 vor sich geht.
Lassen Sie uns die Verwendung von Breakpoints erkunden:
- Der Fehler wird an der selben Zeile wie zuvor geworfen —
for (const hero of heroes) {
— Zeile 26 im Screenshot unten. Klicken Sie auf diese Zeile im mittleren Panel, um einen Breakpoint hinzuzufügen (Sie sehen einen blauen Pfeil darauf erscheinen). - Aktualisieren Sie jetzt die Seite (Cmd/Ctrl + R) — der Browser pausiert die Ausführung des Codes an dieser Zeile. Zu diesem Zeitpunkt aktualisiert sich die rechte Seite und zeigt Folgendes an:
- Unter Breakpoints sehen Sie die Details des von Ihnen gesetzten Breakpoints.
- Unter Call Stack sehen Sie einige Einträge — dies ist im Grunde der gleiche Aufrufstapel, den wir vorhin im Abschnitt
console.error()
betrachtet haben. Call Stack zeigt eine Liste der Funktionen, die aufgerufen wurden, um die aktuelle Funktion aufzurufen. Ganz oben haben wirshowHeroes()
, die Funktion, in der wir uns gerade befinden, und als zweites haben wironload
, das die Ereignis-Handler-Funktion speichert, die den Aufruf vonshowHeroes()
enthält. - Unter Scopes sehen Sie den derzeit aktiven Gültigkeitsbereich der Funktion, die wir uns ansehen. Wir haben nur drei —
showHeroes
,block
undWindow
(der globale Gültigkeitsbereich). Jeder Gültigkeitsbereich kann erweitert werden, um die Werte der Variablen innerhalb des Gültigkeitsbereichs anzuzeigen, als die Ausführung des Codes gestoppt wurde.
Wir können hier einige sehr nützliche Informationen finden:
- Erweitern Sie den
showHeroes
-Gültigkeitsbereich — Sie können sehen, dass die Variable heroesundefined
ist, was darauf hinweist, dass der Zugriff auf diemembers
-Eigenschaft vonjsonObj
(erste Zeile der Funktion) nicht funktioniert hat. - Sie können auch sehen, dass die
jsonObj
-Variable einResponse
-Objekt und kein JSON-Objekt speichert.
Das Argument für showHeroes()
ist der Wert, mit dem die fetch()
-Promise erfüllt wurde. Diese Promise ist also nicht im JSON-Format: es ist ein Response
-Objekt. Es gibt einen zusätzlichen Schritt, um den Inhalt der Antwort als JSON-Objekt abzurufen.
Wir möchten, dass Sie versuchen, dieses Problem selbst zu beheben. Um Ihnen den Einstieg zu erleichtern, sehen Sie sich die Dokumentation für das Response
-Objekt an. Wenn Sie feststecken, finden Sie den korrigierten Quellcode unter https://github.com/mdn/learning-area/tree/main/tools-testing/cross-browser-testing/javascript/fetch-fixed.
Hinweis: Die Debugger-Registerkarte hat viele andere nützliche Funktionen, über die wir hier nicht gesprochen haben, zum Beispiel bedingte Breakpoints und Watch-Ausdrücke. Für weitere Informationen, siehe die Debugger-Seite.
Umgang mit JavaScript-Fehlern in Ihrem Code
HTML und CSS sind permissiv — Fehler und nicht erkannte Funktionen können oft aufgrund der Natur der Sprachen gehandhabt werden. Zum Beispiel ignoriert CSS nicht erkannte Eigenschaften, und der Rest des Codes funktioniert oft einfach. JavaScript ist jedoch nicht so fehlertolerant wie HTML und CSS — wenn die JavaScript-Engine auf Fehler oder nicht erkannte Syntax stößt, wirft sie oft Fehler.
Lassen Sie uns eine gängige Strategie zur Behandlung von JavaScript-Fehlern in Ihrem Code erkunden. Die folgenden Abschnitte sind so gestaltet, dass Sie sie befolgen können, indem Sie eine Kopie der unten stehenden Vorlagendatei als handling-errors.html
auf Ihrem lokalen Rechner erstellen, die Code-Snippets zwischen den öffnenden und schließenden <script>
und </script>
-Tags hinzufügen und dann die Datei in einem Browser öffnen und die Ausgabe in der Entwicklerwerkzeugkonsole betrachten.
<!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>
Bedingungen
Ein häufiger Einsatz von JavaScript-Bedingungen ist die Fehlerbehandlung. Mit Bedingungen können Sie je nach Wert einer Variablen unterschiedlichen Code ausführen. Oft möchten Sie dies defensiv nutzen, um zu vermeiden, dass ein Fehler geworfen wird, wenn der Wert nicht existiert oder von falschem Typ ist, oder um einen Fehler abzufangen, wenn der Wert zu einem falschen Ergebnis führen würde, was später Probleme verursachen könnte.
Lassen Sie uns ein Beispiel ansehen. Angenommen, wir haben eine Funktion, die als Argument die Körpergröße des Benutzers in Zoll erhält und seine Körpergröße in Metern bis auf zwei Dezimalstellen zurückgibt. Dies könnte so aussehen:
function inchesToMeters(num) {
const mVal = (num * 2.54) / 100;
const m2dp = mVal.toFixed(2);
return m2dp;
}
-
Deklarieren Sie in Ihrem Beispiel-File innerhalb des
<script>
Elements einconst
namensheight
und weisen Sie ihm den Wert70
zu:jsconst height = 70;
-
Kopieren Sie die obige Funktion unter die vorherige Zeile.
-
Rufen Sie die Funktion auf, indem Sie ihr das
height
-Konstant als Argument übergeben und den Rückgabewert in der Konsole protokollieren:jsconsole.log(inchesToMeters(height));
-
Laden Sie das Beispiel in einem Browser und schauen Sie in die JavaScript-Konsole der Entwicklerwerkzeuge. Sie sollten einen Wert von
1.78
sehen, der darin protokolliert wird. -
Das funktioniert also in Isolation gut. Aber was passiert, wenn die bereitgestellten Daten fehlen oder nicht korrekt sind? Versuchen Sie folgende Szenarien:
- Wenn Sie den
height
-Wert in"70"
(also70
, ausgedrückt als String) ändern, sollte das Beispiel ... immer noch gut funktionieren. Dies liegt daran, dass die Berechnung in der ersten Zeile den Wert in einen Zahlendatentyp umwandelt. Dies ist in einem einfachen Fall wie diesem in Ordnung, aber in komplexerem Code können falsche Daten zu allen möglichen Fehlern führen, einige davon subtil und schwer zu erkennen! - Wenn Sie
height
auf einen Wert ändern, der nicht in eine Zahl umgewandelt 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, z. B. wenn Sie möchten, dass die Körpergröße des Benutzers irgendwo in der Benutzeroberfläche der Website enthalten ist. - Wenn Sie den
height
-Wert ganz entfernen (auskommentieren, indem Sie//
am Anfang der Zeile hinzufügen), wird in der Konsole ein Fehler angezeigt, etwa: "Uncaught ReferenceError: height is not defined", der Ihre Anwendung zum Stillstand bringen könnte.
Offensichtlich sind keine dieser Ergebnisse großartig. Wie können wir gegen schlechte Daten verteidigen?
- Wenn Sie den
-
Lassen Sie uns eine Bedingung in unserer Funktion hinzufügen, um zu testen, ob die Daten gut sind, bevor wir versuchen, die Berechnung durchzuführen. Ersetzen Sie Ihre aktuelle Funktion durch die folgende:
jsfunction inchesToMeters(num) { if (typeof num === "number" && !isNaN(num)) { const mVal = (num * 2.54) / 100; const m2dp = mVal.toFixed(2); return m2dp; } else { console.log("A number was not provided. Please correct the input."); } }
-
Wenn Sie jetzt die ersten beiden Szenarien erneut versuchen, sehen Sie unsere etwas nützlichere Nachricht, die Ihnen eine Vorstellung davon gibt, was getan werden muss, um das Problem zu beheben. Sie können dort alles hineinpacken, was Ihnen gefällt, einschließlich des Versuchs, Code auszuführen, um den Wert von
num
zu korrigieren, aber dies wird nicht empfohlen — diese Funktion hat einen einfachen Zweck, und Sie sollten die Korrektur des Wertes irgendwo anders im System behandeln.Hinweis: In der
if()
-Anweisung testen wir zunächst mit demtypeof
-Operator, ob der Datentyp vonnum
"number"
ist, testen aber auch, ob!isNaN(num)
false
zurückgibt. Wir müssen das tun, um gegen den spezifischen Fall zu verteidigen, dassnum
aufNaN
gesetzt wird, datypeof NaN
interessanterweise"number"
zurückgibt! -
Wenn Sie jedoch das dritte Szenario erneut versuchen, wird Ihnen immer noch der Fehler "Uncaught ReferenceError: height is not defined" angezeigt. Sie können das Fehlen eines Wertes nicht von einer Funktion aus beheben, die versucht, den Wert zu verwenden.
Wie gehen wir damit um? Nun, es ist wahrscheinlich besser, unsere Funktion dazu zu bringen, einen benutzerdefinierten Fehler zu werfen, wenn sie nicht die richtigen Daten erhält. Wir werden zuerst sehen, wie das geht, und dann alle Fehler gemeinsam behandeln.
Benutzerdefinierte Fehler werfen
Sie können jederzeit in Ihrem Code einen benutzerdefinierten Fehler mit der throw
-Anweisung und dem Error()
-Konstruktor werfen. Lassen Sie uns dies in Aktion sehen.
-
Ersetzen Sie in Ihrer Funktion die
console.log()
-Zeile innerhalb deselse
-Blocks der Funktion durch die folgende Zeile:jsthrow new Error("A number was not provided. Please correct the input.");
-
Führen Sie Ihr Beispiel erneut aus, stellen Sie jedoch sicher, dass
num
auf einen schlechten (d.h. nicht nummerischen) Wert gesetzt wird. Dieses Mal sollten Sie Ihren benutzerdefinierten Fehler sehen, zusammen mit einem nützlichen Aufrufstapel, der Ihnen hilft, die Quelle des Fehlers zu lokalisieren (beachten Sie jedoch, dass die Nachricht immer noch anzeigt, 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-Nummer-Wert zurückzugeben, der später Probleme verursachen könnte.
Wie gehen wir also mit all diesen Fehlern um?
try...catch
Die try...catch
-Anweisung ist speziell zum Umgang mit Fehlern entwickelt worden. Sie hat folgende Struktur:
try {
// Run some code
} catch (error) {
// Handle any errors
}
Innerhalb des try
-Blocks versuchen Sie, einige Codes auszuführen. Wenn dieser Code ohne einen geworfenen Fehler ausgeführt wird, ist alles in Ordnung, und der catch
-Block wird ignoriert. Wenn jedoch ein Fehler geworfen wird, wird der catch
-Block ausgeführt, der Zugriff auf das Error
-Objekt bietet, 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.
-
Ersetzen Sie die
console.log()
-Zeile, die dieinchesToMeters()
-Funktion am Ende Ihres Skripts aufruft, durch den folgenden Block. Wir führen jetzt unsereconsole.log()
-Anweisung innerhalb einestry
-Blocks aus und behandeln alle zurückgegebenen Fehler innerhalb eines korrespondierendencatch
-Blocks.jstry { console.log(inchesToMeters(height)); } catch (error) { console.error(error); console.log("Insert code to handle the error"); }
-
Speichern und aktualisieren, und Sie sollten jetzt zwei Dinge sehen:
- Die Fehlermeldung und den Aufrufstapel wie zuvor, diesmal jedoch ohne die Bezeichnung "uncaught" oder "unhandled".
- Die protokollierte Nachricht "Insert code to handle the error".
-
Versuchen Sie jetzt,
num
auf einen guten (nummerischen) Wert zu aktualisieren, und Sie sehen das Ergebnis der Berechnung, ohne Fehlermeldung.
Das ist signifikant — alle geworfenen Fehler werden nicht länger ungleich behandelt, sodass sie die Anwendung nicht zum Absturz bringen. Sie können beliebigen Code zum Behandeln des Fehlers ausführen. Oben protokollieren wir nur eine Nachricht, aber Sie könnten zum Beispiel die früher ausgeführte Funktion aufrufen, um den Benutzer zu bitten, seine Körpergröße einzugeben, diesmal, indem Sie ihn bitten, den Eingabefehler zu korrigieren. Sie könnten sogar eine if...else
-Anweisung verwenden, um je nach Art des zurückgegebenen Fehlers unterschiedlichen Fehlerbehandlungscode auszuführen.
Funktionsprüfung
Funktionsprüfung ist nützlich, wenn Sie planen, neue JavaScript-Funktionen einzusetzen, die möglicherweise nicht in allen Browsern unterstützt werden. Testen Sie die Funktion und führen Sie dann bedingt Code aus, um eine akzeptable Erfahrung sowohl in Browsern zu bieten, die die Funktion unterstützen, als auch in solchen, die sie nicht unterstützen. Als kurzes Beispiel hat die Geolocation API (die verfügbare Standortdaten für das Gerät, auf dem der Webbrowser läuft, bereitstellt) einen Haupteinstiegspunkt für ihre Nutzung — eine geolocation
-Eigenschaft, die auf dem globalen Navigator-Objekt verfügbar ist. Daher können Sie feststellen, ob der Browser Geolocation unterstützt oder nicht, indem Sie eine ähnliche if()
-Struktur verwenden, wie wir sie zuvor 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 finden einige weitere Beispiele zur Funktionsprüfung in Alternatives to UA sniffing.
Hilfe suchen
Es gibt viele andere Probleme, auf die Sie mit JavaScript (und HTML und CSS!) stoßen werden, was das Wissen, wie man online Antworten findet, unersetzlich macht.
Zu den besten Informationsquellen gehören MDN (da sind Sie gerade!), stackoverflow.com und caniuse.com.
- Um das Mozilla Developer Network (MDN) zu nutzen, machen die meisten Leute eine Suchmaschinenabfrage nach der Technologie, zu der sie Informationen suchen, plus dem Begriff "mdn", zum Beispiel "mdn HTML video".
- caniuse.com liefert Unterstützunginformationen zusammen mit einigen nützlichen externen Ressourcenlinks. Zum Beispiel siehe https://caniuse.com/#search=video (Sie müssen nur die Funktion, nach der Sie suchen, in das Textfeld eingeben).
- stackoverflow.com (SO) ist eine Foren-Website, auf der Sie Fragen stellen und Lösungen von anderen Entwicklern teilen lassen können, frühere Beiträge nachsehen und anderen Entwicklern helfen können. Es wird empfohlen, nachzusehen, ob es bereits eine Antwort auf Ihre Frage gibt, bevor Sie eine neue Frage stellen. Zum Beispiel haben wir "disabling autofocus on HTML dialog" auf SO gesucht und sehr schnell Disable showModal auto-focusing using HTML attributes gefunden.
Abgesehen davon, versuchen Sie, Ihre bevorzugte Suchmaschine zu verwenden, um eine Antwort auf Ihr Problem zu finden. Es ist oft nützlich, nach spezifischen Fehlermeldungen zu suchen, wenn Sie sie haben — andere Entwickler werden wahrscheinlich die gleichen Probleme gehabt haben wie Sie.
Zusammenfassung
Das war also JavaScript-Debugging und Fehlerbehandlung. Einfach, oder? Vielleicht nicht so einfach, aber dieser Artikel sollte Ihnen zumindest einen Einstieg geben und einige Ideen, wie Sie die mit JavaScript verbundenen Probleme angehen können, auf die Sie stoßen werden.
Das war's für das Module "Dynamisches Scripting mit JavaScript"; Glückwunsch, dass Sie es bis zum Ende geschafft haben! Im nächsten Moduls helfen wir Ihnen, JavaScript-Frameworks und -Bibliotheken zu erkunden.