Debuggen und Fehlerbehandlung in JavaScript

Rckblick auf JavaScript-Fehlertypen

Frher im Modul, in Was ist schiefgelaufen?, haben wir uns die Arten von Fehlern angesehen, die in JavaScript-Programmen auftreten knnen, und gesagt, dass sie grob in zwei Typen unterteilt werden knnen Syntaxfehler und Logikfehler. Wir haben Ihnen auch geholfen, einige hufige Arten von JavaScript-Fehlermeldungen zu verstehen, und gezeigt, wie man einfaches Debuggen mit console.log()-Anweisungen durchfhrt.

In diesem Artikel schauen wir uns die verfgbaren Werkzeuge zur Fehlersuche genauer an und untersuchen, wie man Fehler von vornherein vermeiden kann.

Ihr Code-Checken

Sie sollten Ihren Code validieren, bevor Sie versuchen, spezifische Fehler aufzuspren. Nutzen Sie den Markup-Validierungsdienst des W3C, den CSS-Validierungsdienst und einen JavaScript-Linter wie ESLint, um sicherzustellen, dass Ihr Code gltig ist. Dies wird wahrscheinlich einige Fehler aufdecken, die Sie dann beheben knnen, sodass Sie sich auf die verbleibenden Fehler konzentrieren knnen.

Plugins fr Code-Editoren

Es ist nicht sehr bequem, Ihren Code immer wieder in eine Webseite kopieren und einfgen zu mssen, um seine Gltigkeit zu berprfen. Wir empfehlen die Installation eines Linter-Plugins in Ihrem Code-Editor, um Fehler beim Schreiben Ihres Codes zu melden. Suchen Sie in der Plugin- oder Erweiterungsliste Ihres Code-Editors nach ESLint und installieren Sie es.

Hufige JavaScript-Probleme

Es gibt mehrere hufige JavaScript-Probleme, auf die Sie achten sollten:

• Grundlegende Syntax- und Logikprobleme (sehen Sie sich erneut Fehlersuche bei JavaScript an).
• Sicherstellen, dass Variablen usw. im richtigen Gltigkeitsbereich definiert sind und dass Sie keine Konflikte zwischen an verschiedenen Orten deklarierten Elementen verursachen (siehe Funktionsbereich und Konflikte).
• Verwirrung bezglich this, in Bezug auf den Gltigkeitsbereich, auf den es angewendet wird, und ob sein Wert der von Ihnen beabsichtigte ist. Sie knnen Was ist "this"? lesen, um eine leichte Einfhrung zu erhalten; Sie sollten sich auch Beispiele wie dieses ansehen, das ein typisches Muster zeigt, bei dem ein this-Gltigkeitsbereich in einer separaten Variablen gespeichert wird, die dann in verschachtelten Funktionen verwendet wird, damit Sie sicher sein knnen, dass Sie die Funktionalitt auf den richtigen this-Gltigkeitsbereich anwenden.
• Falsche Verwendung von Funktionen innerhalb von Schleifen, die mit einer globalen Variablen iterieren (allgemeiner gesagt, "den Gltigkeitsbereich falsch verstehen").

• Sicherstellen, dass asynchrone Operationen abgeschlossen sind, bevor Sie versuchen, die zurckgegebenen Werte zu verwenden. Dies bedeutet in der Regel zu verstehen, wie man Promises verwendet: durch angemessenes Verwenden von await oder indem der Code, der das Ergebnis eines asynchronen Aufrufs verarbeitet, im then()-Handler des Promises ausgefhrt wird. Siehe Anleitung zur Verwendung von Promises fr eine Einfhrung in dieses Thema.

Die JavaScript-Konsole des Browsers

Die Entwicklertools des Browsers haben viele ntzliche Funktionen zum Debuggen von JavaScript. Zu Beginn berichtet die JavaScript-Konsole Fehler in Ihrem Code.

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

