Dieses Tutorial zeigt Ihnen den grundlegenden Workflow zum Debuggen von JavaScript-Problemen in DevTools. Lesen Sie weiter oder sehen Sie sich die Videoversion dieses Tutorials unten an.

# Schritt 1: Reproduzieren des Fehlers

Das Finden einer Reihe von Aktionen, die einen Fehler konsistent reproduzieren, ist immer der erste Schritt zum Debuggen.

1. Klicken Sie auf Demo öffnen. Die Demo öffnet sich in einem neuen Tab.

   Demo öffnen

2. Geben Sie 5 in das Textfeld Nummer 1 ein.

3. Geben Sie 1 in das Textfeld Nummer 2 ein.

4. Klicken Sie auf Nummer 1 und Nummer 2 hinzufügen. Das Etikett unter der Schaltfläche lautet 5 + 1 = 51. Das Ergebnis sollte 6 sein. Dies ist der Fehler, den Sie beheben werden.

   

   Abbildung 1. Das Ergebnis von 5 + 1 ist 51. Es sollte 6 sein.

# Schritt 2: Machen Sie sich mit der Benutzeroberfläche des Quellenfelds vertraut

DevTools bietet viele verschiedene Tools für verschiedene Aufgaben, z. B. das Ändern von CSS, das Profilieren der Seitenladegeschwindigkeit und das Überwachen von Netzwerkanforderungen. Das Quellen-Panel ist, wo Sie JavaScript debuggen.

1. Öffnen Sie DevTools, indem Sie Befehl + Wahl + I (Mac) oder Strg + Umschalt + I (Windows, Linux) drücken. Diese Verknüpfung öffnet das Konsolenfenster.

   

   Abbildung 2. Die Konsole panel

2. Klicken Sie auf die Registerkarte Quellen.

   

   Abbildung 3. Das Quellen-Panel

Die Benutzeroberfläche des Quellenfelds besteht aus 3 Teilen:

Abbildung 4. Die 3 Teile des Quellenfelds sind

1. Der Dateinavigatorbereich. Jede Datei, die die Seite anfordert, wird hier aufgelistet.
2. Der Bereich Code-Editor. Nach Auswahl einer Datei im Bereich Dateinavigator wird hier der Inhalt dieser Datei angezeigt.
3. Der JavaScript-Debugging-Bereich. Verschiedene Tools zum Überprüfen des JavaScript der Seite. Wenn Ihr DevTools-Fenster breit ist, wird dieser Bereich rechts neben dem Codeeditorbereich angezeigt.

# Schritt 3: Pausieren Sie den Code mit einem Haltepunkt

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

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;
}

Die console.log() -Methode kann den Job erledigen, aber Haltepunkte können ihn schneller erledigen. Mit einem Haltepunkt können Sie Ihren Code mitten in der Ausführung anhalten und alle Werte zu diesem Zeitpunkt untersuchen. Haltepunkte haben einige Vorteile gegenüber der console.log() -Methode:

• Bei console.log() müssen Sie den Quellcode manuell öffnen, den entsprechenden Code suchen, die console.log() -Anweisungen einfügen und dann die Seite neu laden, um die Nachrichten in der Konsole anzuzeigen. Mit Haltepunkten können Sie den relevanten Code anhalten, ohne zu wissen, wie der Code strukturiert ist.
• In Ihren console.log() -Anweisungen müssen Sie explizit jeden Wert angeben, den Sie überprüfen möchten. Mit Haltepunkten zeigt DevTools Ihnen die Werte aller Variablen zu diesem Zeitpunkt an. Manchmal gibt es Variablen, die Ihren Code beeinflussen und die Sie nicht einmal kennen.

Kurz gesagt, Breakpoints können Ihnen helfen, Fehler schneller zu finden und zu beheben als die 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 Ereignis-Listener berechnet wird, der der Schaltfläche Add Number 1 und Number 2 zugeordnet ist. Daher möchten Sie den Code wahrscheinlich zu dem Zeitpunkt anhalten, zu 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 erweitern. DevTools zeigt eine Liste erweiterbarer Ereigniskategorien wie Animation und Zwischenablage an.

2. Klicken Sie neben der Kategorie Mausereignis auf Erweitern . DevTools zeigt eine Liste von Mausereignissen wie click und Mousedown . Jedes Ereignis hat ein Kontrollkästchen daneben.

