Erste Schritte beim Debuggen von JavaScript

In diesem Artikel erfahren Sie den grundlegenden Workflow zum Debuggen von JavaScript-Issues mithilfe von DevTools.

Schritt 1: Reproduzieren des Fehlers

Der erste Schritt beim Debuggen besteht darin, eine Sequenz von Aktionen zu finden, die einen Fehler konsistent reproduzieren.

1. Öffnen Sie die Demo-Webseite Erste Schritte Debuggen von JavaScript in einem neuen Fenster oder einer neuen Registerkarte. Klicken Sie zum Öffnen der Webseite mit der rechten Maustaste auf den Link, und wählen Sie im Popupfenster "Link in neuer Registerkarte öffnen" oder "Link in neuem Fenster öffnen" aus. Alternativ können Sie STRG (für Windows, Linux) oder Befehl (für macOS) gedrückt halten und dann auf den Link klicken.

   Tipp: Öffnen Sie Microsoft Edge im InPrivate-Modus, um sicherzustellen, dass Microsoft Edge in einem sauber Zustand ausgeführt wird. Weitere Informationen finden Sie unter Durchsuchen von InPrivate in Microsoft Edge.

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

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

4. Klicken Sie auf Zahl 1 und Zahl 2 hinzufügen. Die Bezeichnung unterhalb der Schaltfläche sagt 5 + 1 = 51 anstelle des erwarteten Ergebnisses von 6:

   

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

DevTools bietet mehrere Tools für verschiedene Aufgaben. Zu diesen Aufgaben gehören das Ändern von CSS, die Profilerstellung für die Seitenladeleistung und das Überwachen von Netzwerkanforderungen. Im Tool Quellen können Sie JavaScript debuggen.

1. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet:

   

2. Wählen Sie das Tool Quellen aus. Wählen Sie die Registerkarte Seite und dann die JavaScript-Datei aus get-started.js:

   

Die Benutzeroberfläche des Quellentools umfasst drei Teile:

• Der Bereich Navigator (in der oberen linken Ecke). Jede Datei, die die Webseite anfordert, wird hier aufgeführt.

• Der bereich Editor (in der oberen rechten Ecke). Nachdem Sie im Bereich Navigator eine Datei ausgewählt haben, wird in diesem Bereich der Inhalt der Datei angezeigt.

• Der Debuggerbereich (unten). Dieser Bereich enthält Tools zum Überprüfen von JavaScript für die Webseite. Wenn Ihr DevTools-Fenster breit ist, wird dieser Bereich rechts neben dem bereich Editor angezeigt.

Schritt 3: Anhalten des Codes mit einem Haltepunkt

Eine gängige Methode zum Debuggen dieser Art von Problem besteht darin, mehrere console.log() -Anweisungen in den Code einzufügen und dann Werte zu überprüfen, während das Skript ausgeführt wird. Zum 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;
}

Die console.log() -Methode kann den Auftrag erledigen, aber Breakpoints erledigen dies schneller. Mit einem Haltepunkt können Sie Ihren Code in der Mitte der Laufzeit anhalten und alle Werte zu diesem Zeitpunkt untersuchen. Haltepunkte haben die folgenden Vorteile gegenüber der console.log() -Methode.

• Mit console.log()müssen Sie den Quellcode manuell öffnen, den relevanten Code suchen, die console.log() Anweisungen einfügen und dann die Webseite aktualisieren, um die Meldungen in der Konsole anzuzeigen. Mit Haltepunkten können Sie den relevanten Code anhalten, ohne wissen zu müssen, 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 werden Variablen, die sich auf Ihren Code auswirken, ausgeblendet und verschleiert.

Kurz gesagt, Breakpoints können Ihnen helfen, Fehler schneller zu finden und zu beheben als die console.log() -Methode.

Breakpoints für Ereignislistener

