Verwenden Sie Haltepunkte, um Ihren JavaScript-Code zu pausieren. In diesem Leitfaden werden alle Arten von Haltepunkten erläutert, die die in den Entwicklertools verfügbar sind. Ein interaktives Tutorial zum Debugging finden Sie unter Erste Schritte mit der JavaScript-Fehlersuche in den Chrome-Entwicklertools.
Übersicht über die Verwendung der einzelnen Haltepunkttypen
Die bekannteste Art von Haltepunkt ist die Codezeile. Codezeilen-Haltepunkte können jedoch ineffizient ist, besonders wenn Sie nicht genau wissen, wo Sie suchen sollen, oder wenn Sie mit einem die eine große Codebasis haben. Sie können bei der Fehlerbehebung Zeit sparen, indem Sie wissen, wie und wann Sie die anderen Arten von Haltepunkten.
Haltepunkttyp | Verwenden Sie diese Funktion, wenn Sie ... |
---|---|
Codezeile | Halten Sie an einer bestimmten Code-Region an. |
Bedingte Codezeile | Halten Sie den Vorgang für eine bestimmte Coderegion an, aber nur, wenn eine andere Bedingung erfüllt ist. |
Logpoint | Protokollieren Sie eine Nachricht in der Konsole, ohne die Ausführung zu unterbrechen. |
DOM | Halten Sie den Code an, der einen bestimmten DOM-Knoten oder seine untergeordneten Elemente ändert oder entfernt. |
XHR | Pausieren, wenn eine XHR-URL ein Zeichenfolgenmuster enthält. |
Ereignis-Listener | Halten Sie den Code an, der nach dem Auslösen eines Ereignisses, z. B. click , ausgeführt wird. |
Ausnahme | Halten Sie bei der Codezeile an, die eine erfasste oder nicht abgefangene Ausnahme auslöst. |
Funktion | Wird bei jedem Aufruf einer bestimmten Funktion angehalten. |
Vertrauenswürdiger Typ | Bei Verstößen gegen den vertrauenswürdigen Typ pausieren. |
Haltepunkte der Codezeile
Verwenden Sie einen Code-Breakpoint, wenn Sie die genaue Code-Region kennen, die Sie untersuchen müssen. Die Entwicklertools pausiert immer, bevor diese Codezeile ausgeführt wird.
So legst du in den Entwicklertools einen Haltepunkt für eine Codezeile fest:
- Klicken Sie auf den Bereich Quellen.
- Öffnen Sie die Datei mit der Codezeile, die Sie unterbrechen möchten.
- Gehen Sie zur Codezeile.
- Links neben der Codezeile befindet sich die Spalte mit der Zeilennummer. Klicken Sie darauf. Ein blaues Symbol erscheint auf in die Spalte mit der Zeilennummer.
Dieses Beispiel zeigt einen Haltepunkt für eine Codezeile, der in Zeile 29 gesetzt wird.
Codezeile-Haltepunkte im Code
Rufen Sie debugger
über Ihren Code auf, um in dieser Zeile eine Pause zu machen. Dies entspricht einer Codezeile
Haltepunkt, außer dass der Haltepunkt im Code und nicht in der Entwicklertools-UI festgelegt wurde.
console.log('a');
console.log('b');
debugger;
console.log('c');
Bedingte Code-Haltepunkte
Verwenden Sie einen bedingten Codezeilen-Haltepunkt, wenn Sie die Ausführung stoppen möchten, aber nur, wenn eine Bedingung erfüllt ist.
Solche Haltepunkte sind nützlich, wenn Sie Pausen überspringen möchten, die für Ihren Fall irrelevant sind, insbesondere in einer Schleife.
So legen Sie einen bedingten Codezeilen-Haltepunkt fest:
- Öffnen Sie den Bereich Quellen.
- Öffnen Sie die Datei mit der Codezeile, die Sie unterbrechen möchten.
- Gehen Sie zur Codezeile.
- Links neben der Codezeile befindet sich die Spalte mit der Zeilennummer. Klicken Sie mit der rechten Maustaste darauf.
- Wählen Sie Bedingten Haltepunkt hinzufügen aus. Unter der Codezeile wird ein Dialogfeld angezeigt.
- Geben Sie die Bedingung in das Dialogfeld ein.
- Drücken Sie die Eingabetaste, um den Haltepunkt zu aktivieren. Über der Spalte mit der Zeilennummer wird ein orangefarbenes Symbol mit einem Fragezeichen angezeigt.
Dieses Beispiel zeigt einen bedingten Code-Breakpoint, der nur ausgelöst wurde, wenn x
bei der Iteration i=6
in einer Schleife 10
überschritten hat.
Codezeile-Haltepunkte protokollieren
Verwenden Sie Code-Haltepunkte (Logpoints), um Nachrichten in der Console zu protokollieren, ohne die Ausführung zu unterbrechen und Ihren Code nicht mit console.log()
-Aufrufen zu überladen.
So legen Sie einen Logpoint fest:
- Öffnen Sie den Bereich Quellen.
- Öffnen Sie die Datei mit der Codezeile, die Sie unterbrechen möchten.
- Gehen Sie zur Codezeile.
- Links neben der Codezeile befindet sich die Spalte mit der Zeilennummer. Klicken Sie mit der rechten Maustaste darauf.
- Wählen Sie Logpoint hinzufügen aus. Unter der Codezeile wird ein Dialogfeld angezeigt.
Geben Sie im Dialogfeld Ihre Lognachricht ein. Sie können dieselbe Syntax wie für einen
console.log(message)
-Aufruf verwenden.Sie können beispielsweise Folgendes protokollieren:
"A string " + num, str.length > 1, str.toUpperCase(), obj
In diesem Fall lautet die protokollierte Nachricht:
// str = "test" // num = 42 // obj = {attr: "x"} A string 42 true TEST {attr: 'x'}
Drücken Sie die Eingabetaste, um den Haltepunkt zu aktivieren. Über der Spalte mit der Zeilennummer wird ein rosa Symbol mit zwei Punkten angezeigt.
Dieses Beispiel zeigt einen Logpoint in Zeile 30, der einen String und einen Variablenwert in der Console protokolliert.
Codezeile-Haltepunkte bearbeiten
Im Bereich Haltepunkte können Sie Code-Haltepunkte deaktivieren, bearbeiten oder entfernen.
Gruppen von Haltepunkten bearbeiten
Im Abschnitt Haltepunkte werden die Haltepunkte nach Datei gruppiert und nach Zeilen- und Spaltennummern sortiert. Mit Gruppen haben Sie folgende Möglichkeiten:
- Wenn Sie eine Gruppe minimieren oder maximieren möchten, klicken Sie auf ihren Namen.
- Wenn Sie eine Gruppe oder einen Haltepunkt einzeln aktivieren oder deaktivieren möchten, klicken Sie neben der Gruppe oder dem Haltepunkt auf das
.
- Um eine Gruppe zu entfernen, bewegen Sie den Mauszeiger darauf und klicken Sie auf
.
In diesem Video wird gezeigt, wie Sie Gruppen minimieren und die Haltepunkte einzeln oder gruppenweise deaktivieren oder aktivieren. Wenn Sie einen Haltepunkt deaktivieren, wird seine Markierung im Steuerfeld Quellen neben der Zeilennummer transparent.
Gruppen haben Kontextmenüs. Klicken Sie im Abschnitt Haltepunkte mit der rechten Maustaste auf eine Gruppe und wählen Sie Folgendes aus:
- Entfernen Sie alle Haltepunkte in der Datei (Gruppe).
- Alle Haltepunkte in der Datei deaktivieren.
- Alle Haltepunkte in Datei aktivieren.
- Entfernen Sie alle Haltepunkte (in allen Dateien).
- Entfernen Sie andere Haltepunkte (in anderen Gruppen).
Haltepunkte bearbeiten
So bearbeiten Sie einen Haltepunkt:
- Klicken Sie neben einem Haltepunkt auf
, um ihn zu aktivieren oder zu deaktivieren. Wenn Sie einen Haltepunkt deaktivieren, wird seine Markierung im Steuerfeld Quellen neben der Zeilennummer transparent.
- Bewegen Sie den Mauszeiger auf einen Haltepunkt und klicken Sie auf
, um ihn zu bearbeiten, und auf
, um ihn zu entfernen.
Wenn Sie einen Haltepunkt bearbeiten, ändern Sie seinen Typ aus der Drop-down-Liste im Inline-Editor.
Klicken Sie mit der rechten Maustaste auf einen Haltepunkt, um sein Kontextmenü anzuzeigen, und wählen Sie eine der folgenden Optionen aus:
- Standort anzeigen.
- Bedingung oder Logpoint bearbeiten
- Alle Haltepunkte aktivieren.
- Deaktivieren Sie alle Haltepunkte.
- Haltepunkt entfernen.
- Entfernen Sie andere Haltepunkte (in allen Dateien).
- Entfernen Sie alle Haltepunkte (in allen Dateien).
Im Video werden verschiedene Haltepunktbearbeitungen in Aktion gezeigt: Deaktivieren, Entfernen, Bearbeiten der Bedingung, Position im Menü anzeigen und Typ ändern.
Haltepunkte mit „Hier nie pausieren“ überspringen
Verwenden Sie den Haltepunkt Hier nie pausieren in der Codezeile, um Pausen zu überspringen, die aus anderen Gründen auftreten. Dies kann nützlich sein, wenn Sie Haltepunkte für Ausnahmen aktiviert haben, der Debugger jedoch bei einer besonders lauten Ausnahme anhält, für die Sie keine Fehlerbehebung durchführen möchten.
So schalten Sie eine Pause stumm:
- Öffnen Sie im Bereich Quellen die Quelldatei und suchen Sie die Zeile, die nicht unterbrochen werden soll.
- Klicken Sie links in der Spalte mit der Zeilennummer neben der Anweisung, die den Zeilenumbruch verursacht, mit der rechten Maustaste auf die Zeilennummer.
- Wählen Sie im Drop-down-Menü Nie hier pausieren aus. Neben der Zeile wird ein orangefarbener (bedingter) Haltepunkt angezeigt.
Sie können den Haltepunkt auch stummschalten, während die Ausführung pausiert ist. Im nächsten Video erfahren Sie mehr über den Workflow.
Mit der Option Hier nie pausieren können Sie Debugger-Anweisungen und alle anderen Haltepunkte mit Ausnahme von Haltepunkten mit Codezeilen und Haltepunkte für Ereignis-Listener ausblenden.
Hier nie pausieren kann bei einer Zeile mit mehreren Anweisungen fehlschlagen, wenn sich die Anweisung, die nicht pausieren soll, von der Anweisung unterscheidet, die die Pause verursacht. Im Quellcode mit Zuordnung entspricht nicht jede Haltepunktposition der ursprünglichen Anweisung, die den Fehler verursacht.
Haltepunkte für DOM-Änderung
Verwenden Sie einen Haltepunkt für die DOM-Änderung, wenn Sie den Code anhalten möchten, der einen DOM-Knoten oder seinen Kinder.
So legen Sie einen Haltepunkt für die DOM-Änderung fest:
- Klicken Sie auf den Tab Elements.
- Gehen Sie zu dem Element, für das Sie den Haltepunkt setzen möchten.
- Klicken Sie mit der rechten Maustaste auf das Element.
- Bewegen Sie den Mauszeiger auf Break on (Unterbrechen bei) und wählen Sie Unterstrukturänderungen, Attributänderungen oder Knotenentfernung
Dieses Beispiel zeigt das Kontextmenü zum Erstellen eines Haltepunkts für die DOM-Änderung.
Eine Liste der Haltepunkte für DOM-Änderungspunkte finden Sie hier:
- Elements > Bereich DOM-Haltepunkte:
- Quellen > Seitenleiste DOM-Haltepunkte.
Hier haben Sie folgende Möglichkeiten:
- Aktivieren oder deaktivieren Sie sie mit
.
- Rechtsklick > Entfernen oder Zeigen Sie sie im DOM.
Arten von Haltepunkten für DOM-Änderungen
- Änderungen der Unterstruktur: Wird ausgelöst, wenn ein untergeordnetes Element des aktuell ausgewählten Knotens entfernt oder oder der Inhalt eines untergeordneten Elements geändert wird. nicht bei Attributänderungen untergeordneter Knoten ausgelöst werden oder bei allen Änderungen am aktuell ausgewählten Knoten.
- Attributänderungen: Wird ausgelöst, wenn ein Attribut auf der aktuell ausgewählten Knoten oder wenn sich ein Attributwert ändert.
- Knotenentfernung: Wird ausgelöst, wenn der aktuell ausgewählte Knoten entfernt wird.
XHR/fetch-Haltepunkte
Verwenden Sie einen XHR/fetch-Haltepunkt, wenn Sie eine Pause einlegen möchten, wenn die Anfrage-URL einer XHR einen angegebenen
. Die Entwicklertools werden bei der Codezeile angehalten, in der die XHR send()
aufruft.
Dies ist zum Beispiel hilfreich, wenn Sie feststellen, dass Ihre Seite eine falsche URL anfordert, und Sie schnell den AJAX- oder Fetch-Quellcode finden möchten, der die falsche Anforderung verursacht.
So legen Sie einen XHR/fetch-Haltepunkt fest:
- Klicken Sie auf den Bereich Quellen.
- Maximieren Sie den Bereich XHR Breakpoints.
- Klicken Sie auf
Haltepunkt hinzufügen.
- Geben Sie die Zeichenfolge ein, die unterbrochen werden soll. Die Entwicklertools werden pausiert, wenn dieser String vorhanden ist irgendwo in der XHR-Anforderungs-URL.
- Drücken Sie zur Bestätigung die Eingabetaste.
Dieses Beispiel zeigt, wie Sie einen XHR/fetch-Haltepunkt in den XHR/fetch Breakpoints für jede Anfrage erstellen, die
org
in der URL.
Event-Listener-Haltepunkte
Verwenden Sie Event-Listener-Haltepunkte, wenn Sie beim Ereignis-Listener-Code, der nach einem
ausgelöst wird. Sie können bestimmte Ereignisse wie click
oder Ereigniskategorien auswählen, z. B.
alle Mausereignisse enthalten.
- Klicken Sie auf den Bereich Quellen.
- Maximieren Sie den Bereich Ereignis-Listener-Haltepunkte. In den Entwicklertools wird eine Liste von Ereigniskategorien angezeigt, z. B. als Animation.
- Aktivieren Sie eine dieser Kategorien, damit sie pausiert wird, wenn ein Ereignis aus dieser Kategorie ausgelöst wird, oder maximieren Sie die Kategorie. und überprüfen Sie ein bestimmtes Ereignis.
In diesem Beispiel wird gezeigt, wie Sie einen Event-Listener-Haltepunkt für deviceorientation
erstellen.
Darüber hinaus pausiert der Debugger bei Ereignissen, die in Web Workern oder Worklets beliebiger Art, einschließlich Shared Storage Worklets, auftreten.
In diesem Beispiel wird der Debugger bei einem setTimer
-Ereignis pausiert, das in einem Service Worker aufgetreten ist.
Eine Liste der Event-Listener finden Sie auch unter Elements > Bereich Ereignis-Listener.
Haltepunkte für Ausnahmen
Verwenden Sie Ausnahme-Haltepunkte, wenn Sie bei der Codezeile anhalten möchten, die einen nicht abgefangene Ausnahme. Sie können diese beiden Ausnahmen unabhängig von Node.js in jeder Debug-Sitzung anhalten.
Aktivieren Sie im Bereich Haltepunkte des Bereichs Quellen eine oder beide der folgenden Optionen und führen Sie dann den Code aus:
Setzen Sie ein Häkchen bei
Bei nicht abgefangenen Ausnahmen anhalten.
In diesem Beispiel wird die Ausführung bei einer nicht abgefangenen Ausnahme angehalten.
Setzen Sie ein Häkchen bei
Bei erkannten Ausnahmen anhalten.
In diesem Beispiel wird die Ausführung bei einer erfassten Ausnahme angehalten.
Ausnahmen bei asynchronen Aufrufen
Wenn eines oder beide Kästchen aktiviert sind, versucht der Debugger, bei den entsprechenden Ausnahmen in synchronen und asynchronen Aufrufen eine Pause zu machen. Im asynchronen Fall sucht der Debugger in den Promis nach Ablehnungs-Handlern, um zu bestimmen, wann er beendet werden soll.
Abgefangene Ausnahmen und ignorierter Code
Wenn die Ignorierliste aktiviert ist, pausiert der Debugger bei Ausnahmen, die entweder in nicht ignorierten Frames erfasst werden oder einen solchen Frame im Aufrufstack durchlaufen.
Das nächste Beispiel zeigt, wie der Debugger bei einer erfassten Ausnahme pausiert wird, die von der ignorierten library.js
ausgelöst wird und die nicht ignorierte mycode.js
durchläuft.
Wenn Sie mehr über das Verhalten von Debugger in Grenzfällen erfahren möchten, testen Sie auf dieser Demoseite eine Reihe von Szenarien.
Funktionshaltepunkte
Rufen Sie debug(functionName)
auf, wobei functionName
die Funktion ist, die Sie debuggen möchten,
wird immer dann angehalten, wenn eine bestimmte Funktion aufgerufen wird. Sie können debug()
in Ihren Code einfügen (z. B.
console.log()
) oder über die Entwicklertools-Konsole aufrufen. debug()
entspricht der Einstellung
Einen Code-Zeilenhaltepunkt in der ersten Zeile der Funktion
function sum(a, b) {
let result = a + b; // DevTools pauses on this line.
return result;
}
debug(sum); // Pass the function object, not a string.
sum();
Achten Sie darauf, dass die Zielfunktion im Umfang liegt
Die Entwicklertools geben ReferenceError
aus, wenn die Funktion, die du debuggen möchtest, nicht im Geltungsbereich liegt.
(function () {
function hey() {
console.log('hey');
}
function yo() {
console.log('yo');
}
debug(yo); // This works.
yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.
Es kann schwierig sein sicherzustellen, dass die Zielfunktion im Umfang liegt, wenn du debug()
über die Entwicklertools aufrufst
Konsole. Hier ist eine Strategie:
- Legen Sie an der Stelle, an der die Funktion enthalten ist, einen Haltepunkt für die Codezeile fest.
- Lösen Sie den Haltepunkt aus.
- Rufe in der Entwicklertools-Konsole
debug()
auf, während der Code in deiner Codezeile noch pausiert ist Haltepunkt an.
Haltepunkte des vertrauenswürdigen Typs
Die Trusted Type API bietet Schutz vor Sicherheitsfunktionen Exploits, die als Cross-Site-Scripting-Angriffe (XSS) bezeichnet werden.
Gehen Sie im Abschnitt Breakpoints des Bereichs Quellen zum Abschnitt CSP Violation Breakpoints (Haltepunkte für CSPs), aktivieren Sie eine oder beide der folgenden Optionen und führen Sie dann den Code aus:
Prüfen Sie
Verstöße für Senken.
In diesem Beispiel wird die Ausführung bei einem Senkenverstoß pausiert.
Sehen Sie sich
Richtlinienverstöße an.
In diesem Beispiel wird die Ausführung bei einem Richtlinienverstoß pausiert. Richtlinien für vertrauenswürdige Typen werden mit
trustedTypes.createPolicy
eingerichtet.
Weitere Informationen zur Verwendung der API finden Sie hier:
- Weitere Informationen zu Ihren Sicherheitszielen finden Sie unter DOM-basierte Cross-Site-Scripting-Sicherheitslücken mit vertrauenswürdigen Typen verhindern.
- Informationen zur Fehlerbehebung finden Sie unter Fehlerbehebung für CSP und vertrauenswürdige Typen in Chrome-Entwicklertools implementieren.