JavaScript-Debugging-Referenz

Kayce Basken
Kayce Basken
Sofia Emelianova
Sofia Emelianova

In dieser umfassenden Referenz zu den Debugging-Funktionen der Chrome-Entwicklertools entdecken Sie neue Workflows zur Fehlerbehebung.

Grundlagen der Fehlerbehebung finden Sie unter Erste Schritte beim Debuggen von JavaScript in den Chrome-Entwicklertools.

Code mit Haltepunkten pausieren

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

Werte beim Pausieren 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. Die aktuellen Werte werden inline neben den entsprechenden Deklarationen angezeigt.

Inline-Bewertungen werden neben den Deklarationen angezeigt.

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

Mit der Console die ausgewerteten Variablen, Konstanten und Objekte abfragen

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

Bewegen Sie den Mauszeiger auf den Namen einer Klasse oder Funktion, während die Ausführung pausiert ist, um eine Vorschau der zugehörigen Eigenschaften zu sehen.

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

Schritt-für-Schritt-Anleitung des Codes

Gehen Sie nach dem Pausieren des Codes die einzelnen Ausdrücke durch und untersuchen Sie dabei den Kontrollablauf und die Eigenschaftswerte.

Schritt-für-Schritt-Code-Zeile

Wenn Sie die Pausierung einer Codezeile pausieren, die eine Funktion enthält, die für das Problem, das Sie debuggen, nicht relevant ist, klicken Sie auf Step over Übergehen, um die Funktion auszuführen, ohne die Funktion aufzurufen.

„Step over“ wird ausgewählt.

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
}

Du wurdest am A pausiert. Durch Drücken von Step over führt die Entwicklertools den gesamten Code in der Funktion aus, die Sie überschreiben. Dies sind B und C. Die Entwicklertools werden dann am D pausiert.

Schritt in die Codezeile

Wenn Sie die Pausierung einer Codezeile pausieren, die einen Funktionsaufruf enthält, der mit dem Problem zusammenhängt, das Sie debuggen, klicken Sie auf Step into (Schritt in), um die Funktion weiter zu untersuchen.

„Step In“ auswählen.

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;
}

Du wurdest am A pausiert. Wenn Sie auf Step into drücken, führt die Entwicklertools diese Codezeile aus und pausiert dann bei B.

Weg vom Code

Wenn Sie innerhalb einer Funktion pausiert werden, die nicht mit dem Problem zusammenhängt, für das Sie eine Fehlerbehebung durchführen, klicken Sie auf Step Out Aussteigen, um den restlichen Code der Funktion auszuführen.

„Step Out“ auswählen.

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
}

Du wurdest am A pausiert. Wenn Sie auf Step Out klicken, führt die Entwicklertools den Rest des Codes in getName() aus, der in diesem Beispiel nur B ist, und wird dann bei C angehalten.

Gesamten Code bis zu einer bestimmten Zeile ausführen

Beim Debuggen einer langen Funktion kann viel Code enthalten sein, der nicht mit dem Problem zusammenhängt, das Sie debuggen.

Sie könnten alle Zeilen durchgehen, aber das kann mühsam sein. Sie könnten in der gewünschten Zeile einen Haltepunkt festlegen und dann auf Skriptausführung fortsetzen Skriptausführung fortsetzen klicken, aber es gibt eine schnellere Möglichkeit.

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

Wählen Sie „Weiter nach hier“ aus.

Skriptausführung fortsetzen

Wenn Sie die Skriptausführung nach einer Pause fortsetzen möchten, klicken Sie auf Skriptausführung fortsetzen Skriptausführung fortsetzen. DevTools führt das Skript bis zum nächsten Haltepunkt aus, sofern vorhanden.

Wählen Sie „Skriptausführung fortsetzen“ aus.

Skriptausführung erzwingen

Wenn Sie alle Haltepunkte ignorieren und die Ausführung des Skripts erzwingen möchten, klicken Sie auf Skriptausführung fortsetzen Skriptausführung fortsetzen und wählen Sie dann Skriptausführung erzwingen Skriptausführung erzwingen aus.

Wählen Sie „Scriptausführung erzwingen“ aus.

Thread-Kontext ändern

