JavaScript-Debugging-Referenz

Mit dieser umfassenden Referenz zu den Debugging-Funktionen in den Chrome DevTools kannst du neue Debugging-Workflows entdecken.

Weitere Informationen zu den Grundlagen der Fehlerbehebung finden Sie unter Erste Schritte mit der JavaScript-Fehlerbehebung in den Chrome-Entwicklertools.

Code mit Haltepunkten pausieren

Legen Sie einen Haltepunkt fest, damit Sie Ihren Code mitten in der Ausführung anhalten können. Informationen zum Festlegen von Haltepunkten finden Sie unter Code mit Haltepunkten pausieren.

Werte beim Pausieren überprü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 inline neben den entsprechenden Deklarationen angezeigt.

Sie können die Console verwenden, um die bewerteten Variablen, Konstanten und Objekte abzufragen.

Vorschau von Klassen-/Funktionsattributen anzeigen, wenn der Mauszeiger darauf bewegt wird

Bewegen Sie den Mauszeiger auf einen Klassen- oder Funktionsnamen, während die Ausführung pausiert ist, um eine Vorschau der zugehörigen Eigenschaften zu sehen.

Schritt-für-Schritt-Code

Gehen Sie Ihren Code nach dem Pausieren mit einem Ausdruck nach dem anderen durch und untersuchen Sie dabei den Kontrollfluss und die Eigenschaftswerte.

Über die Codezeile wechseln

Wenn der Vorgang bei einer Codezeile pausiert wird, die eine Funktion enthält, die für das Problem, das Sie debuggen, nicht relevant ist, klicken Sie auf Step over , um die Funktion auszuführen, ohne hineinzuzusteigen.

Angenommen, Sie führen eine Fehlerbehebung 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 Step over auswählen, führt die Entwicklertools den gesamten Code in der Funktion aus, die Sie übergehen (B und C). Die Entwicklertools werden dann am 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 eine Fehlerbehebung 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 klicken, führt die Entwicklertools diese Codezeile aus und pausiert dann bei B.

Codezeile verlassen

Wenn das Pausieren in einer Funktion erfolgt ist, die nicht mit dem Problem zusammenhängt, für das Sie eine Fehlerbehebung durchführen, klicken Sie auf Step out , um den Rest des Funktionscodes auszuführen.

Angenommen, Sie führen eine Fehlerbehebung für den folgenden Code 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 die Entwicklertools den Rest des Codes in getName() aus, in diesem Beispiel nur B, und pausiert dann bei C.

Gesamten Code bis zu einer bestimmten Zeile ausführen

Beim Debuggen einer langen Funktion befindet sich möglicherweise viel Code, der nicht mit dem Problem zusammenhängt, für das Sie das Debugging ausführen.

Sie könnten sich durch alle Linien bewegen, aber das kann mühsam sein. Sie könnten in der gewünschten Zeile einen Haltepunkt für die Codezeile festlegen und dann auf Skriptausführung fortsetzen klicken. Es gibt aber auch einen schnelleren Weg.

Klicken Sie mit der rechten Maustaste auf die gewünschte Codezeile und wählen Sie Weiter aus. Die Entwicklertools führen den gesamten Code bis zu diesem Punkt aus und pausiert dann in dieser Zeile.

Skriptausführung fortsetzen

Wenn Sie die Skriptausführung 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 Haltepunkte ignorieren und die Fortsetzung des Skripts erzwingen möchten, klicken Sie auf Skriptausführung fortsetzen und wählen Sie Skriptausführung erzwingen aus.

Thread-Kontext ä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.

Der Bereich Threads im obigen Screenshot ist blau umrandet.

Angenommen, Sie wurden an einem Haltepunkt sowohl im Hauptskript als auch im Service Worker-Skript angehalten. Sie möchten die lokalen und globalen Eigenschaften für den Service Worker-Kontext aufrufen, aber im Bereich „Quellen“ wird der Kontext des Hauptskripts angezeigt. Klicken Sie im Thread-Bereich auf den Service Worker-Eintrag, um zu diesem Kontext zu wechseln.

Durch Kommas getrennte Ausdrücke ausführen

Durch kommagetrennte Ausdrücke können Sie reduzierten Code debuggen. Sehen wir uns zum Beispiel den folgenden Code an:

function foo() {}

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

bar();

Wenn sie reduziert wird, enthält sie einen durch Kommas getrennten Ausdruck foo(),foo(),42:

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

Der Debugger führt solche Ausdrücke auf die gleiche Weise durch.

Daher ist das Schrittverhalten identisch:

