JavaScript-Fehler beheben

Kayce Basques

Sofia Emelianova

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

Fehler reproduzieren

Eine Reihe von Aktionen zu finden, durch die ein Fehler immer wieder auftritt, ist immer der erste Schritt, Debugging.

1. Öffnen Sie diese Demo in einem neuen Tab.
2. Geben Sie 5 in das Feld Nummer 1 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. Dies ist der Fehler, den Sie beheben werden.

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

Die Benutzeroberfläche des Quellenbereichs kennenlernen

Die Entwicklertools bieten viele verschiedene Tools für unterschiedliche Aufgaben, z. B. zum Ändern von CSS oder zur Profilerstellungsseite. die Ladeleistung und die Überwachung von Netzwerkanfragen. Fehler im Bereich Quellen beheben JavaScript

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

   

Der Bereich Quellen ist in drei Abschnitte unterteilt:

1. Tab Seite mit der Dateistruktur Hier sind alle Dateien aufgeführt, die von der Seite angefordert werden.
2. Im Abschnitt Codeeditor Nachdem Sie auf dem Tab Seite eine Datei ausgewählt haben, dieser Datei werden hier angezeigt.

3. Debugger Verschiedene Tools zur Überprüfung des JavaScript-Codes der Seite

   Wenn das Fenster der Entwicklertools breit ist, befindet sich der Debugger standardmäßig rechts neben dem Code-Editor. In diesem Fall verbinden die Tabs Umfang und Ansehen die Tabs Haltepunkte, Aufrufstapel und andere als minimierbare Abschnitte.

Code mit einem Haltepunkt pausieren

Eine gängige Methode zum Debuggen eines solchen Problems besteht darin, viele console.log()-Anweisungen einzufügen. in den Code ein, 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() kann der Job erledigt werden, aber mit Haltepunkten kann er schneller erledigt werden. A Mit einem Haltepunkt können Sie Ihren Code mitten in der Ausführung anhalten und alle Werte an diesem Punkt untersuchen einen bestimmten Moment zu erregen. Haltepunkte haben einige Vorteile gegenüber der Methode console.log():

• Mit console.log() müssen Sie den Quellcode manuell öffnen, den relevanten Code suchen, die console.log()-Anweisungen und aktualisieren Sie dann die Seite, um die Nachrichten in der Konsole. Mit Haltepunkten können Sie den relevanten Code anhalten, ohne zu wissen, wie der Code ist. strukturiert.
• In den console.log()-Anweisungen müssen Sie explizit jeden Wert angeben, der prüfen. Mit Haltepunkten werden in den Entwicklertools die Werte aller Variablen zum jeweiligen Zeitpunkt angezeigt. Manchmal beeinflussen Ihren Code Variablen, die Sie nicht einmal kennen.

Kurz gesagt: Haltepunkte können dir helfen, Programmfehler schneller zu finden und zu beheben als mit der console.log()-Methode.

Wenn Sie einen Schritt zurückgehen und darüber nachdenken, wie die App funktioniert, können Sie eine fundierte Vermutung anstellen, dass die App Im click-Event-Listener, der mit dem Ereignis-Listener verknüpft ist, wird eine falsche Summe (5 + 1 = 51) berechnet. Schaltfläche Nummer 1 und Nummer 2 hinzufügen. Daher empfiehlt es sich, den Code etwa die der Listener click ausführt. Ereignis-Listener-Haltepunkte ermöglichen genau diese Schritte:

1. Klicken Sie im Bereich Debugger auf Event Listener Breakpoints, . 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 Termin befindet sich ein Kästchen.

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

   

4. Kehren Sie zur Demo zurück und klicken Sie noch einmal auf Nummer 1 und Nummer 2 hinzufügen. Entwicklertools pausiert die Demo und markiert eine Codezeile im Bereich Quellen. Die Entwicklertools sollten in dieser Zeile Code:

   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.

   Hinweis: Wenn Sie die Pause in einer anderen Zeile pausieren, haben Sie eine Browsererweiterung, die eine click-Event-Listener auf jeder Seite, die Sie besuchen. Sie wurden in den click der Erweiterung pausiert Listener. Wenn Sie den Inkognitomodus zum privaten Surfen verwenden, bei dem alle Erweiterungen deaktiviert werden, sehen Sie, dass Sie jedes Mal bei der richtigen Codezeile pausieren.

Ereignis-Listener-Haltepunkte sind nur eine von vielen Arten von Haltepunkten, die in den Entwicklertools verfügbar sind. Es ist Es lohnt sich, die verschiedenen Typen zu untersuchen, da jeder Typ letztendlich dazu beiträgt, Szenarien so schnell wie möglich. Unter Code mit Haltepunkten pausieren erfahren Sie, wann und wie Sie verwenden Sie die einzelnen Typen.

Den Code durchgehen

Eine häufige Ursache für Fehler sind Skripte, die in der falschen Reihenfolge ausgeführt werden. Ihren Code durchgehen können Sie die Ausführung Ihres Codes Zeile für Zeile durchgehen und herausfinden, in einer anderen Reihenfolge als erwartet ausgeführt wird. Jetzt ausprobieren:

