JavaScript-Debugging-Referenz

Kayce Basques

Sofia Emelianova

In dieser umfassenden Referenz zu den Chrome-Entwicklertools erfahren Sie mehr über neue Funktionen zum Entfernen von Fehlern.

Einstieg in das JavaScript-Debugging in den Chrome-Entwicklertools

Code mit Haltepunkten pausieren

Legen Sie einen Haltepunkt fest, damit Sie den Code während der Ausführung pausieren können. Informationen zum Festlegen von Haltepunkten finden Sie unter Code mithilfe von Haltepunkten pausieren.

Werte bei pausierter Wiedergabe prüfen

Während die Ausführung pausiert ist, wertet der Debugger alle Variablen, Konstanten und Objekte innerhalb der aktuellen Funktion bis zu einem Haltepunkt aus. Im Debugger werden die aktuellen Werte neben den entsprechenden Deklarationen inline angezeigt.

In der Konsole können Sie die ausgewerteten Variablen, Konstanten und Objekte abfragen.

Vorschau der Klassen-/Funktionseigenschaften beim Bewegen des Mauszeigers

Bewegen Sie den Mauszeiger während der pausierten Ausführung auf einen Klassen- oder Funktionsnamen, um eine Vorschau der Eigenschaften zu sehen.

Code Schritt für Schritt durchgehen

Nachdem der Code pausiert wurde, gehen Sie ihn Ausdruck für Ausdruck durch und prüfen Sie dabei den Kontrollfluss und die Eigenschaftenwerte.

Codezeile überspringen

Wenn Sie bei einer Codezeile angehalten sind, die eine Funktion enthält, die für das Problem, das Sie beheben, nicht relevant ist, klicken Sie auf Überspringen , um die Funktion auszuführen, ohne sie aufzurufen.

Angenommen, Sie führen das Debuggen des folgenden Codes durch:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

Sie sind am A pausiert. Wenn Sie auf Überspringen klicken, führt DevTools den gesamten Code in der Funktion aus, die Sie überspringen, also B und C. Die Entwicklertools werden dann bei D pausiert.

In eine Codezeile einsteigen

Wenn Sie bei einer Codezeile angehalten sind, die einen Funktionsaufruf enthält, der mit dem Problem zusammenhängt, das Sie beheben möchten, klicken Sie auf Step into (Einstiegspunkt), um diese Funktion genauer zu untersuchen.

Angenommen, Sie führen einen Debug-Vorgang für den folgenden Code durch:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

Sie sind am A pausiert. Wenn Sie auf Step into (In Code einsteigen) klicken, wird diese Codezeile in den Entwicklertools ausgeführt und dann bei B angehalten.

Codezeile verlassen

Wenn Sie in einer Funktion angehalten sind, die nicht mit dem Problem zusammenhängt, das Sie beheben, klicken Sie auf Schritt ausführen , um den Rest des Funktionscodes auszuführen.

Angenommen, Sie führen das Debuggen des folgenden Codes durch:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

Sie sind am A pausiert. Wenn Sie auf Aus Schritten klicken, führt DevTools den Rest des Codes in getName() aus, was in diesem Beispiel nur B ist, und hält dann bei C an.

Den gesamten Code bis zu einer bestimmten Zeile ausführen

Beim Debuggen einer langen Funktion gibt es möglicherweise viel Code, der nicht mit dem Problem zusammenhängt, das Sie beheben möchten.

Sie könnten alle Zeilen durchgehen, aber das kann mühsam sein. Sie könnten einen Codezeilen-Bruchpunkt in der gewünschten Zeile setzen und dann auf Script-Ausführung fortsetzen drücken. Es gibt aber eine schnellere Methode.

Klicken Sie mit der rechten Maustaste auf die gewünschte Codezeile und wählen Sie Continue to here (Hier weiter) aus. In den DevTools wird der gesamte Code bis zu diesem Punkt ausgeführt und dann an dieser Zeile pausiert.

Skriptausführung fortsetzen

Wenn Sie die Ausführung des Scripts nach einer Pause fortsetzen möchten, klicken Sie auf Skriptausführung fortsetzen . In den DevTools wird das Script bis zum nächsten Haltepunkt (falls vorhanden) ausgeführt.

Skriptausführung erzwingen