Wenn Sie mit Web Workern oder Service Workern arbeiten, klicken Sie auf einen Kontext, der im Bereich Threads aufgeführt ist, um zu diesem Kontext zu wechseln. Das blaue Pfeilsymbol zeigt an, welcher Kontext gerade ausgewählt ist.

Der Bereich „Threads“.

Der Bereich Threads im Screenshot oben ist blau umrandet.

Angenommen, Sie haben sowohl in Ihrem Hauptskript als auch in Ihrem Service Worker-Skript an einem Haltepunkt angehalten. Sie möchten die lokalen und globalen Eigenschaften für den Service Worker-Kontext aufrufen, aber im Bereich „Quellen“ wird der Hauptkontext des Skripts angezeigt. Wenn Sie im Bereich „Threads“ auf den Service Worker-Eintrag klicken, können Sie zu diesem Kontext wechseln.

Durch Kommas getrennte Ausdrücke durchlaufen

Durch das Ausführen kommagetrennter Ausdrücke können Sie Fehler in minimiertem Code beheben. Betrachten Sie zum Beispiel den folgenden Code:

function foo() {}

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

bar();

Nach der Komprimierung enthält sie einen durch Kommas getrennten foo(),foo(),42-Ausdruck:

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

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

Durch Kommas getrennter Ausdruck durchgehen

Daher ist das Schrittverhalten identisch:

  • Zwischen reduziertem und erstellten Code.
  • Sie verwenden Quellzuordnungen, um Fehler im minimierten Code in Bezug auf den ursprünglichen Code zu beheben. Mit anderen Worten, wenn Semikolons angezeigt werden, können Sie immer davon ausgehen, sie durchzugehen, auch wenn die tatsächliche Quelle, für die Sie eine Fehlerbehebung durchführen, minimiert ist.

Lokale, geschlossene und globale Immobilien ansehen und bearbeiten

Wenn Sie bei einer Codezeile pausiert sind, können Sie im Bereich Scope (Bereich) die Werte von Properties und Variablen im lokalen, Geschlossenheits- und globalen Bereich aufrufen und bearbeiten.

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

Bereich „Scope“ (Umfang).

Der Bereich Umfang im Screenshot oben ist blau umrandet.

Aktuellen Aufrufstack ansehen

Während Sie bei einer Codezeile pausiert sind, können Sie im Bereich Aufrufstapel den Aufrufstack anzeigen, der Sie zu diesem Punkt geführt hat.

Klicken Sie auf einen Eintrag, um zu der Codezeile zu springen, in der diese Funktion aufgerufen wurde. Das blaue Pfeilsymbol zeigt an, welche Funktion in den Entwicklertools derzeit hervorgehoben ist.

Bereich „Aufrufstapel“.

Der Bereich Aufrufstapel 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. 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 unterbrechen 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ü Frame neu starten aus.

    Wählen Sie im Dropdown-Menü Frame neu starten aus.

Mithilfe des folgenden Codes können Sie verstehen, wie Neustartframe verwendet wird:

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 Funktion bar() erhöht wiederum das Argument.

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

  1. Kopieren Sie den obigen Code in ein neues Snippet und führen Sie es aus. Die Ausführung endet am Haltepunkt der Codezeile debugger.
  2. Beachten Sie, dass der Debugger den aktuellen Wert neben der Funktionsdeklaration anzeigt: value = 1. Der aktuelle Wert neben der Funktionsdeklaration.
  3. Starten Sie den Frame bar() neu. Der Frame „bar()“ wird neu gestartet.
  4. Durch Drücken von F9 die Anweisung zur Werterhöhung durchlaufen. Der aktuelle Wert wird erhöht. 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 festlegen. Sie bearbeiten den Wert im Bereich „Scopes“ (Bereiche).
  6. Versuchen Sie, den Frame bar() neu zu starten und die Inkrementierungsanweisung mehrmals durchzugehen. Der Wert steigt weiter. Starte den Frame „bar()“ noch einmal neu.

Beim Neustart des Frames werden die Argumente nicht zurückgesetzt. Mit anderen Worten: Der Neustart stellt den Ausgangszustand beim Funktionsaufruf nicht wieder her. Stattdessen wird der Ausführungszeiger einfach an den Anfang der Funktion verschoben.