Wenn Sie sich die Konsole ansehen, werden Sie eine Fehlermeldung sehen. Die genaue Wortwahl ist browserabhngig, aber sie wird etwa so lauten: "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 strzt also ab, sobald wir versuchen, jsonObj zu verwenden (was, wie Sie vielleicht erwarten, ein JSON-Objekt sein soll). Dies soll aus einer externen .json-Datei mit dem folgenden 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);

Dieser schlgt jedoch fehl.

Die Konsole-API

Sie wissen vielleicht bereits, was mit diesem Code falsch ist, aber lassen Sie uns untersuchen, wie Sie ihn analysieren knnten. Wir beginnen mit der Console API, die JavaScript-Code ermglicht, mit der JavaScript-Konsole des Browsers zu interagieren. Sie bietet mehrere Funktionen; Sie haben bereits console.log() kennengelernt, das eine benutzerdefinierte Nachricht in die Konsole druckt.

Versuchen Sie, einen console.log()-Aufruf hinzuzufgen, um den Rckgabewert 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. Dieses Mal, bevor die Fehlermeldung erscheint, sehen Sie eine neue Nachricht, die in der Konsole protokolliert wurde:

Response value: [object Promise]

Die console.log()-Ausgabe zeigt, dass der Rckgabewert von fetch() nicht die JSON-Daten sind, sondern ein Promise. Die Funktion fetch() ist asynchron: sie gibt ein Promise zurck, das erst erfllt wird, wenn die tatschliche Antwort vom Netzwerk empfangen wurde. Bevor wir die Antwort verwenden knnen, mssen wir warten, bis das Promise erfllt ist.

console.error() und Aufruf-Stapel

Als ein kurzer Exkurs versuchen wir, eine andere Konsolenmethode zu 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; Sie sehen jetzt die Nachricht als Fehler gemeldet, mit der gleichen Farbe und dem gleichen Symbol wie der unten nicht gefangene Fehler. Auerdem sehen Sie einen Auf-/Zu-Klapp-Pfeil neben der Nachricht. Wenn Sie diesen drcken, sehen Sie eine einzelne Zeile, die die Zeile in der JavaScript-Datei angibt, in der der Fehler ursprnglich aufgetreten ist. Tatschlich hat die Zeile des nicht gefangenen Fehlers ebenfalls dies, 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

Dies bedeutet, dass der Fehler durch die Funktion showHeroes() verursacht wird, Zeile 25, wie wir bereits frher festgestellt haben. Wenn Sie sich Ihren Code ansehen, werden Sie sehen, dass der anonyme Aufruf in Zeile 10 showHeroes() aufruft. Diese Zeilen werden als Aufruf-Stapel bezeichnet und knnen sehr ntzlich sein, um die Ursache eines Fehlers, der mehrere verschiedene Stellen in Ihrem Code betrifft, zurckzuverfolgen.

Der Aufruf von console.error() ist in diesem Fall nicht besonders ntzlich, aber er kann ntzlich sein, um einen Aufruf-Stapel zu erzeugen, wenn einer nicht bereits verfgbar ist.

Den Fehler beheben

Kehren wir zu dem Versuch zurck, unseren Fehler zu beheben. Wir knnen auf die Antwort vom erfllten Promise zugreifen, indem wir die Methode then() an das Ende des fetch()-Aufrufs anhngen. Wir knnen dann den resultierenden Antwort-Wert in die Funktionen bergeben, die ihn akzeptieren, so:

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

Speichern Sie und aktualisieren Sie, und sehen Sie, ob Ihr Code funktioniert. Spoiler-Alarm die obige nderung hat das Problem nicht behoben. Leider haben wir immer noch den gleichen Fehler!

Verwendung des JavaScript-Debuggers

Untersuchen wir dieses Problem weiter mit einem fortschrittlicheren Werkzeug der Browser-Entwicklertools: dem JavaScript-Debugger, wie er in Firefox genannt wird.

