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 angehalten wird, 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.

Wichtig: Während die Ausführung pausiert ist, können Sie auch die aktuelle Funktion neu starten und sogar live bearbeiten.

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 einen Debug-Vorgang für den folgenden Code 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 Codezeile einsteigen

Wenn der Vorgang bei einer Codezeile mit einem Funktionsaufruf im Zusammenhang mit dem zu debuggenden Problem pausiert wird, klicken Sie auf Step into , um die Funktion weiter 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 zu behebenden Problem zusammenhängt.

Sie könnten sich durch alle Linien bewegen, aber das kann mühsam sein. Sie könnten einen Code-Bruchpunkt in der gewünschten Zeile setzen und dann auf Script-Ausführung fortsetzen klicken. 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. Die Entwicklertools führen das Skript bis zum nächsten Haltepunkt aus, sofern vorhanden.

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 Web Workern oder Service Workern arbeiten, klicken Sie auf einen Kontext im Bereich Threads, um zu diesem Kontext zu wechseln. Der blaue Pfeil zeigt an, welcher Kontext derzeit 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 die lokalen und globalen Eigenschaften für den Service Worker-Kontext aufrufen, 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

Wichtig: Ab Chrome-Version 108 können Sie mit dem Debugger sowohl durch semikolons als auch durch Kommas getrennte Ausdrücke durchgehen.

Durch kommagetrennte Ausdrücke können Sie reduzierten Code debuggen. Beispiel:

function foo() {}

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

bar();

In der minimierten Version 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 sie durchgehen, auch wenn die tatsächliche 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.

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

Hinweis:Wenn das Feld nicht in einer Codezeile pausiert wird, ist der Bereich Aufrufstack leer.

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 Debugging-Ablauf 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.

   

   Hinweis: Sie können jeden Funktions-Frame im Call Stack neu starten, mit Ausnahme von WebAssembly-, Async- und Generatorfunktionen.

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.
   Achtung: Wenn die Ausführung pausiert ist, dürfen Sie die Reihenfolge der Frames im Aufrufstapel nicht programmatisch ändern. Dies kann zu unerwarteten Fehlern führen.
2. Der Debugger zeigt neben der Funktionsdeklaration den aktuellen Wert an: value = 1.
3. Starte den bar()-Frame neu.
4. Gehen Sie die Anweisung zur Werterhöhung durch Drücken von F9. Der aktuelle Wert erhöht sich: 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. Versuchen Sie, den bar()-Frame neu zu starten und die Inkrement-Anweisung mehrmals zu durchlaufen. Der Wert steigt weiter an.

   Wichtiger Hinweis: Warum wird der Wert nicht auf 0 zurückgesetzt?

Beim Frame-Neustart werden die Argumente nicht zurückgesetzt. Anders ausgedrückt: Durch den Neustart wird nicht der ursprüngliche Zustand beim Funktionsaufruf 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. Wie Sie sehen, ist der Wert wieder 0.
   Wichtiger Punkt: Warum wird der Wert auf 0 zurückgesetzt?

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. Aktivieren oder deaktivieren Sie im Abschnitt Aufrufstack das Kästchen Frames auf Ignorieren-Liste anzeigen und achten Sie auf die relevante bzw. vollständige Liste der Frames im Aufrufstack.

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 zeigt der Aufrufstack den gesamten Aufrufverlauf einschließlich asynchroner Aufrufframes an.

Wichtig: In DevTools wird diese Funktion „Async Stack Tagging“ basierend auf der console.createTask() API-Methode implementiert. Die Implementierung der API obliegt den Frameworks. Angular unterstützt diese Funktion beispielsweise.

Stacktrace kopieren

Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle im Bereich Aufrufstack und wählen Sie Stacktrace kopieren aus, um den aktuellen Aufrufstack in die Zwischenablage zu kopieren.

Hier 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 in der Dateistruktur navigieren.

Erstellte und bereitgestellte Dateien im Dateibaum gruppieren

Hinweis:Dies ist eine -Vorschaufunktion ab Chrome-Version 104.

Bei der Entwicklung von Webanwendungen mit Frameworks wie React oder Angular kann es aufgrund der komprimierten Dateien, die von den Build-Tools (z. B. Webpack oder Vite) generiert werden, schwierig sein, in den Quellen zu navigieren.

Um Ihnen die Navigation durch Quellen zu erleichtern, können die Dateien im Bereich Quellen > Seite in zwei Kategorien gruppiert werden:

• Verfasst. Ähnlich wie die Quelldateien, die Sie in Ihrer IDE ansehen. Diese Dateien werden von den Entwicklertools anhand von Quellzuordnungen generiert.
• 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

Hinweis: Dies ist eine -Vorabversionsfunktion, die ab Chrome-Version 106 verfügbar ist.

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 Skripts vollständig ausblenden möchten, wählen Sie Quellen > Seite > > Quellen auf der Ignorieren-Liste ausblenden aus.

Scripts oder Scriptmuster ignorieren

Scripts können ignoriert werden, um sie bei der Fehlerbehebung zu überspringen. Wenn ein Script ignoriert wird, wird es im Bereich Aufrufstack verborgen und Sie gelangen niemals zu den Funktionen des Scripts, wenn Sie den Code durchgehen.

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 Ignorieren-Liste 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.

Skript im Editor 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 Skript zur Ignorieren-Liste 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 Skript 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 feststellen, dass Sie immer wieder denselben Debug-Code in der Konsole ausführen, sollten Sie Snippets in Betracht ziehen. 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 Watch-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 Code handelt.

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

Codeblöcke falten

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 oft einige Änderungen an Ihrem JavaScript-Code testen. Sie müssen die Änderungen nicht in einem externen Browser vornehmen und dann die Seite neu laden. Du kannst dein Script in den Entwicklertools bearbeiten.

So bearbeiten Sie ein Skript:

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.

   

   Der Bereich Editor im Screenshot oben ist blau umrandet.

Pausierte Funktionen live bearbeiten

Hinweis: Diese Funktion ist ab Chrome-Version 105 verfügbar.

Während die Ausführung pausiert ist, können Sie die aktuelle Funktion bearbeiten und Änderungen live anwenden. Dabei gelten folgende Einschränkungen:

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

Wichtiger Hinweis: Wenn Sie Änderungen anwenden, startet der Debugger die Funktion automatisch neu. Daher gelten auch die Einschränkungen eines Funktionsneustarts. WebAssembly-, asynchrone und Generatorfunktionen können nicht neu gestartet werden.

So bearbeiten Sie eine Funktion in Echtzeit:

1. Halten Sie die Ausführung mit einem Haltepunkt an.
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.

Sehen Sie sich das Video unten an, um mehr über diesen Workflow zu erfahren.

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 Abwärtstaste.

So ersetzen Sie den gefundenen Text:

1. Klicken Sie in der Suchleiste auf die Schaltfläche Ersetzen.
2. Geben Sie den zu ersetzenden Text ein und klicken Sie dann auf Ersetzen oder Alle ersetzen.

JavaScript deaktivieren

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