1. Klicken Sie in den Entwicklertools im Bereich Quellen auf step_into Step In next Funktionsaufruf, um die Ausführung der onClick()-Funktion Zeile für Zeile durchzugehen. In Entwicklertools wird die folgende Codezeile hervorgehoben:

   if (inputsAreEmpty()) {
   

2. Klicken Sie auf step_over Schritt zum nächsten Funktionsaufruf.

   Die Entwicklertools führen inputsAreEmpty() aus, ohne in das Skript zu wechseln. Beachten Sie, dass in den Entwicklertools einige Zeilen Code. Das liegt daran, dass inputsAreEmpty() als „false“ ausgewertet wurde, also der Block der if-Anweisung nicht ausgeführt wurde.

Das ist die Grundidee beim Durchlaufen von Code. Wenn Sie sich den Code in get-started.js ansehen, dass der Fehler irgendwo in der updateLabel()-Funktion liegt. Anstatt sich durch die jede Codezeile können Sie einen anderen Haltepunkt verwenden, um den Code näher am wahrscheinlichsten wo der Fehler aufgetreten ist.

Haltepunkt für Codezeile festlegen

Codezeilen-Haltepunkte sind die häufigste Art von Haltepunkten. Wenn Sie eine bestimmte Zeile Code, bei dem eine Pause erfolgen soll, verwenden Sie einen Haltepunkt in einer 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 dieser Codezeile. 32 Klicken Sie auf 32. In den Entwicklertools wird ein blaues Symbol über 32 angezeigt. Das bedeutet, dass es eine Codezeile in diese Zeile ein. Die Entwicklertools pausiert jetzt immer, bevor diese Codezeile ausgeführt haben.

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

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

Variablenwerte prüfen

Die Werte von addend1, addend2 und sum sehen verdächtig aus. Sie sind in Anführungszeichen gesetzt, bedeutet, dass es sich um Zeichenfolgen 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, um Variablen zu untersuchen, Werte.

Methode 1: Umfang prüfen

Wenn Sie eine Codezeile pausiert haben, sehen Sie auf dem Tab Umfang, welche lokalen und globalen Variablen werden an diesem Punkt der Ausführung zusammen mit dem Wert jeder Variablen definiert. Es zeigt auch Schließvariablen an, zutreffend sind. Wenn eine Codezeile nicht pausiert ist, ist der Tab Umfang leer.

Doppelklicken Sie auf einen Variablenwert, um ihn zu bearbeiten.

Hinweis :Je nach Layouteinstellung und der Breite des Entwicklertools-Fensters kann der Tab Umfang zusammen mit Haltepunkten und Aufrufstapel als minimierbarer Bereich angezeigt werden.

Methode 2: Watch-Ausdrücke

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

Hinweis :Je nach Layouteinstellung und der Breite des Entwicklertools-Fensters kann der Tab Ansehen zusammen mit Haltepunkten und Aufrufstapel als minimierbarer Bereich angezeigt werden.

Jetzt ausprobieren:

1. Klicke auf den Tab Ansehen.
2. Klicken Sie auf add 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 neben dem Doppelpunkt steht für Ergebnis des Ausdrucks.

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

Wie erwartet wird sum als String ausgewertet, obwohl es eine Zahl sein sollte. Sie haben bestätigt, dass dies die Ursache des Fehlers ist.

Methode 3: Die Konsole

Neben dem Anzeigen von console.log()-Nachrichten können Sie mit der Console auch beliebige Nachrichten auswerten. JavaScript-Anweisungen. In Bezug auf das Debugging können Sie die Console verwenden, um mögliche Korrekturen zu testen. auf Fehler. Jetzt ausprobieren:

1. Sollte die Konsolenleiste nicht geöffnet sein, drücken Sie Esc, um sie zu öffnen. Sie wird unten im das Entwicklertools-Fenster.
2. Geben Sie in der Konsole parseInt(addend1) + parseInt(addend2) ein. Diese Anweisung funktioniert, weil Sie werden bei einer Codezeile pausiert, in der addend1 und addend2 infrage kommen.
3. Drücken Sie die Eingabetaste. Die Entwicklertools wertet die Anweisung aus und geben 6 aus. Das ist das erwartete Ergebnis. zu erstellen.

Dieser Screenshot zeigt die Leiste Console nach der Auswertung von parseInt(addend1) + parseInt(addend2).

Korrektur anwenden

Sie haben eine Fehlerkorrektur 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 Entwicklertools nicht verlassen, um die Korrektur anzuwenden. Sie können JavaScript-Code bearbeiten. direkt auf der Entwicklertools-UI. 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. Ihre Farbe wechselt zu Blau, um anzuzeigen, dass sie aktiv ist. Solange diese festgelegt ist, ignoriert die Entwicklertools alle Haltepunkte, die Sie festgelegt haben.
5. Probieren Sie die Demo mit anderen Werten aus. Die Demo wird jetzt korrekt berechnet.

Achtung:Bei diesem Workflow wird nur eine Korrektur für den Code vorgenommen, der in Ihrem Browser ausgeführt wird. Es wird nicht den Code für alle Nutzer zu korrigieren, die Ihre Seite besuchen. Dazu musst du den Code auf deinem Server. Sie können jedoch Dateien in den Entwicklertools bearbeiten und mit Arbeitsbereichen in Ihren Quellen speichern.

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

Nächste Schritte

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

In dieser Anleitung wurden nur zwei Möglichkeiten zum Festlegen von Haltepunkten vorgestellt. Die Entwicklertools bieten viele weitere Möglichkeiten, einschließlich:

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

Unter Code mit Haltepunkten pausieren erfahren Sie, wann und wie die einzelnen Typen verwendet werden.

Es gibt einige Steuerelemente für Codeschritte, die in dieser Anleitung nicht erläutert wurden. Weitere Informationen finden Sie unter Step Over. , um mehr zu erfahren.