JavaScript-Fehler beheben

Kayce Basques

Sofia Emelianova

In dieser Anleitung erfahren Sie, wie Sie JavaScript-Probleme in den DevTools beheben. Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Anleitung an.

Fehler reproduzieren

Der erste Schritt beim Beheben von Fehlern besteht immer darin, eine Reihe von Aktionen zu finden, mit denen der Fehler immer wieder reproduziert werden kann.

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. Es sollte 6 sein.

Benutzeroberfläche des Bereichs „Quellen“ kennenlernen

DevTools bietet viele verschiedene Tools für verschiedene Aufgaben, z. B. zum Ändern von CSS, zum Erstellen von Seitenladeprofils 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 DevTools-Fenster breit 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 console.log()-Methode lässt sich das Problem zwar beheben, mit Bruchpunkten geht es aber schneller. 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 gibt es Variablen, die sich auf Ihren Code auswirken, ohne dass Sie es wissen.

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 DevTools wird eine Liste mit erweiterbaren Ereigniskategorien angezeigt, z. B. Animation und Zwischenablage.
2. Klicken Sie neben der Ereigniskategorie Maus auf arrow_right Maximieren. In den DevTools wird eine Liste von Mausereignissen angezeigt, z. B. click und mousedown. 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 eine Codezeile im Bereich Quellen hervorgehoben. Die Entwicklertools sollten bei dieser Codezeile pausiert sein:

   function onClick() {
   

   Wenn die Ausführung an einer anderen Codezeile pausiert ist, drücken Sie so oft auf Fortsetzen Scriptausführung fortsetzen, bis die Ausführung an der richtigen Zeile pausiert ist.

   Hinweis: Wenn Sie an einer anderen Zeile pausiert haben, haben Sie eine Browsererweiterung, die auf jeder besuchten Seite einen click-Ereignis-Listener registriert. Sie wurden im click-Listener der Erweiterung pausiert. Wenn Sie den Inkognitomodus verwenden, um privat zu surfen, wodurch alle Erweiterungen deaktiviert werden, sehen Sie, dass Sie jedes Mal an der richtigen Codezeile anhalten.

Event-Listener-Haltepunkte sind nur eine von vielen Arten von Haltepunkten, die in DevTools verfügbar sind. Es lohnt sich, alle verschiedenen Typen zu erkunden, da jeder Typ Ihnen letztendlich dabei hilft, verschiedene 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 nachvollziehen 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 DevTools wird inputsAreEmpty() ausgeführt, ohne dass Sie hineingehen. Beachten Sie, dass in den DevTools einige Codezeilen übersprungen werden. Das liegt daran, dass inputsAreEmpty() den Wert „false“ ergibt, sodass der Codeblock der Anweisung if nicht ausgeführt wird.

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 eine Codezeile setzen

Codezeilen-Unterbrechungen sind die gängigste Art von Unterbrechung. Wenn Sie bei einer bestimmten Codezeile anhalten möchten, verwenden Sie einen Codezeilen-Haltepunkt:

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 Codezeile, also 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 die Ausführung in DevTools am Code-Unterbrechungspunkt in Zeile 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. Die DevTools bieten viele Tools zum Prüfen 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.

Hinweis: Je nach Layouteinstellung und Breite des DevTools-Fensters wird der Tab Scope möglicherweise zusammen mit Breakpoints und Call Stack als minimierbarer Bereich angezeigt.

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.

Hinweis: Je nach Layouteinstellung und Breite des DevTools-Fensters wird der Tab Watch möglicherweise zusammen mit Breakpoints und Call Stack als minimierbarer Bereich angezeigt.

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. Beim Debuggen können Sie mit der Console potenzielle Fehlerkorrekturen testen. Jetzt ausprobieren:

1. Wenn der Konsolenbereich nicht geöffnet ist, drücken Sie die Esc-Taste, um ihn zu öffnen. Es wird unten im DevTools-Fenster geöffnet.
2. Geben Sie in der Console 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. In den DevTools wird die Anweisung ausgewertet und 6 ausgegeben, was das erwartete Ergebnis der Demo ist.

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 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 die Funktion 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.

Achtung:Mit diesem Workflow wird nur der Code korrigiert, der in Ihrem Browser ausgeführt wird. Der Code wird dadurch nicht für alle Nutzer korrigiert, die Ihre Seite besuchen. Dazu müssen Sie den Code auf Ihren Servern korrigieren. Sie können jedoch Dateien in DevTools bearbeiten und mit Workspaces in Ihren Quellen speichern.

Tipp :Ab Chrome-Version 105 können Sie pausierte Funktionen live bearbeiten.

Nächste Schritte

Erfolg: Glückwunsch! Sie wissen jetzt, wie Sie die Chrome-Entwicklertools beim Debuggen von JavaScript optimal nutzen. Die Tools und Methoden, die Sie in dieser Anleitung kennengelernt haben, können Ihnen unzählige Stunden sparen.

In diesem Tutorial wurden nur zwei Möglichkeiten zum Setzen von Haltepunkten gezeigt. DevTools bietet viele weitere Möglichkeiten, darunter:

• 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.