JavaScript-Debugging-Referenz

Kayce Basques

Sofia Emelianova

In dieser umfassenden Referenz zu den Chrome DevTools-Debugging-Funktionen finden Sie neue Debugging-Workflows.

Einführung in die JavaScript-Fehlerbehebung 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. Der Debugger zeigt die aktuellen Werte inline neben den entsprechenden Deklarationen an.

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

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

Vorschau der Klassen- und 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 erhalten.

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 zu behebende Problem nicht relevant ist, klicken Sie auf Überspringen step_over, 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. Nachdem Sie auf step_over geklickt haben, führt DevTools den gesamten Code in der Funktion aus, über die Sie hinwegspringen, also B und C. Die Entwicklertools werden dann bei D pausiert.

In eine Codezeile einsteigen

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

Angenommen, Sie führen das Debuggen des folgenden Codes 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 step_out, 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 step_out 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

Bei der Fehlerbehebung einer langen Funktion gibt es möglicherweise viel Code, der nicht mit dem zu behebenden Problem zusammenhängt.

Sie könnten alle Zeilen durchgehen, aber das kann mühsam sein. Sie könnten einen Code-Bruchpunkt in der gewünschten Zeile setzen und dann auf Fortsetzen klicken. Es gibt jedoch 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 Fortsetzen. In den DevTools wird das Script bis zum nächsten Haltepunkt ausgeführt, falls vorhanden.

Skriptausführung erzwingen

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

Konversationskontext ändern

Wenn Sie mit Webworkern oder Serviceworkern 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 ausgewählt ist.

Der Bereich Threads ist 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 kommagetrennte Ausdrücke gehen

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

Sie können minimierten Code debuggen, indem Sie durch Kommas getrennte Ausdrücke durchgehen. Betrachten wir beispielsweise den folgenden Code:

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 sie durchgehen, auch wenn die zu behebende Quelle minimiert ist.

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

Wenn Sie bei einer Codezeile angehalten sind, 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.

Der Bereich Umfang ist 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.

Wählen Sie einen Eintrag aus, um zur Codezeile zu springen, in der diese Funktion aufgerufen wurde. Das blaue Pfeilsymbol gibt an, welche Funktion in den DevTools hervorgehoben wird.

Der Bereich Aufrufstack ist blau umrandet.

Hinweis: Wenn die Ausführung nicht auf einer Codezeile pausiert ist, 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 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.

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

So funktioniert der Frame-Neustart:

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 Beispielcode 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. Das kann zu unerwarteten Fehlern führen.

2. Im Debugger wird neben der Funktionsdeklaration der aktuelle Wert angezeigt: value = 1.

3. Starten Sie den bar()-Frame neu.

4. Durch Drücken der Taste F9 können Sie die Anweisung zum Wertzuwachs durchgehen. Der aktuelle Wert steigt auf 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 Frame bar() neu und wiederholen Sie die Inkrementierungsanweisung noch einige Male. Der Wert steigt weiter an.

   Wichtiger Hinweis :Der Wert wird nicht auf 0 zurückgesetzt, da die Argumente beim Neustart des Frames nicht zurückgesetzt werden. Mit anderen Worten: Durch den Neustart wird der ursprüngliche Zustand beim Funktionsaufruf nicht wiederhergestellt. Stattdessen wird der Ausführungszeiger an den Anfang der Funktion verschoben. Daher bleibt der aktuelle Argumentwert bei Neustarts derselben Funktion im Arbeitsspeicher erhalten.

7. Starten Sie den foo()-Frame im Aufrufstack neu. Der Wert ist wieder 0.

   Wichtig :Der Wert wird auf 0 zurückgesetzt. In JavaScript sind Änderungen an Argumenten außerhalb der Funktion nicht sichtbar. Verschachtelte Funktionen erhalten Werte, nicht ihre Speicherorte.

8. 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 unter Einstellungen 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.

In dieser Demo können Sie es ausprobieren:

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 Ihrem Framework unterstützt wird, 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.

In Key Point 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 Call Stack (Aufrufstapel) und wählen Sie Stack Trace kopieren aus, um den aktuellen Aufrufstapel 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 sich im Dateibaum bewegen.

Erstellte und bereitgestellte Dateien im Dateibaum gruppieren

Experimentell: Diese Vorabversion ist experimentell und ab Chrome-Version 104 verfügbar.

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:

• code Authored. Ähnlich wie die Quelldateien, die Sie in Ihrer IDE aufrufen. 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 im Menü auf das Dreipunkt-Menü more_vert > Dateien nach Autor/Bereitgestellt gruppieren .

Quellen auf der Ignorieren-Liste aus dem Dateibaum ausblenden

Experimentell: Diese Funktion befindet sich in der Vorabversion und ist ab Chrome-Version 106 verfügbar.

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

Wenn Sie solche Scripts vollständig ausblenden möchten, wählen Sie Quellen > Seite > more_vert > 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 nicht 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, sollten Sie das Script 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 der Ignorierliste entfernen oder Konfigurieren klicken.

Andernfalls können Sie ausgeblendete und ignorierte Verzeichnisse und Scripts unter Einstellungen 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 aus der Ignorierliste unter Einstellungen > Einstellungen > Ignorierliste 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 aus der Ignorierliste unter Einstellungen > Einstellungen > Ignorierliste entfernen.

Scripts in den Einstellungen ignorieren

Sie finden sie unter Einstellungen > 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 DevTools 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 add, um einen neuen Watch-Ausdruck zu erstellen.
• Klicken Sie auf Aktualisieren 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 data_object.

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 arrow_drop_down Collapse (Minimieren).

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

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

Script bearbeiten

Wenn Sie einen Fehler beheben, möchten Sie oft einige Änderungen an Ihrem JavaScript testen. Sie müssen die Änderungen nicht in einem externen Browser vornehmen und dann die Seite aktualisieren. Sie können Ihr Script in den Entwicklertools 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 JavaScript-Datei in die JavaScript-Engine von Chrome eingefügt.

   

   Der Bereich Bearbeiter ist blau umrandet.

Pausierte Funktion 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 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.

Wichtiger Hinweis: Wenn Sie Änderungen anwenden, wird die Funktion vom Debugger automatisch neu gestartet. 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. Pausieren Sie die Ausführung mit einem Haltepunkt.
2. Bearbeiten Sie die pausierte Funktion.
3. Drücken Sie die Tastenkombination 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 an, um mehr über diesen Workflow zu erfahren.

In diesem Beispiel haben die Variablen addend1 und addend2 anfangs einen falschen string-Typ. Anstatt Zahlen hinzuzufügen, werden die Strings also zusammengefügt. Um das Problem zu beheben, 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 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.