JavaScript-Debugging-Referenz

Kayce Basques

Sofia Emelianova

Mit dieser umfassenden Referenz zur Fehlerbehebung in den Chrome-Entwicklertools neue Workflows für die Fehlerbehebung entdecken Funktionen.

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 ausgewerteten 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 den 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 er bei einer Codezeile pausiert wird, die eine Funktion enthält, die für das Problem nicht relevant ist klicken Sie auf Step over zum Ausführen der Funktion ohne es zu versuchen.

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. Durch Drücken von Step over führt die Entwicklertools den gesamten Code in der Funktion aus, Du übergehst: B und C. Die Entwicklertools werden dann am D pausiert.

In 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 klicken, führt die Entwicklertools diese Codezeile aus und pausiert bei B

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. Durch Klicken auf Step out (Schritt aus) führt DevTools den Rest des Codes in getName(), was in diesem Beispiel nur B ist und dann am C pausiert wird.

Gesamten Code bis zu einer bestimmten Zeile ausführen

Beim Debuggen einer langen Funktion gibt es möglicherweise viel Code, der nicht mit dem Problem zusammenhängt, das Sie Debugging.

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 ein 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 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 Skriptausführung nach einer Pause fortsetzen möchten, klicken Sie auf Skriptausführung fortsetzen. DevTools Führt das Skript bis zum nächsten Haltepunkt aus, 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. .

Thread-Kontext ändern

Wenn Sie mit Web Workern oder Service Workern arbeiten, klicken Sie auf einen Kontext im Bereich Threads, um um zu diesem Kontext zu wechseln. Der blaue Pfeil zeigt an, welcher Kontext gerade ausgewählt ist.

Der Bereich Threads im obigen Screenshot ist 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 Attribute für den Service Worker-Kontext aufrufen, wird im Bereich „Quellen“ der Kontext des Hauptskripts angezeigt. Durch Klicken auf den Service Worker-Eintrag im Threads-Bereich können Sie zu diesem Kontext 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 erstellten Code
• Sie verwenden Source Maps, 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, sie nacheinander auszuführen, 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 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 Attribute sind ausgegraut.

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

Aktuellen Aufrufstack ansehen

Während das Video bei einer Codezeile pausiert ist, 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 stellt dar, 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 zu verstehen, wie Frame neu starten funktioniert:

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. Beachten Sie, dass der Wert wieder 0 ist.

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 unter Einstellungen > Liste zu ignorierender Nutzer

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 den src > app > app.component.ts-Datei.
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 Aufruf zu kopieren. in die Zwischenablage einfügen.

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 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:

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

Um die Gruppierung zu aktivieren, aktivieren Sie den . > Dateien nach erstellt/bereitgestellt unter dem Dreipunkt-Menü oben in der Dateistruktur gruppieren.

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

Skript oder Muster von Skripts ignorieren

Ignorieren Sie ein Skript, um es bei der Fehlerbehebung zu überspringen. Wird ein Script ignoriert, im Bereich Aufrufstack ausgeblendet und Sie gelangen niemals zu den Funktionen des Skripts, wenn Sie über Ihren Code.

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, 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 Skript 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 Skripts unter Einstellungen > aus der Liste entfernen. Liste zu ignorierender Nutzer

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.

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

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.

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 > Liste zu ignorierender Nutzer

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 von benutzerdefinierten JavaScript-Ausdrücken beobachten

Im Überwachungsbereich können Sie die Werte benutzerdefinierter Ausdrücke überwachen. Sie können jedes gültige JavaScript beobachten, Ausdruck.

• Klicken Sie auf Ausdruck hinzufügen. um einen neuen Watch-Ausdruck 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.

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 Änderungen, die Sie in den Entwicklertools vornehmen, 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.

Wenn Sie die minimierte Datei sehen möchten, während sie geladen wurde, klicken Sie links unten 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 {...}.

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

Skript bearbeiten

Bei der Behebung eines Fehlers möchten Sie oft einige Änderungen an Ihrem JavaScript-Code testen. Sie benötigen keine um die Änderungen in einem externen Browser vorzunehmen. Aktualisieren Sie anschließend die Seite. Sie können Ihr Skript in Entwicklertools.

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. Mit den Entwicklertools wird die gesamte JS-Datei in die 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. Optional: <ph type="x-smartling-placeholder">
   </ph>
   • 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.