• Zwischen minifiziertem und verfasstem Code
• Wenn Sie Source Maps verwenden, um Fehler im reduzierten Code in Bezug auf den Originalcode zu beheben. Mit anderen Worten, wenn Sie Semikolons sehen, können Sie immer davon ausgehen, dass Sie sie durchgehen, auch wenn die tatsächliche Quelle, für die Sie das Debugging durchführen, reduziert ist.

Lokale, Geschlossenheits- und globale Eigenschaften anzeigen und bearbeiten

Während das Pausieren in einer Codezeile erfolgt, können Sie im Bereich Scope (Bereich) die Werte von Properties und Variablen im lokalen, Geschlossener- und globalen Geltungsbereich ansehen und bearbeiten.

• Doppelklicken Sie auf einen Eigenschaftswert, um ihn zu ändern.
• Nicht aufzählbare Attribute sind ausgegraut.

Der Bereich Scope (Bereich) im Screenshot oben ist blau umrandet.

Aktuellen Aufrufstack ansehen

Während das Pausieren in einer Codezeile erfolgt, können Sie im Bereich Aufrufstack den Aufrufstack ansehen, der Sie zu diesem Punkt gebracht hat.

Klicken Sie auf einen Eintrag, um zu der Codezeile zu springen, in der diese Funktion aufgerufen wurde. Der blaue Pfeil zeigt an, welche Funktion in Entwicklertools derzeit hervorgehoben wird.

Der Bereich Call Stack im Screenshot oben ist 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 Debugging-Ablauf neu starten zu müssen, können Sie die Ausführung einer einzelnen Funktion neu starten, wenn diese Funktion pausiert ist. Das heißt, Sie können den Frame der Funktion im Aufrufstack neu starten.

So starten Sie einen Frame neu:

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

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

   

Sehen Sie sich den folgenden Code an, um die Funktionsweise von Frame neu starten zu verstehen:

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

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

foo(0);

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

Versuchen Sie, die Frames beider Funktionen wie folgt neu zu starten:

1. Kopieren Sie den Code oben in ein neues Snippet und führen Sie es aus. Die Ausführung endet am Haltepunkt der Codezeile debugger.
2. Im Debugger wird neben der Funktionsdeklaration der aktuelle Wert angezeigt: 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.

Beim Neustart des Frames 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 Speicher erhalten.

1. Starten Sie nun den Frame foo() im Aufrufstapel neu. Wie Sie sehen, ist der Wert wieder 0.

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

Frames auf der Ignorieren-Liste anzeigen

Standardmäßig werden im Bereich Call Stack nur die Frames angezeigt, die für Ihren Code relevant sind. Skripts, die zu Einstellungen > Ignorieren-Liste hinzugefügt wurden, werden nicht berücksichtigt.

Wenn Sie den vollständigen Aufrufstack einschließlich Drittanbieter-Frames sehen möchten, aktivieren Sie im Abschnitt Aufrufstack die Option Frames auf Ignorieren-Liste anzeigen.

Probieren Sie es auf dieser Demoseite aus:

1. Öffnen Sie im Bereich Quellen die Datei src > app > app.component.ts.
2. Legen Sie in der Funktion increment() einen Haltepunkt 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.

Asynchrone Frames ansehen

Wenn die Entwicklertools vom verwendeten Framework unterstützt werden, können sie asynchrone Vorgänge verfolgen, indem sie beide Teile des asynchronen Codes miteinander verknüpfen.

In diesem Fall zeigt der Aufrufstack die gesamte Anrufliste einschließlich asynchroner Aufruf-Frames an.

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)

In der Dateistruktur navigieren

Im Bereich Seite können Sie in der Dateistruktur navigieren.

Erstellte und bereitgestellte Dateien in der Dateistruktur gruppieren

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. Die Entwicklertools generieren diese Dateien basierend auf Source Maps, die von Ihren Build-Tools bereitgestellt werden.
• Bereitgestellt. Die tatsächlichen Dateien, die vom Browser gelesen werden. In der Regel sind diese Dateien minimiert.

Wenn Sie die Gruppierung aktivieren möchten, aktivieren Sie oben in der Dateistruktur im Dreipunkt-Menü die Option > Dateien nach erstellten/bereitgestellten Dateien gruppieren .

Quellen auf der Ignorieren-Liste in der Dateistruktur ausblenden

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

Wenn Sie solche Skripts vollständig ausblenden möchten, wählen Sie Quellen > Seite > > Quellen auf der Ignorieren-Liste ausblenden aus.

Skript oder Muster von Skripts ignorieren

Ignorieren Sie ein Skript, um es bei der Fehlerbehebung zu überspringen. Wenn ein Script ignoriert wird, wird es im Bereich Aufrufstack verdeckt und Sie gelangen niemals zu den Funktionen des Scripts, wenn Sie den Code durchgehen.