Daher bleibt der aktuelle Argumentwert auch nach Neustarts derselben Funktion im Speicher bestehen.

  1. Starten Sie nun den Frame foo() im Aufrufstack neu. Den Frame foo() neu starten. Wie Sie sehen, lautet der Wert wieder 0. ALT_TEXT_HERE

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

Frames auf der Ignorieren-Liste anzeigen

Standardmäßig zeigt der Bereich Aufrufstack nur die Frames an, die für Ihren Code relevant sind, und lässt Skripts weg, die unter Einstellungen. Einstellungen > Ignorieren-Liste hinzugefügt wurden.

Aufrufstack.

Wenn Sie den vollständigen Aufrufstapel einschließlich Frames von Drittanbietern sehen möchten, aktivieren Sie im Abschnitt Aufrufstack die Option Frames auf der Ignorierliste anzeigen.

Frames auf der Ignorierliste anzeigen.

Probieren Sie es auf dieser Demoseite aus:

  1. Öffnen Sie im Bereich Quellen die Datei src > app > app.component.ts.
  2. Legen Sie einen Haltepunkt an der Funktion increment() fest.
  3. Aktivieren oder deaktivieren Sie im Abschnitt Aufrufstack das Kontrollkästchen Frames auf der Ignorierliste anzeigen und sehen Sie sich die relevante oder vollständige Liste der Frames im Aufrufstack an.

Asynchrone Frames ansehen

Sofern das von Ihnen verwendete Framework unterstützt wird, können die Entwicklertools asynchrone Vorgänge verfolgen, indem beide Teile des asynchronen Codes miteinander verknüpft werden.

In diesem Fall zeigt der Aufrufstack die gesamte Anrufliste einschließlich asynchroner Aufrufframes an.

Frames für asynchrone Aufrufe.

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.

Wählen Sie "Stacktrace kopieren" aus.

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 im Dateibaum navigieren.

Erstellte und bereitgestellte Dateien im Dateibaum gruppieren

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

Um Ihnen die Navigation in den Quellen zu erleichtern, können Sie im Bereich Quellen > Seite die Dateien in zwei Kategorien gruppieren:

  • Codesymbol Erstellt. Ähnlich wie die Quelldateien, die Sie in Ihrer IDE anzeigen. Die Entwicklertools generiert diese Dateien anhand von Quellzuordnungen, die von deinen Build-Tools bereitgestellt werden.
  • Symbol für „Bereitgestellt“ Bereitgestellt. Die tatsächlichen Dateien, die vom Browser gelesen werden. In der Regel werden diese Dateien minimiert.

Wenn Sie die Gruppierung aktivieren möchten, aktivieren Sie im Dreipunkt-Menü oben in der Dateistruktur die Option Dreipunkt-Menü. > Dateien nach „Erstellt/Bereitgestellt“ Experimentell..

Dateien nach „Erstellt“/„Bereitgestellt“ gruppieren.

Quellen auf der Ignorierliste in der Dateistruktur ausblenden

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

Wenn Sie solche Skripts vollständig ausblenden möchten, wählen Sie Quellen > Seite > Dreipunkt-Menü. > Quellen auf der Ignorierliste ausblenden Experimentell. aus.

Vor und nach dem Ausblenden von Quellen auf der Ignorierliste.

Skripte oder Skriptmuster ignorieren

Ignorieren Sie ein Script, um es beim Debugging zu überspringen. Wenn ein Skript ignoriert wird, wird es im Aufrufstack-Bereich verdeckt und Sie greifen beim Durchlaufen des Codes nie in die Funktionen des Skripts ein.

Angenommen, Sie gehen den folgenden Code durch:

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

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

Skript oder Verzeichnis in der Dateistruktur ignorieren

So ignorieren Sie ein einzelnes Skript oder ein gesamtes Verzeichnis:

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

Optionen für ein Verzeichnis oder eine Skriptdatei werden ignoriert.

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

Eine ausgewählte ignorierte Datei zeigt die Schaltflächen „Entfernen“ und „Konfigurieren“.

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

Ein 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 Skript zur Ignorieren-Liste hinzufügen aus.

Ignorieren eines Skripts im Editor-Bereich.

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

Script im Bereich „Aufrufstapel“ 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.

Ignorieren eines Skripts im Bereich „Aufrufstapel“.

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