Wenn Sie alle Haltestellen ignorieren und die Ausführung des Scripts erzwingen möchten, halten Sie die Option Scriptausführung fortsetzen gedrückt und wählen Sie dann Scriptausführung erzwingen aus.

Konversationskontext ändern

Wenn Sie mit Webworkern oder Dienstworkern arbeiten, klicken Sie auf einen Kontext, der im Bereich Threads aufgeführt ist, um zu diesem Kontext zu wechseln. Das blaue Pfeilsymbol gibt an, welcher Kontext aktuell ausgewählt ist.

Im Screenshot oben ist der Bereich Unterhaltungen blau umrandet.

Angenommen, Sie haben sowohl in Ihrem Hauptscript als auch in Ihrem Service Worker-Script einen Haltepunkt gesetzt. Sie möchten sich die lokalen und globalen Eigenschaften für den Service Worker-Kontext ansehen, aber im Bereich „Quellen“ wird der Haupt-Script-Kontext angezeigt. Wenn Sie im Bereich „Threads“ auf den Eintrag für den Dienst-Worker klicken, können Sie zu diesem Kontext wechseln.

Durch Kommas getrennte Ausdrücke durchgehen

Wenn Sie durch kommagetrennte Ausdrücke gehen, können Sie minimierten Code debuggen. Beispiel:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

Im minimierten Zustand enthält er einen durch Kommas getrennten foo(),foo(),42-Ausdruck:

function foo(){}function bar(){return foo(),foo(),42}bar();

Der Debugger führt solche Ausdrücke genauso durch.

Das Schrittverhalten ist daher identisch:

• Zwischen minimiertem und erstelltem Code.
• Wenn Sie Quellzuordnungen verwenden, um den minimierten Code in Bezug auf den ursprünglichen Code zu debuggen. Wenn Sie also Semikolons sehen, können Sie davon ausgehen, dass sie durchlaufen werden, auch wenn die eigentliche Quelle, die Sie debuggen, minimiert ist.

Lokale, Schließungs- und globale Properties aufrufen und bearbeiten

Wenn Sie bei einer Codezeile angehalten haben, können Sie im Bereich Scope die Werte von Properties und Variablen im lokalen, Closure- und globalen Gültigkeitsbereich aufrufen und bearbeiten.

• Klicken Sie doppelt auf einen Eigenschaftswert, um ihn zu ändern.
• Nicht aufzählbare Properties sind ausgegraut.

Im Screenshot oben ist der Bereich Umfang blau umrandet.

Aktuellen Aufrufstapel ansehen

Wenn Sie bei einer Codezeile angehalten haben, können Sie im Bereich Call Stack den Call Stack aufrufen, über den Sie zu diesem Punkt gelangt sind.

Klicken Sie auf einen Eintrag, um zur Codezeile zu springen, in der diese Funktion aufgerufen wurde. Das blaue Pfeilsymbol gibt an, welche Funktion in den DevTools derzeit hervorgehoben wird.

Im Screenshot oben ist der Bereich Call Stack blau umrandet.

Funktion (Frame) in einem Aufrufstack neu starten

Wenn Sie das Verhalten einer Funktion beobachten und sie noch einmal ausführen möchten, ohne den gesamten Ablauf zum Entfernen von Fehlern neu starten zu müssen, können Sie die Ausführung einer einzelnen Funktion neu starten, wenn diese Funktion pausiert ist. Mit anderen Worten: Sie können den Frame der Funktion im Aufrufstack neu starten.

So starten Sie einen Frame neu:

1. Funktionsausführung an einem Haltepunkt pausieren Im Bereich Aufrufstack wird die Reihenfolge der Funktionsaufrufe aufgezeichnet.

2. Klicken Sie im Bereich Call Stack mit der rechten Maustaste auf eine Funktion und wählen Sie im Drop-down-Menü Frame neu starten aus.

   

Im folgenden Code wird die Funktionsweise von Restart frame veranschaulicht:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

Die Funktion foo() nimmt 0 als Argument an, protokolliert es und ruft die Funktion bar() auf. Die bar()-Funktion erhöht das Argument.

Versuchen Sie, die Frames beider Funktionen so neu zu starten:

