JavaScript-Fehler beheben

Kayce Basques

Sofia Emelianova

In dieser Anleitung erfährst du den grundlegenden Workflow zum Debuggen von JavaScript-Problemen in den Entwicklertools. Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Anleitung an.

Fehler reproduzieren

Die Suche nach einer Reihe von Aktionen, durch die ein Fehler konsistent reproduziert wird, ist immer der erste Schritt zur Fehlerbehebung.

1. Öffnen Sie diese Demo in einem neuen Tab.
2. Geben Sie im Feld Zahl 1 die Zahl 5 ein.
3. Geben Sie 1 in das Feld Zahl 2 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. Diesen Fehler beheben Sie.

In diesem Beispiel ist das Ergebnis von 5 + 1 = 51. Sie sollte bei 6 liegen.

Benutzeroberfläche des Bereichs „Quellen“ kennenlernen

Die Entwicklertools bieten viele verschiedene Tools für unterschiedliche Aufgaben, z. B. zum Ändern von CSS, zur Profilerstellung für Seitenladeleistungen und zum Überwachen von Netzwerkanfragen. Im Bereich Quellen können Sie JavaScript debuggen.

1. Öffnen Sie die Entwicklertools und gehen Sie zum Bereich Quellen.

   

Der Bereich Quellen besteht aus drei Abschnitten:

1. Der Tab Seite mit dem Dateibaum. Hier sind alle Dateien aufgeführt, die von der Seite angefordert werden.
2. Im Bereich Code-Editor Nachdem Sie auf dem Tab Seite eine Datei ausgewählt haben, wird hier der Inhalt dieser Datei angezeigt.

3. Im Abschnitt Debugger Verschiedene Tools zum Prüfen des JavaScript-Codes der Seite.

   Wenn das Entwicklertools-Fenster groß ist, befindet sich der Debugger standardmäßig rechts neben dem Code-Editor. In diesem Fall werden die Tabs Scope (Umfang) und Watch (Beobachten) mit Breakpoints (Bruchstellen), Call Stack (Aufrufstack) und anderen als minimierbare Bereiche kombiniert.

Code mit einem Haltepunkt pausieren

Eine gängige Methode zur Behebung eines solchen Problems besteht darin, viele console.log()-Anweisungen in den Code einzufügen, um die Werte bei der Ausführung des Scripts zu prü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() kann der Job erledigt werden, aber mit Haltepunkten kann er schneller erledigt werden. Mit einem Haltepunkt können Sie Ihren Code während der Ausführung pausieren und alle Werte zu diesem Zeitpunkt prüfen. Breakpoints haben einige Vorteile gegenüber der console.log()-Methode:

• Bei 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. Mithilfe von Haltepunkten können Sie den relevanten Code anhalten, ohne zu wissen, wie der Code strukturiert ist.
• In Ihren console.log()-Anweisungen müssen Sie jeden Wert, den Sie prüfen möchten, explizit angeben. Mithilfe von Haltepunkten werden in den DevTools die Werte aller Variablen zu diesem Zeitpunkt angezeigt. Manchmal beeinflussen Ihren Code Variablen, die Sie nicht einmal kennen.

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

Wenn Sie einen Schritt zurücktreten und darüber nachdenken, wie die App funktioniert, können Sie eine fundierte Vermutung anstellen, dass die falsche Summe (5 + 1 = 51) im click-Ereignislistener berechnet wird, der mit der Schaltfläche Zahl 1 und Zahl 2 addieren verknüpft ist. Daher sollten Sie den Code ungefähr zum Zeitpunkt der Ausführung des click-Listeners pausieren. Mit Event-Listener-Haltepunkten können Sie genau das tun:

1. Klicken Sie im Bereich Debugger auf Ereignis-Listener-Bruchstellen, um den Bereich zu maximieren. In den Entwicklertools wird eine Liste mit maximierbaren Ereigniskategorien angezeigt, darunter Animation und Zwischenablage.
2. Klicken Sie neben der Ereigniskategorie Maus auf arrow_right Maximieren. In den Entwicklertools wird eine Liste mit Mausereignissen wie click und mousedown angezeigt. Neben jedem Ereignis befindet sich ein Kästchen.