In Firefox sieht der Debugger-Tab so aus:

[Firefox debugger]

• Links knnen Sie das Script auswhlen, das Sie debuggen mchten (in diesem Fall haben wir nur eines).
• Das mittlere Panel zeigt den Code im ausgewhlten Script.
• Das rechte Panel zeigt ntzliche Details ber die aktuelle Umgebung Breakpoints, Callstack und aktuell aktive Scopes.

Die Hauptfunktion solcher Werkzeuge ist die Fhigkeit, Breakpoints in den Code einzufgen dies sind Punkte, an denen die Ausfhrung des Codes stoppt, und an diesem Punkt knnen Sie die Umgebung im aktuellen Zustand prfen und sehen, was vor sich geht.

Lassen Sie uns das Verwenden von Breakpoints erkunden:

1. Der Fehler wird in der gleichen Zeile wie zuvor geworfen for (const hero of heroes) { Zeile 26 im Screenshot unten. Klicken Sie auf die Zeilennummer im mittleren Panel, um einen Breakpoint hinzuzufgen (Sie sehen einen blauen Pfeil, der ber der Zeile erscheint).
2. Aktualisieren Sie die Seite (Cmd/Ctrl + R) der Browser stoppt die Ausfhrung des Codes in dieser Zeile. An diesem Punkt wird die rechte Seite aktualisiert, um Folgendes zu zeigen:

[Firefox debugger with a breakpoint]

• Unter Breakpoints sehen Sie die Details des gesetzten Breakpoints.
• Unter Call Stack sehen Sie einige Eintrge dies ist im Grunde das gleiche wie der Aufruf-Stapel, den wir zuvor im Abschnitt console.error() betrachtet haben. Call Stack zeigt eine Liste von Funktionen, die aufgerufen wurden, um die aktuelle Funktion zu initiieren. Oben haben wir showHeroes(), die Funktion, in der wir uns gerade befinden, und an zweiter Stelle onload, die den Ereignishandler speichert, der die Funktion showHeroes() enthlt.
• Unter Scopes sehen Sie den aktuell aktiven Gltigkeitsbereich fr die Funktion, die wir betrachten. Wir haben nur drei showHeroes, block und Window (der globale Gltigkeitsbereich). Jeder Gltigkeitsbereich kann erweitert werden, um die Werte der Variablen innerhalb des Gltigkeitsbereichs zu zeigen, wenn die Ausfhrung gestoppt ist.

Hier knnen wir einige sehr ntzliche Informationen herausfinden:

1. Erweitern Sie den showHeroes-Gltigkeitsbereich Sie knnen daraus sehen, dass die heroes-Variable undefined ist, was darauf hinweist, dass der Zugriff auf die members-Eigenschaft von jsonObj (erste Zeile der Funktion) nicht funktioniert hat.
2. Sie knnen auch sehen, dass die jsonObj-Variable ein Response-Objekt speichert, kein JSON-Objekt.

Das Argument fr showHeroes() ist der Wert, mit dem das Promise von fetch() erfllt wurde. Dieses Promise liegt nicht im JSON-Format vor: Es ist ein Response-Objekt. Ein zustzlicher Schritt ist erforderlich, um den Inhalt der Antwort im JSON-Format abzurufen.

Wir wrden gerne, dass Sie versuchen, dieses Problem selbst zu lsen. Um Ihnen den Einstieg zu erleichtern, sehen Sie sich die Dokumentation fr das Response-Objekt an. Wenn Sie steckenbleiben, knnen 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 permissiv Fehler und nicht erkannte Funktionen knnen 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 permissiv wie HTML und CSS; wenn die JavaScript-Engine auf Fehler oder nicht erkannte Syntax stt, wird dies oft zu Fehlern fhren.

Lassen Sie uns eine gngige Strategie zur Fehlerbehandlung in Ihrem JavaScript-Code erkunden. Die folgenden Abschnitte sind dafr gedacht, dass Sie eine Kopie der Vorlagendatei, die unten als handling-errors.html gezeigt wird, auf Ihrem lokalen Rechner erstellen und die Codeschnipsel zwischen den ffnenden und schlieenden <script>- und </script>-Tags hinzufgen, und dann die Datei in einem Browser ffnen und die Ausgabe in der JavaScript-Konsole der Entwicklertools 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 hufiger Einsatz von JavaScript-Bedingungen ist die Behandlung von Fehlern. Bedingungen ermglichen es Ihnen, verschiedenen Code abhngig vom Wert einer Variablen auszufhren. Oft mchten Sie dies defensiv verwenden, um das Auftreten eines Fehlers zu vermeiden, wenn der Wert nicht existiert oder den falschen Typ hat, oder um einen Fehler abzufangen, wenn der Wert dazu fhren knnte, dass ein falsches Ergebnis zurckgegeben wird, was spter Probleme verursachen knnte.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben eine Funktion, die die Gre des Benutzers in Zoll als Argument nimmt und seine Gre in Metern auf zwei Dezimalstellen angibt. Dies knnte folgendermaen aussehen:

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

1. Deklarieren Sie im <script>-Element Ihres Beispiel-Dokuments eine const-Variable namens height und weisen Sie ihr den Wert 70 zu:

   js

   const height = 70;
   

2. Kopieren Sie die obige Funktion unter die vorherige Zeile.

3. Rufen Sie die Funktion auf, indem Sie ihr die Konstante height als Argument bergeben, und protokollieren Sie den Rckgabewert 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 einen Wert von 1.78 sehen, der dort angezeigt wird.

5. Dies funktioniert in diesem isolierten Fall einwandfrei. Aber was passiert, wenn die bereitgestellten Daten fehlen oder falsch sind? Probieren Sie diese Szenarien aus:

   • Wenn Sie den height-Wert in "70" ndern (also 70 als String ausgedrckt), sollte das Beispiel ... immer noch funktionieren. Dies liegt daran, dass die Berechnung in der ersten Zeile den Wert in einen numerischen Datentyp umwandelt. Dies ist in einem so einfachen Fall wie diesem in Ordnung, aber in komplexerem Code knnen falsche Daten alle mglichen Fehler verursachen, einige subtil und schwer zu erkennen!
   • Wenn Sie height in einen Wert ndern, der nicht in eine Zahl umgewandelt werden kann, wie "70 inches" oder ["Bob", 70] oder NaN, sollte das Beispiel das Ergebnis als NaN zurckgeben. Dies knnte alle mglichen Probleme verursachen, z. B. wenn Sie die Gre des Benutzers irgendwo in der Benutzeroberflche der Website einfgen mchten.
   • Wenn Sie den height-Wert ganz entfernen (kommentieren Sie ihn aus, indem Sie // am Anfang der Zeile hinzufgen), zeigt die Konsole einen Fehler nach dem Muster "Uncaught ReferenceError: height is not defined" an, der Ihr Anwendung zum Stillstand bringen knnte.

   Offensichtlich sind keine dieser Ergebnisse optimal. Wie verteidigen wir uns gegen fehlerhafte Daten?

6. Lassen Sie uns eine Bedingung in unsere Funktion einfgen, um zu prfen, ob die Daten gut sind, bevor wir versuchen, die Berechnung durchzufhren. Versuchen Sie, Ihre aktuelle Funktion durch die 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 jetzt die ersten beiden Szenarien wieder testen, sehen Sie unsere etwas ntzlichere Nachricht, die Ihnen eine Vorstellung davon gibt, was getan werden muss, um das Problem zu beheben. Sie knnten dort alles hineinschreiben, was Sie mchten, einschlielich des Versuchs, den Wert von num zu korrigieren, aber dies wird nicht empfohlen diese Funktion hat ein einfaches Ziel, und Sie sollten die Korrektur des Wertes an anderer Stelle im System behandeln.

   Hinweis: In der if()-Anweisung testen wir zuerst, ob der Datentyp von num "number" ist, indem wir den typeof-Operator verwenden und dann testen, ob Number.isNaN(num) false zurckgibt. Wir mssen dies tun, um den spezifischen Fall zu verteidigen, in dem num auf NaN gesetzt ist, da typeof NaN trotzdem "number" zurckgibt!

8. Wenn Sie jedoch das dritte Szenario erneut testen, wird immer noch der Fehler "Uncaught ReferenceError: height is not defined" angezeigt. Sie knnen das Fehlen eines Wertes nicht aus der Funktion heraus beheben, die versucht, den Wert zu verwenden.

Wie gehen wir damit um? Es ist besser, unsere Funktion so zu gestalten, dass sie einen benutzerdefinierten Fehler zurckgibt, wenn die richtigen Daten nicht geliefert werden. Wir werden uns zuerst ansehen, wie man das macht, und dann alle Fehler gemeinsam behandeln.

Benutzerdefinierte Fehler auslsen

Sie knnen jederzeit in Ihrem Code einen benutzerdefinierten Fehler mit der throw-Anweisung und dem Error()-Konstruktor auslsen. Sehen wir uns das in Aktion an.

1. Ersetzen Sie in Ihrer Funktion die console.log()-Zeile im else-Block Ihrer Funktion durch die folgende Zeile:

   js

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

2. Fhren Sie Ihr Beispiel erneut aus, aber stellen Sie sicher, dass num auf einen schlechten (d.h. nicht-numerischen) Wert gesetzt ist. Dieses Mal sollten Sie Ihren benutzerdefinierten Fehler sehen, der zusammen mit einem ntzlichen Aufruf-Stapel geworfen wird, der Ihnen hilft, die Quelle des Fehlers ausfindig zu machen (obwohl die Nachricht immer noch besagt, dass der Fehler "uncaught" oder "unhandled" ist). Okay, Fehler sind rgerlich, aber dies ist weitaus ntzlicher als die Funktion erfolgreich zu fhren und einen Nicht-Zahlenwert zurckzugeben, der spter Probleme verursachen knnte.

Wie behandeln wir also all diese Fehler dann?

try...catch

Die try...catch-Anweisung ist speziell dafr konzipiert, Fehler zu behandeln. Sie hat die folgende Struktur:

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

Im try-Block versuchen Sie, etwas Code auszufhren. Wenn dieser Code fehlerfrei luft, ist alles in Ordnung, und der catch-Block wird ignoriert. Wenn jedoch ein Fehler auftritt, wird der catch-Block ausgefhrt, der Zugriff auf das geschaffene Error-Objekt bietet, das den Fehler reprsentiert und es Ihnen erlaubt, Code zur Behandlung des Fehlers auszufhren.

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

1. Ersetzen Sie die console.log()-Zeile, die die inchesToMeters()-Funktion am Ende Ihres Skripts aufruft, durch den folgenden Block. Wir fhren jetzt unsere console.log()-Zeile innerhalb eines try-Blocks aus und behandeln alle Fehler, die sie zurckgibt, 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 jetzt zwei Dinge sehen:

   • Die Fehlermeldung und der Aufruf-Stapel sind wie zuvor, aber dieses Mal ohne das Label "uncaught" oder "unhandled".
   • Die geloggte Nachricht "Fgen Sie Code hinzu, um den Fehler zu behandeln".

3. Versuchen Sie jetzt, num auf einen guten (numerischen) Wert zu setzen, und Sie werden das Ergebnis der Berechnung protokolliert sehen, ohne Fehlermeldung.

Dies ist signifikant alle ausgelsten Fehler werden jetzt behandelt, sodass sie die Anwendung nicht zum Absturz bringen. Sie knnen beliebigen Code ausfhren, um den Fehler zu beheben. Oben protokollieren wir eine einfache Nachricht, aber zum Beispiel knnten Sie die Funktion aufrufen, die den Benutzer auffordert, seine Gre erneut einzugeben, dieses Mal jedoch die Eingabefehler zu korrigieren. Sie knnten sogar eine if...else-Anweisung verwenden, um je nach Fehlertyp unterschiedlichen Fehlerbehandlungscode auszufhren.

Feature-Erkennung

Die Feature-Erkennung ist ntzlich, wenn Sie planen, neue JavaScript-Funktionen zu verwenden, die mglicherweise nicht in allen Browsern untersttzt werden. Sie knnen auf die Funktion testen und dann bedingt Code ausfhren, um sowohl in Browsern, die die Funktion untersttzen, als auch in solchen, die das nicht tun, ein akzeptables Erlebnis zu bieten. Als schnelles Beispiel hat die Geolocation-API (die verfgbare Standortdaten fr das Gert bereitstellt, auf dem der Webbrowser ausgefhrt wird) einen Haupteinstiegspunkt eine geolocation-Eigenschaft, die auf dem globalen Navigator-Objekt verfgbar ist. Daher knnen Sie erkennen, ob der Browser Geolocation untersttzt oder nicht, indem Sie eine hnliche if()-Struktur wie zuvor verwenden:

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 knnen einige weitere Beispiele zur Feature-Erkennung in Alternativen zum UA-Sniffing finden.

Hilfe finden

Es gibt viele andere Probleme, die Sie mit JavaScript (und HTML und CSS!) begegnen werden, was das Wissen um das Finden von Antworten online wertvoll macht.

Unter den besten Quellen fr Untersttzung gehren MDN, stackoverflow.com und caniuse.com.

• Um MDN zu verwenden, fhren die meisten Menschen eine Suchmaschinensuche nach der Technologie durch, ber die sie Informationen suchen, plus den Begriff "mdn", z. B. "mdn HTML video".
• caniuse.com bietet Untersttzungsinformationen zusammen mit einigen ntzlichen externen Ressourcenlinks. Sehen Sie z. B. https://caniuse.com/#search=video (Sie mssen das Feature, das Sie suchen, in das Textfeld eingeben).
• stackoverflow.com (SO) ist eine Forum-Site, auf der Sie Fragen stellen und Mitentwickler Ihre Lsungen teilen knnen, frhere Beitrge durchsuchen und anderen Entwicklern helfen knnen. Suchen Sie nach einer Antwort auf Ihre Frage, um zu sehen, ob bereits eine existiert, bevor Sie eine neue Frage posten. Zum Beispiel haben wir auf SO nach "deaktivieren des Fokus auf HTML-Dialog" gesucht und sehr schnell Fokussierungsautomatismus von showModal mithilfe von HTML-Attributen deaktivieren gefunden.

Abgesehen davon, versuchen Sie, mit Ihrer bevorzugten Suchmaschine nach einer Antwort auf Ihr Problem zu suchen. Es ist oft ntzlich, nach spezifischen Fehlermeldungen zu suchen, wenn Sie welche haben andere Entwickler werden wahrscheinlich die gleichen Probleme gehabt haben wie Sie.

Zusammenfassung

Das war also das Debuggen und die Fehlerbehandlung in JavaScript. Einfach, nicht wahr? Vielleicht nicht so einfach, aber dieser Artikel sollte Ihnen zumindest einen Start und einige Ideen geben, wie Sie die JavaScript-bezogenen Probleme, denen Sie begegnen werden, angehen knnen.

Das war es fr das Modul Dynamisches Scripting mit JavaScript; Herzlichen Glckwunsch, dass Sie das Ende erreicht haben! Im nchsten Modul helfen wir Ihnen, JavaScript-Frameworks und -Bibliotheken zu erkunden.

• Zurck
• bersicht: Dynamische Skripterstellung mit JavaScript
• Weiter