Wenn Sie einen Schritt zurücktreten und darüber nachdenken, wie die App funktioniert, können Sie eine fundierte Vermutung treffen, dass die falsche Summe (5 + 1 = 51) im Ereignislistener berechnet wird, der click der Schaltfläche Nummer 1 und Nummer 2 hinzufügen zugeordnet ist. Daher möchten Sie den Code wahrscheinlich während der Ausführung des click Listeners anhalten. Mit Ereignislistener-Haltepunkten können Sie folgendes tun:

1. Im Bereich(index) Navigator ist standardmäßig ausgewählt. Klicken Sie auf get-started.js.

2. Klicken Sie im Debuggerbereich auf Ereignislistenerhaltepunkte , um den Abschnitt zu erweitern. DevTools zeigt eine Liste von Ereigniskategorien an, z. B. Animation und Zwischenablage.

3. Klicken Sie auf Erweitern (), indem Sie das Mausereignis öffnen, um diese Kategorie zu öffnen. DevTools zeigt eine Liste von Mausereignissen wie Click und Mousedown an. Neben jedem Ereignis befindet sich ein Kontrollkästchen.

4. Aktivieren Sie das Kontrollkästchen neben folgendem Klicken:

   

   DevTools ist jetzt so eingerichtet, dass automatisch angehalten wird, wenn ein click Ereignislistener ausgeführt wird.

