JavaScript-Fehler beheben

In dieser Anleitung wird der grundlegende Workflow zum Beheben von JavaScript-Problemen in den Entwicklertools erläutert. Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Anleitung unten an.

Schritt 1: Fehler reproduzieren

Eine Reihe von Aktionen zu finden, die einen Fehler kontinuierlich reproduzieren, ist immer der erste Schritt zur Fehlerbehebung.

1. Öffne diese Demo in einem neuen Tab.
2. Geben Sie in das Textfeld Nummer 1 5 ein.
3. Geben Sie in das Textfeld Nummer 2 1 ein.
4. Klicken Sie auf Nummer 1 und Nummer 2 hinzufügen. Auf dem Label unter der Schaltfläche steht „5 + 1 = 51“. Das Ergebnis sollte 6 sein. Das ist der Fehler, den Sie beheben werden.

In diesem Beispiel ist das Ergebnis von 5 + 1 51. Sie sollte 6 sein.

Schritt 2: Benutzeroberfläche des Steuerfelds „Quellen“ kennenlernen

DevTools bietet viele verschiedene Tools für unterschiedliche Aufgaben, z. B. zum Ändern des CSS-Codes, zum Erstellen eines Profils für die Seitenladeleistung und zum Überwachen von Netzwerkanfragen. Im Bereich Quellen können Sie JavaScript-Fehler beheben.

1. Öffnen Sie die Entwicklertools mit Befehl + Option + J (Mac) oder Strg + Umschalttaste + J (Windows, Linux). Über diese Verknüpfung wird der Bereich Console geöffnet.

   

2. Klicken Sie auf den Tab Quellen.

   

Die Benutzeroberfläche für den Bereich Quellen besteht aus drei Teilen:

1. Der Bereich Dateinavigator: Alle von der Seite angeforderten Dateien werden hier aufgeführt.
2. Im Bereich Codeeditor Nachdem Sie eine Datei im Bereich File Navigator ausgewählt haben, wird der Inhalt dieser Datei hier angezeigt.
3. Der Bereich JavaScript-Debugging Verschiedene Tools zum Untersuchen des JavaScript der Seite. Wenn das Entwicklertools-Fenster breit ist, wird dieser Bereich rechts neben dem Code-Editor-Bereich angezeigt.

Schritt 3: Code mit einem Haltepunkt pausieren

Eine gängige Methode zum Debuggen eines solchen Problems besteht darin, viele console.log()-Anweisungen in den Code einzufügen, um die Werte bei der Ausführung des Skripts zu überprüfen. Beispiel:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

Mit der Methode console.log() wird der Job zwar möglicherweise erledigt, aber mit Haltepunkten geht das schneller. Mit einem Haltepunkt können Sie den Code während der Ausführung pausieren und alle Werte zu diesem Zeitpunkt untersuchen. Haltepunkte haben gegenüber der Methode console.log() einige Vorteile:

• Mit console.log() müssen Sie den Quellcode manuell öffnen, den relevanten Code finden, die console.log()-Anweisungen einfügen und dann die Seite neu laden, damit die Meldungen in der Console angezeigt werden. Mit Haltepunkten können Sie den relevanten Code anhalten, ohne zu wissen, wie er strukturiert ist.
• In Ihren console.log()-Anweisungen müssen Sie jeden Wert, den Sie prüfen möchten, explizit angeben. Mit Haltepunkten werden in den Entwicklertools die Werte aller Variablen zu diesem Zeitpunkt angezeigt. Manchmal gibt es Variablen, die Ihren Code beeinflussen, die Sie nicht einmal kennen.

Kurz gesagt können Sie mithilfe von Haltepunkten Fehler schneller finden und beheben als mit der Methode console.log().

Wenn Sie sich die Funktionsweise der Anwendung genauer ansehen, können Sie eine fundierte Vermutung anstellen, dass die falsche Summe (5 + 1 = 51) im Event-Listener click berechnet wird, der der Schaltfläche Zahl 1 und Zahl 2 hinzufügen zugeordnet ist. Daher sollten Sie den Code ungefähr zu dem Zeitpunkt pausieren, an dem der Listener click ausgeführt wird. Mit Ereignis-Listener-Haltepunkten können Sie genau das tun:

1. Klicken Sie im Bereich JavaScript-Debugging auf Ereignis-Listener-Haltepunkte, um den Abschnitt zu maximieren. In den Entwicklertools sehen Sie eine Liste maximierbarer Ereigniskategorien, z. B. Animation und Zwischenablage.
2. Klicken Sie neben der Ereigniskategorie Maus auf Maximieren . In den Entwicklertools wird eine Liste mit Mausereignissen angezeigt, z. B. click und mousedown. Neben jedem Ereignis ist ein Kästchen zu sehen.