1. Kopieren Sie den Code oben in ein neues Snippet und führen Sie es aus. Die Ausführung wird am debugger-Codezeilen-Haltepunkt angehalten.
2. Im Debugger wird neben der Funktionsdeklaration der aktuelle Wert angezeigt: value = 1.
3. Starten Sie den bar()-Frame neu.
4. Drücken Sie die Taste F9, um die Anweisung zum Wertzuwachs durchzugehen. Der aktuelle Wert steigt: value = 2.
5. Optional können Sie im Bereich Umfang auf den Wert doppelklicken, um ihn zu bearbeiten und den gewünschten Wert festzulegen.

6. Starten Sie den bar()-Frame neu und führen Sie die Inkrementierungsanweisung noch einige Male aus. Der Wert steigt weiter an.

Beim Frame-Neustart werden die Argumente nicht zurückgesetzt. Mit anderen Worten: Durch den Neustart wird der ursprüngliche Zustand beim Funktionsaufruf nicht wiederhergestellt. Stattdessen wird der Ausführungszeiger einfach an den Anfang der Funktion verschoben.

Daher bleibt der aktuelle Argumentwert bei Neustarts derselben Funktion im Arbeitsspeicher erhalten.

1. Starten Sie jetzt den Frame foo() im Call Stack neu. Der Wert ist wieder 0.

In JavaScript sind Änderungen an Argumenten außerhalb der Funktion nicht sichtbar. Verschachtelte Funktionen erhalten Werte, nicht ihre Speicherorte. 1. Setzen Sie die Skriptausführung fort (F8), um diese Anleitung abzuschließen.

Frames auf der Ignorierliste anzeigen

Im Bereich Call Stack werden standardmäßig nur die Frames angezeigt, die für Ihren Code relevant sind. Scripts, die Einstellungen > Ignorierliste hinzugefügt wurden, werden nicht berücksichtigt.

Wenn Sie den vollständigen Aufrufstack einschließlich Drittanbieter-Frames sehen möchten, aktivieren Sie unter Aufrufstack die Option Frames auf der Ignorierliste anzeigen.

Demoseite

1. Öffnen Sie im Bereich Quellen die Datei src > app > app.component.ts.
2. Legen Sie einen Haltepunkt bei der Funktion increment() fest.
3. Setzen oder entfernen Sie im Bereich Aufrufstack das Häkchen bei Frames in der Ignorierliste anzeigen und sehen Sie sich die relevante oder vollständige Liste der Frames im Aufrufstack an.

Frames für asynchrone Aufrufe ansehen

Wenn das von Ihnen verwendete Framework dies unterstützt, können in den DevTools asynchrone Vorgänge erfasst werden, indem beide Teile des asynchronen Codes miteinander verknüpft werden.

In diesem Fall wird im Aufrufstack der gesamte Aufrufverlauf einschließlich asynchroner Aufrufframes angezeigt.

Stacktrace kopieren

Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle im Bereich Call Stack (Aufrufstapel) und wählen Sie Stack Trace kopieren aus, um den aktuellen Aufrufstapel in die Zwischenablage zu kopieren.

Unten sehen Sie ein Beispiel für die Ausgabe:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

Im Dateibaum navigieren

Im Bereich Seite können Sie sich im Dateibaum bewegen.

Erstellte und bereitgestellte Dateien im Dateibaum gruppieren

Bei der Entwicklung von Webanwendungen mit Frameworks wie React oder Angular kann es aufgrund der minimierten Dateien, die von den Build-Tools wie webpack oder Vite generiert werden, schwierig sein, die Quellen zu finden.

Im Bereich Quellen > Seite können Sie die Dateien in zwei Kategorien gruppieren, um die Navigation zu erleichtern:

• Autor Ähnlich wie die Quelldateien, die Sie in Ihrer IDE sehen. Diese Dateien werden in den DevTools anhand von Quellzuordnungen generiert, die von Ihren Build-Tools bereitgestellt werden.
• Bereitgestellt. Die tatsächlichen Dateien, die vom Browser gelesen werden. Normalerweise werden diese Dateien minimiert.

Wenn Sie die Gruppierung aktivieren möchten, klicken Sie oben im Dateibaum auf das Dreipunkt-Menü und wählen Sie > Dateien nach Autor/Bereitgestellt gruppieren aus.