5. Klicken Sie auf der gerenderten Demo-Webseite erneut auf die Schaltfläche Nummer 1 und Zahl 2 hinzufügen . DevTools hält die Demo an und hebt eine Codezeile im Quellentool hervor . DevTools hält in Zeile 16 in get-started.jsan, wie im nächsten Codeausschnitt gezeigt:

   if (inputsAreEmpty()) {
   

   Wenn Sie in einer anderen Codezeile anhalten, klicken Sie auf Skriptausführung fortsetzen (), bis Sie in der richtigen Zeile anhalten.

   Hinweis

   Wenn Sie in einer anderen Zeile angehalten haben, verfügen Sie über eine Browsererweiterung, die einen click Ereignislistener auf jeder webseite registriert, die Sie besuchen. Sie werden im click Listener der Erweiterung angehalten. Wenn Sie den InPrivate-Modus verwenden, um im privaten Modus zu navigieren, wodurch alle Erweiterungen deaktiviert werden, sehen Sie möglicherweise, dass Sie jedes Mal in der gewünschten Codezeile anhalten.

Ereignislistener-Breakpoints sind nur einer von vielen Arten von Haltepunkten, die in DevTools verfügbar sind. Merken Sie sich alle verschiedenen Typen, damit Sie verschiedene Szenarien so schnell wie möglich debuggen können. Informationen dazu, wann und wie Die einzelnen Typen verwendet werden, finden Sie unter Anhalten des Codes mit Haltepunkten.

Schritt 4: Schrittweises Durchlaufen des Codes

Eine häufige Ursache für Fehler ist, wenn ein Skript in der falschen Reihenfolge ausgeführt wird. Wenn Sie Ihren Code schrittweise durchlaufen, können Sie die Laufzeit Ihres Codes durchlaufen. Sie durchlaufen eine Zeile nach der anderen, um herauszufinden, wo Ihr Code in einer anderen Reihenfolge als erwartet ausgeführt wird. Probieren Sie es jetzt aus:

1. Klicken Sie auf Step over next function call (( DevTools führt den folgenden Code aus, ohne ihn schrittweise zu durchlaufen:

   if (inputsAreEmpty()) {
   

   DevTools überspringt einige Codezeilen, da inputsAreEmpty() als falseausgewertet wird, sodass der Codeblock für die if Anweisung nicht ausgeführt wird.

2. Klicken Sie im Quellentool von DevTools auf Schritt zum nächsten Funktionsaufruf (), um die Laufzeit der updateLabel() Funktion Zeilen für Zeile zu durchlaufen.

Das ist die Grundidee des schrittweisen Durchlaufens von Code. Wenn Sie sich den Code in get-started.jsansehen, können Sie sehen, dass sich der Fehler wahrscheinlich irgendwo in der updateLabel() Funktion befindet. Anstatt jede Codezeile schrittweise zu durchlaufen, können Sie einen anderen Typ von Haltepunkt (einen Zeilenhaltepunkt) verwenden, um den Code näher an der wahrscheinlichen Position des Fehlers anzuhalten.

Schritt 5: Festlegen eines Zeilenhaltepunkts

Zeilenzeilenhaltepunkte sind die häufigste Art von Haltepunkt. Wenn Sie zu der codespezifischen Zeile gelangen, die Sie anhalten möchten, verwenden Sie einen Breakpoint für die Codezeile.

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

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

2. Die Zeilennummer für label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; ist 34. Klicken Sie auf Zeile 34. DevTools zeigt links von 34 einen roten Kreis an. Der rote Kreis gibt an, dass sich in dieser Zeile ein Zeilenhaltepunkt befindet. DevTools hält immer an, bevor diese Codezeile ausgeführt wird.

3. Klicken Sie auf die Schaltfläche Skriptausführung fortsetzen ():

   

   Das Skript wird weiterhin ausgeführt, bis es Zeile 34 erreicht. In den Zeilen 31, 32 und 33 druckt DevTools die Werte jeder Variablen rechts neben dem Semikolon in jeder Zeile aus. Diese Werte sind:

   • addend1 = "5"
   • addend2 = "1"
   • sum = "51"

Schritt 6: Überprüfen von Variablenwerten

Die Werte von addend1, addend2und sum sehen verdächtig aus. Diese Werte werden in Anführungszeichen eingeschlossen, was bedeutet, dass jeder Wert eine Zeichenfolge ist. Dies ist ein guter Hinweis auf die Ursache des Fehlers. Der nächste Schritt besteht darin, weitere Informationen zu diesen Variablenwerten zu sammeln. DevTools bietet verschiedene Möglichkeiten zum Untersuchen von Variablenwerten.

Überprüfen von Variablenwerten im Bereichsbereich

Wenn Sie in einer Codezeile anhalten, werden im Bereichsbereich die derzeit definierten lokalen und globalen Variablen zusammen mit dem Wert jeder Variablen angezeigt:

Im Bereich werden ggf. auch Abschlussvariablen angezeigt. Wenn Sie einen Variablenwert bearbeiten möchten, doppelklicken Sie im Bereich auf den Wert. Wenn Sie nicht in einer Codezeile anhalten, ist der Bereich Bereich leer.

Untersuchen von Variablenwerten über Überwachungsausdrücke

Im Bereich Überwachen können Sie die Werte von Variablen (z sum. B. ) oder Ausdrücken (z typeof sum. B. ) überwachen. Sie können jeden gültigen JavaScript-Ausdruck in einem watch-Ausdruck speichern.

1. Wählen Sie die Registerkarte Überwachen aus.

2. Klicken Sie auf Watch Ausdruck hinzufügen ().

3. Geben Sie den ausdruck watch eintypeof sum, und drücken Sie dann die EINGABETASTE:

Im Bereich Überwachen wird angezeigt typeof sum: "string". Der Wert rechts neben dem Doppelpunkt ist das Ergebnis des watch Ausdrucks. Der Fehler ist darauf zurückzuführen, sum dass er als Zeichenfolge ausgewertet wird, wenn es eine Zahl sein sollte.

Wenn Ihr DevTools-Fenster breit ist, wird der Bereich Überwachen im Debuggerbereich angezeigt, der dann auf der rechten Seite angezeigt wird.

Überprüfen von Variablenwerten über die Konsole

In der Konsole können Sie die Ausgabe anzeigen console.log() . Sie können auch die Konsole verwenden, um beliebige JavaScript-Anweisungen auszuwerten, während der Debugger bei einer Code-Anweisung angehalten wird. Zum Debuggen können Sie die Konsole verwenden, um potenzielle Fehlerbehebungen für Fehler zu testen.

1. Wenn das Konsolentool geschlossen ist, drücken Sie ESC , um es zu öffnen. Das Konsolentool wird im unteren Bereich des Fensters DevTools geöffnet.

2. Geben Sie in der Konsole den Ausdruck parseInt(addend1) + parseInt(addend2)ein. Der Ausdruck wird für den aktuellen Bereich ausgewertet, da der Debugger in einer Codezeile angehalten wird, in der addend1 sich und addend2 im Bereich befinden.

3. Drücken Sie die EINGABETASTE. DevTools wertet die -Anweisung aus und gibt in der Konsole aus. Dies 6 ist das richtige Ergebnis, das von der Demo erwartet wird:

   

Schritt 7: Anwenden einer Korrektur auf den zurückgegebenen Code und dann auf Ihren tatsächlichen Quellcode

Wir haben eine mögliche Fehlerbehebung für den Fehler identifiziert. Bearbeiten Sie als Nächstes den JavaScript-Code direkt in der DevTools-Benutzeroberfläche, und führen Sie dann die Demo erneut aus, um die Korrektur wie folgt zu testen:

1. Klicken Sie auf Skriptausführung fortsetzen ().

2. Ersetzen Sie im bereich Editor die Zeile var sum = addend1 + addend2 durch var sum = parseInt(addend1) + parseInt(addend2).

3. Drücken Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS), um Ihre Änderung zu speichern.

4. Klicken Sie auf Breakpoints deaktivieren (). Das Symbol des Haltepunkts ändert sich in grau, um anzugeben, dass der Haltepunkt inaktiv ist. Während Breakpoints deaktivieren festgelegt ist, ignoriert DevTools alle von Ihnen festgelegten Haltepunkte. Auf der Demo-Webseite wird nun der richtige Wert angezeigt:

   

5. Probieren Sie die Demo mit unterschiedlichen Werten aus. Die Demo wird nun richtig berechnet.

6. Wenn Sie Ihr eigenes Projekt debuggen, nachdem Sie den Fix identifiziert haben, korrigieren Sie den tatsächlichen Quellcode auf dem Server, z. B. indem Sie Ihren lokalen Quellcode bearbeiten und dann Ihren festen Code erneut auf dem Server bereitstellen. In den vorherigen Schritten wird nur eine Korrektur auf eine temporäre lokale Kopie des Codes angewendet, der vom Server gesendet wird.

Nächste Schritte

Herzlichen Glückwunsch! Sie wissen jetzt, wie Sie Microsoft Edge DevTools beim Debuggen von JavaScript optimal nutzen können. Die Tools und Methoden, die Sie in diesem Artikel gelernt haben, können Ihnen unzählige Stunden sparen.

In diesem Artikel wurden zwei Möglichkeiten zum Festlegen von Haltepunkten erläutert. DevTools bietet auch Möglichkeiten, Haltepunkte festzulegen, um Ihren Code anzuhalten, wenn bestimmte Bedingungen erfüllt sind, z. B.:

• Bedingte Haltepunkte, die nur ausgelöst werden, wenn die von Ihnen bereitgestellte Bedingung erfüllt 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.

Weitere Informationen dazu, wann und wie die einzelnen Breakpointtypen verwendet werden, finden Sie unter Anhalten des Codes mit Haltepunkten.

Weitere Informationen zu den Debuggerschaltflächen zum Schrittweisen Durchlaufen von Code finden Sie unter Schrittweises Ausführen von Codezeilen in "JavaScript-Debugfeatures".

Weitere Informationen

• JavaScript-Debugfeatures : Verwenden der Benutzeroberfläche des Debuggers im Quellentool.
• Übersicht über das Quellentool : Stellt den JavaScript-Debugger und den Code-Editor vor.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.