3. Klicken Sie das Kästchen Klicken an. Die Entwicklertools sind jetzt so eingerichtet, dass sie automatisch pausiert werden, wenn ein beliebiger click-Ereignis-Listener ausgeführt wird.

   

4. Kehren Sie zur Demo zurück und klicken Sie noch einmal auf Nummer 1 und Nummer 2 hinzufügen. DevTools pausiert die Demo und hebt eine Codezeile im Bereich Quellen hervor. Die Entwicklertools sollten bei dieser Codezeile pausiert werden:

   function onClick() {
   

   Wenn Sie die Pausierung in einer anderen Codezeile vorgenommen haben, drücken Sie Skriptausführung fortsetzen , bis Sie in der richtigen Zeile die Pausierung wieder aufheben.

Ereignis-Listener-Haltepunkte sind nur eine von vielen Arten von Haltepunkten, die in den Entwicklertools verfügbar sind. Es lohnt sich, sich die verschiedenen Typen zu merken, da Sie mit jedem Typ letztendlich verschiedene Szenarien so schnell wie möglich debuggen können. Unter Code mit Haltepunkten pausieren erfahren Sie, wann und wie Sie die einzelnen Typen verwenden sollten.

Schritt 4: Code durchgehen

Eine häufige Ursache für Fehler ist, dass ein Skript in der falschen Reihenfolge ausgeführt wird. Wenn Sie den Code Schritt für Schritt durchgehen, können Sie Zeile für Zeile die Ausführung des Codes durchlaufen und genau herausfinden, wo er in einer anderen Reihenfolge als erwartet ausgeführt wird. Jetzt ausprobieren:

1. Klicken Sie in den Entwicklertools im Bereich Quellen auf Zum nächsten Funktionsaufruf wechseln , um die Ausführung der Funktion onClick() Zeile für Zeile zu durchlaufen. In den Entwicklertools wird die folgende Codezeile hervorgehoben:

   if (inputsAreEmpty()) {
   

2. Klicken Sie auf Schritt über den nächsten Funktionsaufruf . Die Entwicklertools führen inputsAreEmpty() aus, ohne dass ein Aufruf erforderlich ist. Wie Sie sehen, werden in den Entwicklertools einige Codezeilen übersprungen. Das liegt daran, dass inputsAreEmpty() als „false“ ausgewertet wird, sodass der Codeblock der if-Anweisung nicht ausgeführt wurde.

Das ist die Grundidee der schrittweisen Codeerstellung. Wenn Sie sich den Code in get-started.js ansehen, werden Sie feststellen, dass der Fehler wahrscheinlich irgendwo in der updateLabel()-Funktion enthalten ist. Anstatt jede Codezeile zu durchlaufen, können Sie eine andere Art von Haltepunkt verwenden, um den Code näher an der wahrscheinlichen Position des Fehlers zu pausieren.

Schritt 5: Haltepunkt für Codezeile festlegen

Haltepunkte in Codezeilen sind die gängigste Art von Haltepunkten. Wenn Sie eine bestimmte Codezeile anhalten möchten, verwenden Sie einen Haltepunkt für die Codezeile:

1. Sehen Sie sich die letzte Codezeile in updateLabel() an:

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. Links neben dem Code sehen Sie die Zeilennummer dieser bestimmten Codezeile, in diesem Fall 32. Klicken Sie auf 32. In den Entwicklertools wird 32 mit einem blauen Symbol markiert. Das bedeutet, dass diese Zeile einen Haltepunkt enthält. In den Entwicklertools wird jetzt immer eine Pause gemacht, bevor diese Codezeile ausgeführt wird.

3. Klicken Sie auf Skriptausführung fortsetzen . Das Skript wird weiter ausgeführt, bis es Zeile 32 erreicht. In den Zeilen 29, 30 und 31 werden in den Entwicklertools die Werte addend1, addend2 und sum direkt neben ihren Deklarationen angezeigt.

In diesem Beispiel pausiert DevTools am Haltepunkt der Codezeile in Zeile 32.

Schritt 6: Variablenwerte prüfen

Die Werte von addend1, addend2 und sum sehen verdächtig aus. Sie werden in Anführungszeichen gesetzt, also Zeichenfolgen. Dies ist eine gute Hypothese, um die Ursache des Fehlers zu erklären. Jetzt ist es an der Zeit, mehr Informationen zu sammeln. DevTools bietet viele Tools zum Untersuchen von Variablenwerten.

Methode 1: Bereich „Scope“ (Umfang)

Wenn Sie bei einer Codezeile pausiert haben, wird im Bereich Scope (Bereich) angezeigt, welche lokalen und globalen Variablen aktuell definiert sind, sowie den Wert jeder Variablen. Gegebenenfalls werden auch Geschlossenheitsvariablen angezeigt. Doppelklicken Sie auf einen Variablenwert, um ihn zu bearbeiten. Wenn Sie in einer Codezeile nicht pausiert werden, ist der Bereich Scope leer.

Methode 2: Watch-Ausdrücke

Mit dem Tab Beobachtungsausdrücke können Sie die Werte von Variablen im Zeitverlauf überwachen. Wie der Name schon sagt, sind Watch-Ausdrücke nicht nur auf Variablen beschränkt. Sie können jeden gültigen JavaScript-Ausdruck in einem Watch-Ausdruck speichern. Jetzt ausprobieren:

1. Klicke auf den Tab Ansehen.
2. Klicken Sie auf Ausdruck hinzufügen .
3. Geben Sie typeof sum ein.
4. Drücken Sie die Eingabetaste. In den Entwicklertools wird typeof sum: "string" angezeigt. Der Wert rechts neben dem Doppelpunkt ist das Ergebnis Ihres Watch-Ausdrucks.

Der obige Screenshot zeigt den Bereich Watch Expression (Beobachtungsausdruck) (unten rechts) nach dem Erstellen des Watch-Ausdrucks typeof sum. Wenn das Entwicklertools-Fenster groß ist, befindet sich der Bereich Watch Expression auf der rechten Seite über dem Bereich Event Listener Breakpoints (Ereignis-Listener-Haltepunkte).

Wie vermutet, wird sum als String ausgewertet, obwohl es sich tatsächlich um eine Zahl handeln sollte. Sie haben jetzt bestätigt, dass dies die Ursache des Fehlers ist.

Methode 3: Die Konsole

Mit der Console können Sie nicht nur console.log()-Nachrichten ansehen, sondern auch beliebige JavaScript-Anweisungen auswerten. In Bezug auf das Debugging können Sie mit der Console potenzielle Fehlerbehebungen für Fehler testen. Jetzt ausprobieren:

1. Wenn die Console-Leiste nicht geöffnet ist, drücken Sie die Esc-Taste, um sie zu öffnen. Sie wird am unteren Rand des Entwicklertools-Fensters geöffnet.
2. Geben Sie in der Console parseInt(addend1) + parseInt(addend2) ein. Diese Anweisung funktioniert, da Sie in einer Codezeile, in der addend1 und addend2 enthalten sind, pausiert wurde.
3. Drücken Sie die Eingabetaste. Die Entwicklertools werten die Anweisung aus und geben 6 aus. Dies ist das Ergebnis, das Sie von der Demo erwarten.

Im Screenshot oben ist die Console-Leiste nach der Auswertung von parseInt(addend1) + parseInt(addend2) zu sehen.

Schritt 7: Korrektur anwenden

Du hast eine Lösung für den Fehler gefunden. Jetzt müssen Sie nur noch die Lösung ausprobieren, indem Sie den Code bearbeiten und die Demo noch einmal ausführen. Sie müssen die Entwicklertools nicht verlassen, um die Korrektur anzuwenden. Sie können JavaScript-Code direkt in der Benutzeroberfläche der Entwicklertools bearbeiten. Jetzt ausprobieren:

1. Klicken Sie auf Skriptausführung fortsetzen .
2. Ersetzen Sie im Codeeditor Zeile 31 (var sum = addend1 + addend2) durch var sum = parseInt(addend1) + parseInt(addend2).
3. Drücken Sie Befehlstaste + S (Mac) oder Strg + S (Windows, Linux), um die Änderung zu speichern.
4. Klicken Sie auf Haltepunkte deaktivieren . Die Farbe wechselt zu Blau, um anzuzeigen, dass es aktiv ist. Wenn dieser Wert festgelegt ist, ignoriert die Entwicklertools alle von Ihnen gesetzten Haltepunkte.
5. Probieren Sie die Demo mit verschiedenen Werten aus. Die Demo wird jetzt korrekt berechnet.

Nächste Schritte

Glückwunsch! Jetzt wissen Sie, wie Sie die Chrome-Entwicklertools für das Debugging von JavaScript optimal nutzen können. Mit den Tools und Methoden, die Sie in dieser Anleitung gelernt haben, können Sie zahllose Stunden sparen.

In dieser Anleitung wurden nur zwei Möglichkeiten zum Festlegen von Haltepunkten beschrieben. DevTools bietet viele weitere Möglichkeiten, unter anderem:

• Bedingte Haltepunkte, die nur ausgelöst werden, wenn die von Ihnen angegebene Bedingung erfüllt ist.
• Haltepunkte für erkannte oder nicht abgefangene Ausnahmen.
• XHR-Haltepunkte, die ausgelöst werden, wenn die angeforderte URL mit einem von Ihnen angegebenen Teilstring übereinstimmt.

Unter Code mit Haltepunkten pausieren erfahren Sie, wann und wie Sie die einzelnen Typen verwenden sollten.

Es gibt einige Steuerelemente für Codeschritte, die in dieser Anleitung nicht erläutert wurden. Weitere Informationen finden Sie unter Schritt über Codezeile.