Quellen auf der Ignorieren-Liste aus dem Dateibaum ausblenden

Damit Sie sich nur auf den von Ihnen erstellten Code konzentrieren können, werden im Bereich Quellen > Seite alle Scripts oder Verzeichnisse ausgegraut, die standardmäßig unter Einstellungen > Ignorierliste hinzugefügt wurden.

Wenn Sie solche Scripts vollständig ausblenden möchten, wählen Sie Quellen > Seite > > In der Ignorierliste enthaltene Quellen ausblenden aus.

Scripts oder Scriptmuster ignorieren

Ignorieren Sie ein Script, um es während der Fehlerbehebung zu überspringen. Wenn ein Script ignoriert wird, wird es im Bereich Aufrufstack ausgeblendet und Sie springen beim Durchlaufen des Codes nie in die Funktionen des Scripts.

Angenommen, Sie führen diesen Code durch:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A ist eine vertrauenswürdige Bibliothek eines Drittanbieters. Wenn Sie sicher sind, dass das Problem, das Sie beheben, nicht mit der Drittanbieterbibliothek zusammenhängt, ist es sinnvoll, das Script zu ignorieren.

Script oder Verzeichnis im Dateibaum ignorieren

So ignorieren Sie ein einzelnes Script oder ein ganzes Verzeichnis:

1. Klicken Sie unter Quellen > Seite mit der rechten Maustaste auf ein Verzeichnis oder eine Scriptdatei.
2. Wählen Sie Verzeichnis/Script zur Ignorierliste hinzufügen aus.

Wenn Sie Quellen in der Ignorierliste nicht ausgeblendet haben, können Sie eine solche Quelle im Dateibaum auswählen und im Warnbanner  auf Aus Ignorierliste entfernen oder Konfigurieren klicken.

Andernfalls können Sie ausgeblendete und ignorierte Verzeichnisse und Scripts unter Einstellungen > Ignorierliste aus der Liste entfernen.

Script im Editor-Bereich ignorieren

So ignorieren Sie ein Script im Bereich Editor:

1. Öffnen Sie die Datei.
2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle.
3. Wählen Sie Script zur Ignorierliste hinzufügen aus.

Sie können ein Script unter Einstellungen > Ignorierliste aus der Liste der ignorierten Scripts entfernen.

Script im Bereich „Aufrufstack“ ignorieren

So ignorieren Sie ein Script im Bereich Aufrufstack:

1. Klicken Sie mit der rechten Maustaste auf eine Funktion im Script.
2. Wählen Sie Script zur Ignorierliste hinzufügen aus.

Sie können ein Script unter Einstellungen > Ignorierliste aus der Liste der ignorierten Scripts entfernen.

Scripts in den Einstellungen ignorieren

Weitere Informationen finden Sie unter Einstellungen > Ignorierliste.

Debug-Code-Snippets von jeder Seite aus ausführen

Wenn Sie immer wieder denselben Debug-Code in der Console ausführen, sollten Sie Snippets verwenden. Snippets sind ausführbare Scripts, die Sie in den Entwicklertools erstellen, speichern und ausführen.

Weitere Informationen finden Sie unter Code-Snippets von jeder Seite aus ausführen.

Werte benutzerdefinierter JavaScript-Ausdrücke beobachten

Im Bereich „Ansehen“ können Sie sich die Werte benutzerdefinierter Ausdrücke ansehen. Sie können sich jeden gültigen JavaScript-Ausdruck ansehen.

• Klicken Sie auf Ausdruck hinzufügen , um einen neuen Zifferblatt-Ausdruck zu erstellen.
• Klicken Sie auf Aktualisieren , um die Werte aller vorhandenen Ausdrücke zu aktualisieren. Die Werte werden beim Durchlaufen des Codes automatisch aktualisiert.
• Bewegen Sie den Mauszeiger auf einen Ausdruck und klicken Sie auf Ausdruck löschen , um ihn zu löschen.

Scripts prüfen und bearbeiten

Wenn Sie ein Script im Bereich Seite öffnen, wird der Inhalt im Bereich Editor angezeigt. Im Bereich Editor können Sie Ihren Code durchsuchen und bearbeiten.

