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 von Klassen-/Funktionsattributen anzeigen, wenn der Mauszeiger darauf bewegt wird

Bewegen Sie den Mauszeiger während der pausierten Ausführung auf den Namen einer Klasse oder Funktion, um eine Vorschau der Eigenschaften zu sehen.

Schritt-für-Schritt-Code

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

Über die Codezeile wechseln

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 pausiert wird, die einen Funktionsaufruf enthält, der mit dem von Ihnen behandelten Problem klicken Sie auf Step into , um diese Funktion zu untersuchen weiter ausbauen.

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 (In Code einsteigen) klicken, wird diese Codezeile in den Entwicklertools ausgeführt und dann bei B angehalten.

Codezeile verlassen

Wenn der Vorgang innerhalb einer Funktion pausiert wird, die nicht mit dem Problem zusammenhängt, für das Sie eine Fehlerbehebung durchführen, klicken Sie auf Schritt Out , um den Rest Code der Funktion.

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 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 eine Codezeile festlegen. Haltepunkt in der gewünschten Zeile und klicken Sie dann auf Skriptausführung fortsetzen. , aber es gibt einen schnelleren Weg.

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

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 ausgeführt, falls vorhanden.

Skriptausführung erzwingen

Um alle Haltepunkte zu ignorieren und die Ausführung des Skripts zu erzwingen, klicken Sie auf Skript fortsetzen Ausführung und wählen Sie dann Skriptausfü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 wurden an einem Haltepunkt sowohl im Hauptskript als auch im Dienst pausiert. Worker-Skript. 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

Durch kommagetrennte Ausdrücke können Sie reduzierten Code debuggen. Betrachten Sie zum Beispiel den folgenden Code:

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 auf die gleiche Weise 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, Geschlossenheits- und globale Eigenschaften anzeigen und bearbeiten

Während das Video bei einer Codezeile pausiert ist, können Sie im Bereich Umfang die Werte von Properties und Variablen im lokalen, Geschlossenheits- und globalen Geltungsbereich.

• 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

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

Klicken Sie auf einen Eintrag, um zu der 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. Das heißt, 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 Aufrufstack mit der rechten Maustaste auf eine Funktion und wählen Sie im Drop-down-Menü die Option 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 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. Der Debugger zeigt neben der Funktionsdeklaration den aktuellen Wert an: value = 1.
3. Starten Sie 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. 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. 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. Beachten Sie, dass der Wert wieder 0 ist.

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

Frames auf der Ignorieren-Liste anzeigen

Im Bereich Call Stack (Anrufstapel) werden standardmäßig nur die Frames angezeigt, die für Ihren Code relevant sind. Scripts, die unter  Einstellungen > Ignorierliste 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 Call Stack 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 den gesamten Aufrufverlauf einschließlich asynchroner Aufrufframes an.

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)

In der Dateistruktur navigieren

Verwenden Sie den Bereich Seite, um sich im Dateibaum zu bewegen.

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 Sie bei der Navigation durch die Quellen zu unterstützen, klicken Sie auf Quellen > Im Bereich Seite können die Dateien in zwei Kategorien gruppiert werden:

• Autor Ä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. 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 ausschließlich auf den von Ihnen erstellten Code konzentrieren können, klicken Sie auf Quellen > Im Bereich Seite werden alle Skripts oder Verzeichnisse angezeigt, die unter Einstellungen > Ignorieren-Liste.

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 Skript, um es bei der Fehlerbehebung zu überspringen. Wird ein Script ignoriert, werden im Bereich Aufrufstack ausgeblendet und Sie gelangen niemals zu den Funktionen des Skripts, wenn Sie über Ihren Code.

Angenommen, Sie führen diesen Code durch:

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

A ist eine Drittanbieterbibliothek, der Sie vertrauen. Wenn Sie sicher sind, dass das Problem, nicht mit der Drittanbieter-Bibliothek in Verbindung steht, ist es sinnvoll, das Skript zu ignorieren.

Skript oder Verzeichnis in der Dateistruktur ignorieren

So ignorieren Sie ein einzelnes Script oder ein ganzes Verzeichnis:

1. Gehen Sie unter Quellen > Seite, klicken Sie 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 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.

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

Unter Einstellungen > können Sie ein Script aus der Liste der ignorierten Skripts entfernen. Liste zu ignorierender Nutzer

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 sich jeden gültigen JavaScript-Ausdruck ansehen.

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

Scripts 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 Ihren Code durchsuchen und bearbeiten.

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

Minimierte Datei lesbar machen

Im Bereich Quellen werden standardmäßig minimierte Dateien in einer lesbaren Form 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.

Wenn Sie die minimierte Datei sehen möchten, während 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.

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

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 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 die Tastenkombination Befehlstaste + S (Mac) oder Strg + S (Windows, Linux) Speichern. 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 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. 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. 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 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. 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. 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 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.