3. Setzen Sie ein Häkchen in das Kästchen Klick. DevTools wird jetzt automatisch pausiert, wenn ein beliebiger click-Ereignis-Listener ausgeführt wird.

   

4. Klicken Sie in der Demo noch einmal auf Add Number 1 and Number 2 (Nummer 1 und Nummer 2 hinzufügen). In den Entwicklertools wird die Demo pausiert und im Bereich Quellen eine Codezeile hervorgehoben. Die Entwicklertools sollten in dieser Codezeile pausiert werden:

   function onClick() {
   

   Wenn die Pausierung in einer anderen Codezeile erfolgt, klicken Sie auf fortsetzen Skriptausführung fortsetzen, bis Sie in der richtigen Zeile pausiert werden.

Event-Listener-Haltepunkte sind nur eine von vielen Arten von Haltepunkten, die in DevTools verfügbar sind. Es lohnt sich, die verschiedenen Typen zu untersuchen, da jeder Typ letztendlich dazu beiträgt, Fehler in verschiedenen Szenarien so schnell wie möglich zu beheben. Weitere Informationen dazu, wann und wie Sie die einzelnen Typen verwenden, finden Sie unter Code mithilfe von Haltepunkten pausieren.

Code Schritt für Schritt durchgehen

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

1. Klicken Sie im Bereich Quellen von DevTools auf step_into Step Into zum nächsten Funktionsaufruf, um die Ausführung der onClick()-Funktion Zeile für Zeile durchzugehen. In den DevTools wird die folgende Codezeile hervorgehoben:

   if (inputsAreEmpty()) {
   

2. Klicken Sie auf step_over Step Over zum nächsten Funktionsaufruf.

   In den Entwicklertools wird inputsAreEmpty() ausgeführt, ohne dass Sie hineingehen. Beachten Sie, dass in den DevTools einige Codezeilen übersprungen werden. Das liegt daran, dass inputsAreEmpty() als „false“ ausgewertet wurde und der Codeblock der if-Anweisung nicht ausgeführt wurde.

Das ist die Grundidee des Durchlaufens von Code. Wenn Sie sich den Code in get-started.js ansehen, können Sie erkennen, dass der Fehler wahrscheinlich irgendwo in der Funktion updateLabel() liegt. Anstatt jede Codezeile durchzugehen, können Sie einen anderen Typ von Haltepunkt verwenden, um den Code näher am wahrscheinlichen Ort des Bugs anzuhalten.

Haltepunkt für Codezeile festlegen

Codezeilen-Unterbrechungen sind die gängigste Art von Unterbrechung. Wenn Sie eine bestimmte Codezeile pausieren möchten, verwenden Sie einen Haltepunkt als Codezeile:

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

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

2. Links neben dem Code sehen Sie die Nummer der Codezeile 32. Klicken Sie auf 32. In den Entwicklertools wird über 32 ein blaues Symbol angezeigt. Das bedeutet, dass sich in dieser Zeile ein Codezeilen-Unterbrechungspunkt befindet. Die DevTools werden jetzt immer pausiert, bevor diese Codezeile ausgeführt wird.

3. Klicken Sie auf Fortsetzen Skriptausführung fortsetzen. Die Ausführung des Scripts wird fortgesetzt, bis Zeile 32 erreicht wird. In den Zeilen 29, 30 und 31 werden in den Entwicklertools die Werte von addend1, addend2 und sum neben den Deklarationen angezeigt.

In diesem Beispiel wird in DevTools an der Codezeile 32 angehalten.

Variablenwerte prüfen

Die Werte addend1, addend2 und sum sehen verdächtig aus. Sie sind in Anführungszeichen gesetzt, was bedeutet, dass es sich um Strings handelt. Dies ist eine gute Hypothese zur Erklärung der Ursache des Fehlers. Jetzt ist es an der Zeit, weitere Informationen zu sammeln. DevTools bietet viele Tools zum Untersuchen von Variablenwerten.

Methode 1: Umfang prüfen

Wenn die Ausführung bei einer Codezeile pausiert ist, sehen Sie auf dem Tab Scope (Umfang), welche lokalen und globalen Variablen an diesem Punkt der Ausführung definiert sind, zusammen mit dem Wert jeder Variablen. Falls zutreffend, werden auch Schließungsvariablen angezeigt. Wenn Sie nicht bei einer Codezeile stehen, ist der Tab Umfang leer.

Klicken Sie doppelt auf einen Variablenwert, um ihn zu bearbeiten.

Methode 2: Überwachungsausdrücke

Auf dem Tab Beobachten können Sie die Werte von Variablen im Zeitverlauf beobachten. Beobachten ist nicht nur auf Variablen beschränkt. Auf dem Tab Smartwatch können Sie jeden gültigen JavaScript-Ausdruck speichern.

Jetzt ausprobieren:

1. Klicke auf den Tab Ansehen.
2. Klicken Sie auf Hinzufügen Watch-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 vom Doppelpunkt ist das Ergebnis des Ausdrucks.

Auf diesem Screenshot ist der Tab Ansehen (unten rechts) zu sehen, nachdem der Watch-Ausdruck typeof sum erstellt wurde.

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

Methode 3: Console

Sie können sich nicht nur console.log()-Nachrichten ansehen, sondern auch beliebige JavaScript-Anweisungen in der Console auswerten. In Bezug auf das Debugging können Sie die Console verwenden, um potenzielle Fehlerkorrekturen zu testen. Jetzt ausprobieren:

1. Wenn der Konsolenbereich nicht geöffnet ist, drücken Sie die Esc-Taste, um ihn zu öffnen. Sie wird unten im Entwicklertools-Fenster geöffnet.
2. Geben Sie in der Konsole parseInt(addend1) + parseInt(addend2) ein. Diese Anweisung funktioniert, weil Sie bei einer Codezeile angehalten sind, in der addend1 und addend2 gültig sind.
3. Drücken Sie die Eingabetaste. Die Entwicklertools wertet die Anweisung aus und geben 6 aus. Dies ist das Ergebnis, das Sie von der Demo erwarten.

Auf diesem Screenshot ist die Konsolenleiste nach der Auswertung von parseInt(addend1) + parseInt(addend2) zu sehen.

Problemlösung anwenden

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

1. Klicken Sie auf Fortsetzen Skriptausführung fortsetzen.
2. Ersetzen Sie im Code-Editor Zeile 31, var sum = addend1 + addend2, durch var sum = parseInt(addend1) + parseInt(addend2).
3. Drücken Sie die Befehlstaste + S (Mac) oder Strg + S (Windows, Linux), um die Änderung zu speichern.
4. Klicken Sie auf label_off Haltepunkte deaktivieren. Die Farbe ändert sich zu Blau, um anzuzeigen, dass es aktiv ist. In diesem Fall werden in den Entwicklertools alle von Ihnen festgelegten Haltestellen ignoriert.
5. Probieren Sie die Demo mit verschiedenen Werten aus. Die Demo wird jetzt korrekt berechnet.

Nächste Schritte

In diesem Tutorial wurden nur zwei Möglichkeiten zum Setzen von Haltepunkten gezeigt. Die Entwicklertools bieten viele weitere Möglichkeiten, z. B.:

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

Weitere Informationen dazu, wann und wie Sie die einzelnen Typen verwenden, finden Sie unter Code mithilfe von Haltepunkten pausieren.

Es gibt einige Steuerelemente für das Durchlaufen von Code, die in dieser Anleitung nicht erläutert wurden. Weitere Informationen finden Sie unter Über Codezeilen hinwegspringen.