Angenommen, Sie durchlaufen diesen Code:

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

A ist eine Drittanbieterbibliothek, der Sie vertrauen. Wenn Sie sicher sind, dass das Problem, für das Sie eine Fehlerbehebung durchführen, nicht mit der Drittanbieterbibliothek zusammenhängt, ist es sinnvoll, das Skript zu ignorieren.

Skript oder Verzeichnis in der Dateistruktur ignorieren

So ignorieren Sie ein einzelnes Skript oder ein ganzes Verzeichnis:

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

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

Andernfalls können Sie ausgeblendete und ignorierte Verzeichnisse und Skripts aus der Liste entfernen. Rufen Sie dazu Einstellungen > Ignorieren-Liste auf.

Skript im Editor ignorieren

So ignorieren Sie ein Skript 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 aus der Liste der ignorierten Skripts entfernen. Rufen Sie dazu Einstellungen > Ignorierliste auf.

Skript aus dem Aufrufstack ignorieren

So ignorieren Sie ein Skript im Bereich Aufrufstack:

1. Klicken Sie mit der rechten Maustaste auf eine Funktion im Skript.
2. Wählen Sie Skript zur Ignorieren-Liste hinzufügen aus.

Sie können ein Script aus der Liste der ignorierten Skripts entfernen. Rufen Sie dazu Einstellungen > Ignorierliste auf.

Script in den Einstellungen ignorieren

Weitere Informationen finden Sie unter Einstellungen > Ignorierliste.

Code-Snippets zur Fehlerbehebung auf beliebigen Seiten 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 erstellen, speichern und in den Entwicklertools ausführen.

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

Werte benutzerdefinierter JavaScript-Ausdrücke beobachten

Im Überwachungsbereich können Sie die Werte benutzerdefinierter Ausdrücke überwachen. Sie können jeden gültigen JavaScript-Ausdruck beobachten.

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

Skripts prüfen und bearbeiten

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

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

Reduzierte Dateien lesbar machen

Standardmäßig werden im Bereich Quellen reduzierte Dateien übersichtlich dargestellt. In der Optik zeigt der Editor möglicherweise eine einzelne lange Codezeile in mehreren Zeilen an. - gibt an, dass es sich um die Zeilenkontinuität handelt.

Um zu sehen, wie die komprimierte Datei geladen wurde, klicken Sie unten links im Editor auf { }.

Codeblöcke falten

Bewegen Sie dazu den Mauszeiger auf die Zeilennummer in der linken Spalte und klicken Sie auf Minimieren.

Um den Codeblock zu öffnen, klicken Sie daneben auf {...}.

Unter Einstellungen > Einstellungen > Quellen können Sie dieses Verhalten konfigurieren.

Skript bearbeiten

Bei der Behebung eines Fehlers 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 die Tastenkombination Befehlstaste + S (Mac) oder Strg + S (Windows, Linux). Mit den Entwicklertools wird die gesamte JS-Datei in der JavaScript-Engine von Chrome gepatcht.

   

   Der Bereich Editor im Screenshot oben ist blau umrandet.

Pausierte Funktionen live bearbeiten

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

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

So bearbeiten Sie eine Funktion live:

1. Halten Sie die Ausführung mit einem Haltepunkt an.
2. Bearbeiten Sie die pausierte Funktion.
3. Drücken Sie die Befehlstaste / Strg + S, um die Änderungen zu übernehmen. Der Debugger startet die Funktion automatisch neu.
4. Fahren Sie mit der Ausführung fort.

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 Zeichenfolgen verkettet. Um das Problem zu beheben, werden während der Live-Bearbeitung die parseInt()-Funktionen hinzugefügt.

Text in einem Skript suchen und ersetzen

So suchen Sie nach Text in einem Skript:

1. Öffnen Sie die Datei im Bereich Editor des Bereichs Quellen.
2. Um eine integrierte Suchleiste zu öffnen, drücken Sie Befehlstaste + F (Mac) oder Strg + F (Windows und Linux).
3. Geben Sie in der Leiste Ihre Abfrage ein. Außerdem haben Sie folgende Möglichkeiten:
   • Klicken Sie auf Groß-/Kleinschreibung beachten, damit bei Ihrer Abfrage die Groß-/Kleinschreibung berücksichtigt wird.
   • Klicken Sie auf Regulären Ausdruck verwenden, um anhand eines regulären Ausdrucks zu suchen.
4. Drücken Sie die Eingabetaste. Um zum vorherigen oder nächsten Suchergebnis zu springen, drücke die Nach-oben- oder Nach-unten-Taste.

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.