3. Aktivieren Sie das Kontrollkästchen klicken. DevTools ist jetzt so eingerichtet, dass es automatisch angehalten wird, wenn ein click -Ereignis-Listener ausgeführt wird.

   

   Abbildung 5. Das Kontrollkästchen Klicken ist aktiviert

4. Klicken Sie in der Demo erneut auf Nummer 1 und Nummer 2 hinzufügen. DevTools pausiert die Demo und hebt eine Codezeile im Quellenbedienfeld hervor. DevTools sollte in dieser Codezeile angehalten werden:

   function onClick() {

   Wenn Sie in einer anderen Codezeile angehalten werden, drücken Sie die Taste Skriptausführung fortsetzen , bis Sie in der richtigen Zeile angehalten sind.

   Hinweis: Wenn Sie in einer anderen Zeile angehalten haben, verfügen Sie über eine Browsererweiterung, die auf jeder von Ihnen besuchten Seite einen click -Ereignis-Listener registriert. Sie wurden im Listener click der Erweiterung angehalten. Wenn Sie den Inkognito-Modus verwenden, um privat zu surfen, wodurch alle Erweiterungen deaktiviert werden, können Sie sehen, dass Sie jedes Mal in der richtigen Codezeile pausieren.

Ereignis-Listener-Haltepunkte sind nur eine von vielen Arten von Haltepunkten, die in DevTools verfügbar sind. Es lohnt sich, sich die verschiedenen Typen zu merken, da jeder Typ Ihnen letztendlich hilft, verschiedene Szenarien so schnell wie möglich zu debuggen. Unter Anhalten des Codes mit Haltepunkten erfahren Sie, wann und wie die einzelnen Typen verwendet werden.

# Schritt 4: Schritt durch den Code

Eine häufige Ursache für Fehler ist, wenn ein Skript in der falschen Reihenfolge ausgeführt wird. Wenn Sie durch Ihren Code gehen, können Sie die Ausführung Ihres Codes zeilenweise durchlaufen und genau herausfinden, wo er in einer anderen Reihenfolge ausgeführt wird als erwartet. Probieren Sie es jetzt aus:

1. Klicken Sie im Sources-Bereich von DevTools auf Step into next function call , um die Ausführung der onClick() -Funktion zeilenweise zu durchlaufen. DevTools hebt die folgende Codezeile hervor:

   if (inputsAreEmpty()) {

2. Klicken Sie auf Schritt über nächsten Funktionsaufruf . DevTools führt inputsAreEmpty() aus, ohne darauf einzugehen. Beachten Sie, wie DevTools einige Codezeilen überspringt. Dies liegt daran, dass inputsAreEmpty() als false ausgewertet wurde, sodass der Codeblock der Anweisung if nicht ausgeführt wurde.

Das ist die Grundidee des Durchschreitens von Code. Wenn Sie sich den Code in get-started.js ansehen, können Sie sehen, dass der Fehler wahrscheinlich irgendwo in der Funktion updateLabel() liegt. Anstatt jede Codezeile durchzugehen, können Sie eine andere Art von Haltepunkt verwenden, um den Code näher am wahrscheinlichen Ort des Fehlers anzuhalten.

# Schritt 5: Festlegen eines Codezeilenhaltepunkts

Codezeilenhaltepunkte sind die häufigste Art von Haltepunkten. Wenn Sie eine bestimmte Codezeile haben, die Sie anhalten möchten, verwenden Sie einen Codezeilen-Haltepunkt:

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

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

2. Links neben dem Code sehen Sie die Zeilennummer dieser bestimmten Codezeile, nämlich 32. Klicken Sie auf 32. DevTools setzt ein blaues Symbol auf 32. Dies bedeutet, dass sich in dieser Zeile ein Codezeilen-Haltepunkt befindet. DevTools pausiert jetzt immer, 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 druckt DevTools die Werte addend1, addend2 und sum rechts vom Semikolon jeder Zeile aus.

   

   Abbildung 6. DevTools pausiert am Codezeilen-Haltepunkt in der Zeile 32

# Schritt 6: Überprüfen Sie die Variablenwerte

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

# Methode 1: Bereichsbereich

Wenn Sie eine Codezeile pausieren, zeigt Ihnen der Bereichsbereich, welche lokalen und globalen Variablen derzeit definiert sind, zusammen mit dem Wert jeder Variablen. Es zeigt auch Schließungsvariablen, falls zutreffend. Doppelklicken Sie auf einen Variablenwert, um ihn zu bearbeiten. Wenn Sie eine Codezeile nicht pausieren, ist der Bereichsbereich leer.

Abbildung 7. Bereichsbereich

# Methode 2: Watch Expressions

Auf der Registerkarte Watch Expressions 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. Probieren Sie es jetzt aus:

1. Klicken Sie auf die Registerkarte Beobachten.

2. Klicken Sie auf Ausdruck hinzufügen .

3. Geben Sie typeof sum ein.

4. Drücken Sie die Eingabetaste. DevTools zeigt typeof sum: "string" . Der Wert rechts vom Doppelpunkt ist das Ergebnis Ihres Watch-Ausdrucks.

   

   Abbildung 8. Der Bereich Watch Expression (unten rechts) nach dem Erstellen des typeof sum Watch-Ausdrucks. Wenn Ihr DevTools-Fenster groß ist, befindet sich der Bereich Watch Expression rechts über dem Bereich Event Listener Breakpoints.

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

# Methode 3: Die Konsole

Zusätzlich zum Anzeigen von console.log() -Nachrichten können Sie die Konsole auch zum Auswerten beliebiger JavaScript-Anweisungen verwenden. In Bezug auf das Debuggen können Sie die Konsole verwenden, um mögliche Fehlerbehebungen zu testen. Probieren Sie es jetzt aus:

1. Wenn Sie die Konsolenschublade nicht geöffnet haben, drücken Sie Escape, um sie zu öffnen. Es öffnet sich am unteren Rand Ihres DevTools-Fensters.

2. Geben Sie in der Konsole parseInt(addend1) + parseInt(addend2) ein. Diese Anweisung funktioniert, weil Sie in einer Codezeile angehalten werden, in der sich addend1 und addend2 im Gültigkeitsbereich befinden.

3. Drücken Sie die Eingabetaste. DevTools wertet die Anweisung aus und gibt 6 aus, das Ergebnis, das Sie von der Demo erwarten.

   

   Abbildung 9. Die Konsolenschublade nach Auswertung von parseInt(addend1) + parseInt(addend2).

# Schritt 7: Fix anwenden

Sie haben einen Fix für den Fehler gefunden. Sie müssen nur noch Ihren Fix ausprobieren, indem Sie den Code bearbeiten und die Demo erneut ausführen. Sie müssen DevTools nicht verlassen, um den Fix anzuwenden. Sie können JavaScript-Code direkt in der DevTools-Benutzeroberfläche bearbeiten. Probieren Sie es jetzt aus:

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 Ihre Änderung zu speichern.
4. Klicken Sie auf Haltepunkte deaktivieren . Es ändert sich blau, um anzuzeigen, dass es aktiv ist. Während dies festgelegt ist, ignoriert DevTools alle von Ihnen festgelegten Haltepunkte.
5. Probieren Sie die Demo mit verschiedenen Werten aus. Die Demo berechnet nun korrekt.

Herzlichen Glückwunsch! Sie wissen jetzt, wie Sie Chrome DevTools beim Debuggen von JavaScript optimal nutzen können. Die Werkzeuge und Methoden, die Sie in diesem Tutorial gelernt können Sie unzählige Stunden sparen.

Dieses Tutorial zeigte Ihnen nur zwei Möglichkeiten, Haltepunkte zu setzen. DevTools bietet viele andere Möglichkeiten, darunter:

• Bedingte Haltepunkte, die nur ausgelöst werden, wenn die von Ihnen angegebene Bedingung wahr ist.
• Haltepunkte für abgefangene oder nicht abgefangene Ausnahmen.
• XHR-Haltepunkte, die ausgelöst werden, wenn die angeforderte URL mit einer von Ihnen angegebenen Teilzeichenfolge übereinstimmt.

Unter Anhalten des Codes mit Haltepunkten erfahren Sie, wann und wie die einzelnen Typen verwendet werden.

Es gibt ein paar Code-Stepping-Steuerelemente, die in diesem Tutorial nicht erläutert wurden. Siehe Schritt über Codezeile, um mehr zu erfahren.