Script in den Einstellungen ignorieren

Weitere Informationen finden Sie unter Einstellungen. Einstellungen > Ignorieren-Liste.

Code-Snippets für die Fehlerbehebung von jeder Seite aus ausführen

Wenn Sie immer wieder denselben Debug-Code in der Konsole ausführen, sollten Sie Snippets in Betracht ziehen. Snippets sind ausführbare Skripts, die Sie in den Entwicklertools erstellen, speichern und ausführen.

Weitere Informationen finden Sie unter Code-Snippets von beliebigen Seiten ausführen.

Werte benutzerdefinierter JavaScript-Ausdrücke beobachten

Verwenden Sie den Beobachtungsbereich, um die Werte benutzerdefinierter Ausdrücke zu beobachten. Sie können jeden gültigen JavaScript-Ausdruck beobachten.

Im Wiedergabebereich

  • Klicken Sie auf Ausdruck hinzufügen Ausdruck hinzufügen, 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 Ausdruck löschen, um ihn zu löschen.

Skripts prüfen und bearbeiten

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

Außerdem kannst du die Inhalte lokal überschreiben oder einen Arbeitsbereich erstellen und die Änderungen, die du in den Entwicklertools vornimmst, direkt in deinen lokalen Quellen speichern.

Komprimierte Datei lesbar machen

Standardmäßig werden im Steuerfeld Quellen reduzierte Dateien optimiert. Bei der Quelltextformatierung kann der Editor eine einzelne lange Codezeile in mehreren Zeilen anzeigen, wobei - die Zeilenfortsetzung darstellt.

Eine schön gedruckte lange Codezeile, die in mehreren Zeilen angezeigt wird, mit einem '-' für die Zeilenfortsetzung.

Wenn Sie sich das minimierte Feld während des Ladevorgangs ansehen möchten, klicken Sie links unten im Editor auf { }.

Codeblöcke ausblenden

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

Klicken Sie neben dem Codeblock auf das {...}, um den Codeblock aufzuklappen.

Dieses Verhalten können Sie unter Einstellungen. Einstellungen > Einstellungen > Quellen konfigurieren.

Script bearbeiten

Bei der Behebung eines Fehlers möchten Sie häufig Ä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 Ihr Skript in den Entwicklertools bearbeiten.

So bearbeiten Sie ein Script:

  1. Öffnen Sie die Datei im Bereich Editor des Bereichs Quellen.
  2. Nehmen Sie die gewünschten Änderungen im Bereich Editor vor.
  3. Drücken Sie zum Speichern die Tastenkombination Befehlstaste + S (Mac) oder Strg + S (Windows, Linux). Die Entwicklertools patchen die gesamte JS-Datei in der JavaScript-Engine von Chrome.

    Der Bereich „Editor“.

    Der Editor-Bereich im Screenshot oben ist blau umrandet.

Pausierte Funktion live bearbeiten

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

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

So bearbeiten Sie eine Funktion live:

  1. Pausieren Sie die Ausführung mit einem Haltepunkt.
  2. Bearbeiten Sie die pausierte Funktion.
  3. Drücken Sie die Befehlstaste bzw. 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.

Die Variablen addend1 und addend2 in diesem Beispiel haben anfänglich den falschen Typ string. Anstatt Zahlen zu addieren, werden die Zeichenfolgen also verkettet. Um das Problem zu beheben, werden die parseInt()-Funktionen während der Live-Bearbeitung hinzugefügt.

So suchen Sie in einem Skript nach Text:

  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, Linux).
  3. Geben Sie in der Leiste Ihre Suchanfrage ein. Suche: Optional haben Sie folgende Möglichkeiten:
    • Klicken Sie auf Achten Sie auf Groß- und Kleinschreibung. Groß-/Kleinschreibung beachten, damit die Groß-/Kleinschreibung bei der Suchanfrage berücksichtigt wird.
    • Klicken Sie auf Schaltfläche für reguläre Ausdrücke. 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 Aufwärts- oder Abwärtspfeiltaste.

So ersetzen Sie den gefundenen Text:

  1. Klicken Sie in der Suchleiste auf die Schaltfläche Ersetzen. Ersetzen. Ersetzen.
  2. Geben Sie den Text ein, durch den 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.