Außerdem können Sie den Inhalt lokal überschreiben oder einen Arbeitsbereich erstellen und die in den Entwicklertools vorgenommenen Änderungen direkt in Ihren lokalen Quellen speichern.

Minimierte Datei lesbar machen

Im Bereich Quellen werden standardmäßig minimierte Dateien in einer lesbaren Form dargestellt. Bei der Formatierung kann im Editor eine lange Codezeile auf mehreren Zeilen angezeigt werden. - gibt an, dass es sich um eine Zeile mit fortlaufendem Text handelt.

Wenn Sie die minimierte Datei so sehen möchten, wie sie geladen wurde, klicken Sie links unten im Editor auf { }.

Codeblöcke minimieren

Wenn Sie einen Codeblock minimieren möchten, bewegen Sie den Mauszeiger in der linken Spalte auf die Zeilennummer und klicken Sie auf Minimieren.

Wenn Sie den Codeblock maximieren möchten, klicken Sie neben ihm auf {...}.

Weitere Informationen zum Konfigurieren dieses Verhaltens finden Sie unter Einstellungen > Einstellungen > Quellen.

Script bearbeiten

Wenn Sie einen Fehler beheben, möchten Sie häufig einige Änderungen an Ihrem JavaScript-Code testen. Sie müssen die Änderungen nicht in einem externen Browser vornehmen und dann die Seite neu laden. Sie können das Script in den DevTools bearbeiten.

So bearbeiten Sie ein Script:

1. Öffnen Sie die Datei im Bereich Editor des Bereichs Quellen.
2. Nehmen Sie die Änderungen im Bereich Editor vor.

3. Drücken Sie zum Speichern Befehlstaste + S (Mac) oder Strg + S (Windows, Linux). In den DevTools wird die gesamte JS-Datei in die JavaScript-Engine von Chrome eingefügt.

   

   Im Screenshot oben ist der Bereich Editor blau umrandet.

Pausierte Funktion live bearbeiten

Während die Ausführung pausiert ist, können Sie die aktuelle Funktion bearbeiten und Änderungen unter den folgenden Einschränkungen live anwenden:

• Sie können nur die oberste Funktion im Aufrufstack bearbeiten.
• Es dürfen keine rekursiven Aufrufe derselben Funktion weiter unten im Stack vorhanden sein.

So bearbeiten Sie eine Funktion in Echtzeit:

1. Pausieren Sie die Ausführung mit einem Haltepunkt.
2. Bearbeiten Sie die pausierte Funktion.
3. Drücken Sie Befehlstaste / Strg + S, um die Änderungen anzuwenden. Der Debugger startet die Funktion automatisch neu.
4. Die Ausführung wird fortgesetzt.

Im Video unten erfährst du mehr über diesen Workflow.

In diesem Beispiel haben die Variablen addend1 und addend2 anfangs den falschen string-Typ. Anstatt Zahlen hinzuzufügen, werden die Strings also zusammengefügt. Zur Behebung des Problems werden die parseInt()-Funktionen während der Live-Bearbeitung hinzugefügt.

Text in einem Script suchen und ersetzen

So suchen Sie in einem Script nach Text:

1. Öffnen Sie die Datei im Bereich Editor des Bereichs Quellen.
2. Drücken Sie Befehlstaste + F (Mac) oder Strg + F (Windows, Linux), um eine integrierte Suchleiste zu öffnen.
3. Geben Sie Ihre Suchanfrage in die Leiste ein. Optional:
   • Klicken Sie auf Groß- und Kleinschreibung beachten, damit bei der Abfrage zwischen Groß- und Kleinschreibung unterschieden wird.
   • Klicken Sie auf Regulären Ausdruck verwenden, um mit einem regulären Ausdruck zu suchen.
4. Drücken Sie die Eingabetaste. Wenn Sie zum vorherigen oder nächsten Suchergebnis springen möchten, drücken Sie die Auf- oder Ab-Taste.

So ersetzen Sie den gefundenen Text:

1. Klicken Sie in der Suchleiste auf die Schaltfläche Ersetzen.
2. Geben Sie den Text ein, durch den der Text ersetzt werden soll, und klicken Sie dann auf Ersetzen oder Alle ersetzen.

JavaScript deaktivieren

Weitere Informationen finden Sie unter JavaScript mit den Chrome-Entwicklertools deaktivieren.