Verwende Haltepunkte, um deinen JavaScript-Code zu pausieren. In diesem Leitfaden werden alle in den Entwicklertools verfügbaren Haltepunkttypen erläutert. Außerdem erfahren Sie, wann Sie welche Typen verwenden und wie Sie sie festlegen. Eine interaktive Anleitung zum Debugging finden Sie unter Erste Schritte mit der JavaScript-Fehlerbehebung in den Chrome-Entwicklertools.
Verwendung der einzelnen Haltepunkttypen
Der bekannteste Haltepunkttyp ist die Codezeile. Das Festlegen von Haltepunkten für die Codezeile kann jedoch ineffizient sein, insbesondere wenn Sie nicht genau wissen, wo Sie suchen müssen, oder wenn Sie mit einer großen Codebasis arbeiten. Sie können bei der Fehlerbehebung Zeit sparen, wenn Sie wissen, wie und wann die anderen Arten von Haltepunkten verwendet werden sollen.
| Haltepunkttyp | Verwenden Sie diese Option, wenn Sie ... |
|---|---|
| Codezeile | Pausieren Sie in einer bestimmten Coderegion. |
| Bedingte Codezeile | Pausieren in einer bestimmten Coderegion, aber nur, wenn eine andere Bedingung erfüllt ist. |
| Logpoint | Es wird eine Nachricht in der Console protokolliert, ohne die Ausführung zu unterbrechen. |
| DOM | Pausieren Sie den Code, mit dem ein bestimmter DOM-Knoten oder seine untergeordneten Elemente geändert oder entfernt werden. |
| XHR | Pausieren, wenn eine XHR-URL ein Zeichenfolgenmuster enthält. |
| Event-Listener | Pause für den Code, der nach dem Auslösen eines Ereignisses wie click ausgeführt wird. |
| Ausnahme | Halten Sie in der Codezeile an, die eine erfasste oder nicht abgefangene Ausnahme auslöst. |
| Funktion | Pausieren, wann immer eine bestimmte Funktion aufgerufen wird. |
| Vertrauenswürdiger Typ | Bei Verstößen gegen den vertrauenswürdigen Typ pausieren. |
Haltepunkte der Codezeile
Verwenden Sie einen Haltepunkt in Form einer Codezeile, wenn Sie genau wissen, welche Coderegion Sie untersuchen müssen. Die Entwicklertools werden immer pausiert, bevor diese Codezeile ausgeführt wird.
So legst du in den Entwicklertools einen Haltepunkt für eine Codezeile fest:
- Klicken Sie auf den Tab Quellen.
- Öffnen Sie die Datei mit der Codezeile, in der Sie den Zeilenumbruch ändern möchten.
- Gehen Sie zur Codezeile.
- Links von der Codezeile befindet sich die Spalte mit der Nummer der Zeile. Klicken Sie darauf. Ein blaues Symbol erscheint oben in der Zeilennummer-Spalte.
Dieses Beispiel zeigt einen Haltepunkt in Zeile 29.
Haltepunkte der Codezeile im Code
Rufen Sie debugger über Ihren Code an, um in dieser Leitung eine Pause zu machen. Dies entspricht einem Haltepunkt der Codezeile, mit der Ausnahme, dass der Haltepunkt in Ihrem Code und nicht in der Benutzeroberfläche der Entwicklertools festgelegt wird.
console.log('a');
console.log('b');
debugger;
console.log('c');
Haltepunkte in bedingter Codezeile
Verwenden Sie einen Haltepunkt aus einer bedingten Codezeile, wenn Sie die Ausführung stoppen möchten, aber nur, wenn eine Bedingung erfüllt ist.
Solche Haltepunkte sind nützlich, wenn Sie Unterbrechungen überspringen möchten, die für Ihren Fall irrelevant sind, insbesondere in einer Schleife.
So legen Sie einen Haltepunkt für eine bedingte Codezeile fest:
- Öffnen Sie den Tab Quellen.
- Öffnen Sie die Datei mit der Codezeile, in der Sie den Zeilenumbruch ändern möchten.
- Gehen Sie zur Codezeile.
- Links von der Codezeile befindet sich die Spalte mit der Nummer der Zeile. 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 Haltepunkt in Form einer bedingten Codezeile, der nur ausgelöst wird, wenn x bei Iteration i=6 in einer Schleife 10 überschritten hat.
Haltepunkte in Zeile des Codes protokollieren
Mit den Haltepunkten in der Codezeile (Logpoints) können Sie Nachrichten in der Console 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 Tab Quellen.
- Öffnen Sie die Datei mit der Codezeile, in der Sie den Zeilenumbruch ändern möchten.
- Gehen Sie zur Codezeile.
- Links von der Codezeile befindet sich die Spalte mit der Nummer der Zeile. Klicken Sie mit der rechten Maustaste darauf.
- Wählen Sie Logpoint hinzufügen aus. Unter der Codezeile wird ein Dialogfeld angezeigt.
Geben Sie Ihre Lognachricht in das Dialogfeld ein. Sie können dieselbe Syntax wie bei einem
console.log(message)-Aufruf verwenden.Sie können beispielsweise Folgendes protokollieren:
"A string " + num, str.length > 1, str.toUpperCase(), objIn diesem Fall lautet die protokollierte Meldung:
// str = "test" // num = 3 // 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, mit dem ein String und ein Variablenwert in der Console protokolliert werden.
Haltepunkte in Zeile des Codes bearbeiten
Im Bereich Haltepunkte können Sie Haltepunkte in Codezeilen deaktivieren, bearbeiten oder entfernen.
Gruppen von Haltepunkten bearbeiten
Im Bereich Breakpoints werden die Haltepunkte nach Datei gruppiert und nach Zeilen- und Spaltennummern sortiert. Mit Gruppen haben Sie folgende Möglichkeiten:
- Klicken Sie auf den Namen einer Gruppe, um sie zu minimieren oder zu maximieren.
- Um eine Gruppe oder einen Haltepunkt einzeln zu aktivieren oder zu deaktivieren, klicken Sie neben der Gruppe oder dem Haltepunkt auf
. - Wenn Sie eine Gruppe entfernen möchten, bewegen Sie den Mauszeiger darauf und klicken Sie auf
.
In diesem Video wird gezeigt, wie Gruppen minimiert und Haltepunkte einzeln oder gruppenweise deaktiviert oder aktiviert werden. Wenn Sie einen Haltepunkt deaktivieren, wird die Markierung im Bereich Quellen neben der Zeilennummer transparent.
Gruppen haben Kontextmenüs. Klicken Sie im Bereich Haltepunkte mit der rechten Maustaste auf eine Gruppe und wählen Sie Folgendes aus:
- Entfernen Sie alle Haltepunkte in der Datei (Gruppe).
- Deaktivieren Sie alle Haltepunkte in der Datei.
- Alle Haltepunkte in der 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 die Markierung im Bereich 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 über die Drop-down-Liste im Inline-Editor.
Klicken Sie mit der rechten Maustaste auf einen Haltepunkt, um das zugehörige Kontextmenü anzuzeigen, und wählen Sie eine der 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).
Sehen Sie sich das Video an, um verschiedene Haltepunktbearbeitungen in Aktion zu sehen: deaktivieren, entfernen, Bedingung bearbeiten, Position über das Menü anzeigen und Typ ändern.
Haltepunkte für DOM-Änderungen
Verwenden Sie einen Haltepunkt für DOM-Änderungen, wenn Sie den Code anhalten möchten, der einen DOM-Knoten oder seine untergeordneten Elemente ändert.
So legen Sie einen Haltepunkt für die DOM-Änderung fest:
- Klicken Sie auf den Tab Elemente.
- Gehen Sie zu dem Element, für das Sie den Haltepunkt festlegen möchten.
- Klicken Sie mit der rechten Maustaste auf das Element.
- Bewegen Sie den Mauszeiger auf Break bei und wählen Sie Unterstrukturänderungen, Attributänderungen oder Knotenentfernung aus.
Dieses Beispiel zeigt das Kontextmenü zum Erstellen eines Haltepunkts für die DOM-Änderung.
Eine Liste der Haltepunkte für DOM-Änderungen finden Sie unter:
- Bereich Elemente > DOM-Haltepunkte.
- Seitenleiste Quellen > DOM-Haltepunkte.
Sie haben folgende Möglichkeiten:
- Sie können sie mit
aktivieren oder deaktivieren. - Klicken Sie mit der rechten Maustaste und dann auf Entfernen oder Einblenden im DOM.
Arten von Haltepunkten für DOM-Änderungen
- Unterstrukturänderungen: Wird ausgelöst, wenn ein untergeordnetes Element des aktuell ausgewählten Knotens entfernt oder hinzugefügt wird oder der Inhalt eines untergeordneten Knotens geändert wird. Wird nicht bei Attributänderungen von untergeordneten Knoten oder bei Änderungen am aktuell ausgewählten Knoten ausgelöst.
- Attributänderungen: Wird ausgelöst, wenn auf dem aktuell ausgewählten Knoten ein Attribut hinzugefügt oder entfernt wird 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 die Anfrage-URL eines XHR einen bestimmten String enthält. Die Entwicklertools pausiert in der Codezeile, in der XHR send() aufruft.
Dies ist zum Beispiel dann 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 Anfrage verursacht.
So legen Sie einen Haltepunkt für XHR/fetch fest:
- Klicken Sie auf den Tab Quellen.
- Maximieren Sie den Bereich XHR-Haltepunkte.
- Klicken Sie auf
Haltepunkt hinzufügen. - Geben Sie den String ein, bei dem der Zeilenumbruch geändert werden soll. Die Entwicklertools werden pausiert, wenn dieser String an einer beliebigen Stelle in der Anfrage-URL einer XHR-Anfrage vorhanden ist.
- Drücken Sie zur Bestätigung die Eingabetaste.
Dieses Beispiel zeigt, wie Sie in den XHR/fetch-Haltepunkten für jede Anfrage, die org in der URL enthält, einen XHR/fetch-Haltepunkt erstellen.
Haltepunkte des Event-Listeners
Verwenden Sie Event-Listener-Haltepunkte, wenn Sie den Event-Listener-Code pausieren möchten, der nach dem Auslösen eines Ereignisses ausgeführt wird. Sie können bestimmte Ereignisse wie click oder Ereigniskategorien, z. B. alle Mausereignisse, auswählen.
- Klicken Sie auf den Tab Quellen.
- Maximieren Sie den Bereich Ereignis-Listener-Haltepunkte. Die Entwicklertools enthalten eine Liste von Ereigniskategorien, z. B. Animation.
- Markieren Sie eine dieser Kategorien, um das Ereignis immer wieder zu pausieren, oder maximieren Sie die Kategorie und prüfen Sie ein bestimmtes Ereignis.
In diesem Beispiel wird gezeigt, wie Sie einen Haltepunkt für den Event-Listener für deviceorientation erstellen.
Darüber hinaus pausiert der Debugger bei Ereignissen, die in Web-Workern oder Worklets eines beliebigen Typs auftreten, einschließlich der Shared Storage Worklets.
Dieses Beispiel zeigt, dass der Debugger bei einem setTimer-Ereignis angehalten wurde, das in einem Service Worker aufgetreten ist.
Eine Liste der Ereignis-Listener finden Sie auch im Bereich Elemente > Ereignis-Listener.
Haltepunkte für Ausnahmen
Verwenden Sie Ausnahmehaltepunkte, wenn Sie bei der Codezeile, die eine abgefangene oder nicht abgefangene Ausnahme auslöst, eine Pause einlegen möchten. Sie können diese beiden Ausnahmen in jeder Debug-Sitzung außer Node.js unabhängig pausieren.
Aktivieren Sie auf dem Tab Quellen im Bereich Breakpoints eine der folgenden Optionen oder beide und führen Sie dann den Code aus:
Klicken Sie das Kästchen
Bei nicht abgefangenen Ausnahmen anhalten an.
In diesem Beispiel wird die Ausführung bei einer nicht abgefangenen Ausnahme pausiert.
Klicken Sie das Kästchen
Bei erkannten Ausnahmen anhalten an.
In diesem Beispiel wird die Ausführung bei einer abgefangenen Ausnahme pausiert.
Ausnahmen bei asynchronen Aufrufen
Wenn entweder die Kästchen „gefangen“ oder „nicht abgefangen“ aktiviert sind, versucht der Debugger, bei den entsprechenden Ausnahmen sowohl bei synchronen als auch bei asynchronen Aufrufen eine Pause einzulegen. Im asynchronen Fall sucht der Debugger in Promise-Handlern nach Ablehnungs-Handlern, um zu ermitteln, wann er beendet werden soll.
Ausnahmen abgefangen und Code ignoriert
Wenn die Option Ignorieren-Liste 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, dass der Debugger aufgrund einer erkannten Ausnahme pausiert wurde, die von der ignorierten library.js ausgelöst wurde und nicht ignorierte mycode.js durchläuft.
Weitere Informationen zum Debugger-Verhalten in Grenzfällen finden Sie auf dieser Demoseite zum Testen verschiedener Szenarien.
Haltepunkte der Funktion
Rufen Sie debug(functionName) auf, wobei functionName die Funktion ist, die Sie debuggen möchten, wenn bei jedem Aufruf einer bestimmten Funktion eine Pause stattfinden soll. Du kannst debug() in deinen Code einfügen (z. B. eine console.log()-Anweisung) oder über die Entwicklertools-Konsole aufrufen. debug() entspricht dem Festlegen eines Haltepunkts für die Codezeile 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 ist
Die Entwicklertools geben eine ReferenceError aus, wenn die Funktion, die du debuggen möchtest, nicht dafür vorgesehen ist.
(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, dafür zu sorgen, dass die Zielfunktion in den Geltungsbereich fällt, wenn du debug() über die Entwicklertools-Konsole aufrufst. Eine Strategie:
- Legen Sie an einer Stelle, an der die Funktion im Geltungsbereich liegt, einen Haltepunkt für die Codezeile fest.
- Lösen Sie den Haltepunkt aus.
- Rufe
debug()in der Entwicklertools-Konsole auf, während der Code am Haltepunkt der Codezeile pausiert ist.
Haltepunkte des vertrauenswürdigen Typs
Die Trusted Type API bietet Schutz vor Sicherheitsangriffen, die als Cross-Site-Scripting (XSS)-Angriffe bezeichnet werden.
Gehen Sie auf dem Tab Quellen im Bereich Haltepunkte zum Abschnitt Haltepunkte für Verstöße gegen CSPs und aktivieren Sie eine der folgenden Optionen oder beide. Führen Sie dann den Code aus:
Prüfen Sie
Senkenverstöße.
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.createPolicyeingerichtet.
Weitere Informationen zur Verwendung der API:
- Weitere Informationen finden Sie im Hilfeartikel DOM-basierte Cross-Site-Scripting-Sicherheitslücken mit vertrauenswürdigen Typen verhindern.
- Weitere Informationen zur Fehlerbehebung finden Sie unter CSP und vertrauenswürdige Typen von Debugging in den Chrome-Entwicklertools implementieren.