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.
Sie können die Console verwenden, um die ausgewerteten Variablen, Konstanten und Objekte abzufragen.
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.
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 , um die Funktion auszuführen, ohne die Funktion aufzurufen.
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 (), 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;
}
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 , um den restlichen Code der Funktion 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
}
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 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.
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, sofern vorhanden.
Skriptausführung erzwingen
Wenn Sie alle Haltepunkte ignorieren und die Ausführung des Skripts erzwingen möchten, klicken Sie auf Skriptausführung fortsetzen 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, 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 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.
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.
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.
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:
- Funktionsausführung an einem Haltepunkt unterbrechen Im Bereich Aufrufstack wird die Reihenfolge der Funktionsaufrufe aufgezeichnet.
Klicken Sie im Bereich Aufrufstack mit der rechten Maustaste auf eine Funktion und wählen Sie im Drop-down-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:
- Kopieren Sie den obigen Code in ein neues Snippet und führen Sie es aus. Die Ausführung endet am Haltepunkt der Codezeile
debugger
. - Beachten Sie, dass der Debugger den aktuellen Wert neben der Funktionsdeklaration anzeigt:
value = 1
. - Starten Sie den Frame
bar()
neu. - Durch Drücken von
F9
die Anweisung zur Werterhöhung durchlaufen. Der aktuelle Wert erhöht sich:value = 2
. - Optional können Sie im Bereich Umfang auf den Wert doppelklicken, um ihn zu bearbeiten, und den gewünschten Wert festlegen.
Versuchen Sie, den Frame
bar()
neu zu starten und die Inkrementierungsanweisung mehrmals durchzugehen. Der Wert steigt weiter.
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.
- Starten Sie nun den Frame
foo()
im Aufrufstack neu. Wie Sie sehen, lautet der Wert wieder0
.
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 > Ignorieren-Liste hinzugefügt wurden.
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.
Probieren Sie es auf dieser Demoseite aus:
- Öffnen Sie im Bereich Quellen die Datei
src
>app
>app.component.ts
. - Legen Sie einen Haltepunkt an der Funktion
increment()
fest. - 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.
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 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:
- 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.
- 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 > Dateien nach „Erstellt/Bereitgestellt“ .
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 > Ignorieren-Liste hinzugefügt wurden, standardmäßig ausgegraut.
Wenn Sie solche Skripts vollständig ausblenden möchten, wählen Sie Quellen > Seite > > Quellen auf der Ignorierliste ausblenden aus.
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:
- Klicken Sie unter Quellen > Seite mit der rechten Maustaste auf ein Verzeichnis oder eine Skriptdatei.
- Wählen Sie Verzeichnis/Skript zur Ignorieren-Liste hinzufügen aus.
Wenn Sie Quellen auf der Ignorierliste nicht ausgeblendet haben, können Sie eine solche Quelle in der Dateistruktur auswählen und im Warnbanner auf Aus Ignorierte Liste entfernen oder Konfigurieren klicken.
Andernfalls können Sie ausgeblendete und ignorierte Verzeichnisse und Skripts unter Einstellungen > Ignorieren-Liste aus der Liste entfernen.
Ein Script im Editor-Bereich ignorieren
So ignorieren Sie ein Script im Bereich Editor:
- Öffnen Sie die Datei.
- Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle.
- 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 > Ignorieren-Liste auf.
Script im Bereich „Aufrufstapel“ ignorieren
So ignorieren Sie ein Skript im Bereich Aufrufstack:
- Klicken Sie mit der rechten Maustaste auf eine Funktion im Skript.
- 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 > Ignorieren-Liste auf.
Script in den Einstellungen ignorieren
Weitere Informationen finden Sie unter 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.
- 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 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.
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.
Klicken Sie neben dem Codeblock auf das {...}
, um den Codeblock aufzuklappen.
Dieses Verhalten können Sie unter 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:
- Öffnen Sie die Datei im Bereich Editor des Bereichs Quellen.
- Nehmen Sie die gewünschten Änderungen im Bereich Editor vor.
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 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:
- Pausieren Sie die Ausführung mit einem Haltepunkt.
- Bearbeiten Sie die pausierte Funktion.
- Drücken Sie die Befehlstaste bzw. Strg + S, um die Änderungen zu übernehmen. Der Debugger startet die Funktion automatisch neu.
- 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.
Text in einem Skript suchen und ersetzen
So suchen Sie in einem Skript nach Text:
- Öffnen Sie die Datei im Bereich Editor des Bereichs Quellen.
- Um eine integrierte Suchleiste zu öffnen, drücken Sie Befehlstaste + F (Mac) oder Strg + F (Windows, Linux).
- Geben Sie in der Leiste Ihre Suchanfrage ein.
Optional haben Sie folgende Möglichkeiten:
- Klicken Sie auf Groß-/Kleinschreibung beachten, damit die Groß-/Kleinschreibung bei der Suchanfrage berücksichtigt wird.
- Klicken Sie auf Regulären Ausdruck verwenden, um anhand eines regulären Ausdrucks zu suchen.
- 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:
- Klicken Sie in der Suchleiste auf die Schaltfläche Ersetzen.
- 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.