Code mit Haltepunkten pausieren

Kayce Basques

Sofia Emelianova

Mithilfe von Haltepunkten können Sie Ihren JavaScript-Code pausieren. In diesem Leitfaden werden alle in den Entwicklertools verfügbaren Haltepunkte erläutert. Außerdem wird erläutert, wann sie verwendet werden und wie die einzelnen Typen festgelegt werden. Ein interaktives Tutorial zum Debugging finden Sie unter Erste Schritte mit der JavaScript-Fehlersuche in den Chrome-Entwicklertools.

Wann Sie welchen Typ von Haltepunkt verwenden sollten

Der bekannteste Haltepunkttyp ist der Codezeilen-Haltepunkt. Das Einrichten von Codezeilen-Bruchpunkten kann jedoch ineffizient sein, insbesondere wenn Sie nicht genau wissen, wo Sie suchen müssen, oder wenn Sie mit einer großen Codebasis arbeiten. Wenn Sie wissen, wie und wann Sie die anderen Arten von Haltepunkten verwenden, können Sie beim Debuggen Zeit sparen.

Haltepunkte der Codezeile

Verwenden Sie einen Codezeilen-Haltepunkt, wenn Sie genau wissen, welchen Codebereich Sie untersuchen müssen. Die Entwicklertools pausiert immer, bevor diese Codezeile ausgeführt wird.

So legen Sie in den DevTools einen Haltepunkt für eine Codezeile fest:

1. Klicken Sie auf den Bereich Quellen.
2. Öffnen Sie die Datei mit der Codezeile, an der Sie den Programmablauf anhalten möchten.
3. Gehen Sie zur Codezeile.
4. Links von der Codezeile befindet sich die Spalte mit den Zeilennummern. Klicken Sie darauf. Oben in der Spalte mit den Zeilennummern wird ein blaues Symbol angezeigt.

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. Das entspricht einem Codezeilen-Haltepunkt, mit dem Unterschied, dass der Haltepunkt im Code und nicht in der DevTools-Benutzeroberfläche festgelegt wird.

console.log('a');
console.log('b');
debugger;
console.log('c');

Bedingte Haltepunkte auf Codezeilenebene

Verwenden Sie einen bedingten Codezeilen-Haltepunkt, wenn die Ausführung nur angehalten werden soll, wenn eine bestimmte Bedingung zutrifft.

Solche Haltestellen sind nützlich, wenn Sie Unterbrechungen überspringen möchten, die für Ihren Fall irrelevant sind, insbesondere in einer Schleife.

So legen Sie einen bedingten Haltepunkt für eine Codezeile fest:

1. Öffnen Sie den Bereich Quellen.
2. Öffnen Sie die Datei mit der Codezeile, an der Sie den Programmablauf anhalten möchten.
3. Gehen Sie zur Codezeile.
4. Links von der Codezeile befindet sich die Spalte mit den Zeilennummern. Klicken Sie mit der rechten Maustaste darauf.
5. Wählen Sie Bedingten Haltepunkt hinzufügen aus. Unter der Codezeile wird ein Dialogfeld angezeigt.
6. Geben Sie die Bedingung in das Dialogfeld ein.
7. Drücken Sie die Eingabetaste, um den Haltepunkt zu aktivieren. Oben in der Spalte mit den Zeilennummern wird ein orangefarbenes Symbol mit einem Fragezeichen angezeigt.

In diesem Beispiel wird ein bedingter Codezeilen-Bruchpunkt gezeigt, der nur ausgelöst wird, wenn x in einer Schleife bei Iteration i=6 10 überschreitet.

Codezeilen-Greifstellen protokollieren

Mithilfe von Codezeilen-Bruchpunkten (Logpunkten) können Sie Nachrichten in der Konsole protokollieren, ohne die Ausführung anzuhalten und ohne Ihren Code mit console.log()-Aufrufen zu überladen.

So legen Sie einen Logpunkt fest:

1. Öffnen Sie den Bereich Quellen.
2. Öffnen Sie die Datei mit der Codezeile, an der Sie den Programmablauf anhalten möchten.
3. Gehen Sie zur Codezeile.
4. Links neben der Codezeile befindet sich die Spalte mit der Zeilennummer. Klicken Sie mit der rechten Maustaste darauf.
5. Wählen Sie Logpoint hinzufügen aus. Unter der Codezeile wird ein Dialogfeld angezeigt.

6. Geben Sie die Protokollmeldung in das Dialogfeld ein. Sie können dieselbe Syntax wie bei einem console.log(message)-Aufruf verwenden.

   Sie können beispielsweise Folgendes erfassen:

   "A string " + num, str.length > 1, str.toUpperCase(), obj
   

   In diesem Fall lautet die protokollierte Meldung:

   // str = "test"
   // num = 42
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

7. Drücken Sie die Eingabetaste, um den Haltepunkt zu aktivieren. Über der Spalte mit der Zeilennummer wird ein rosa Symbol mit zwei Punkten angezeigt.

In diesem Beispiel wird in Zeile 30 ein Logpoint gezeigt, mit dem ein String und ein Variablenwert in der Konsole protokolliert werden.

Codezeile-Haltepunkte bearbeiten

Im Bereich Bruchstellen können Sie Codezeilen-Bruchstellen deaktivieren, bearbeiten oder entfernen.

Gruppen von Haltepunkten bearbeiten

Im Bereich Bruchstellen werden die Bruchstellen nach Datei gruppiert und nach Zeilen- und Spaltennummern sortiert. Sie haben 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 .
• 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 die Markierung neben der Zeilennummer im Bereich Quellen transparent.

Gruppen haben Kontextmenüs. Klicken Sie im Bereich Bruchstellen mit der rechten Maustaste auf eine Gruppe und wählen Sie eine der folgenden Optionen aus:

• Entfernen Sie alle Haltepunkte in der Datei (Gruppe).
• Deaktivieren Sie alle Haltepunkte in der Datei.
• Aktivieren Sie alle Haltepunkte in der Datei.
• 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.

• Ändern Sie beim Bearbeiten eines Haltepunkts seinen Typ in der Drop-down-Liste im Inline-Editor.

  

• Klicken Sie mit der rechten Maustaste auf einen Haltepunkt, um das Kontextmenü zu öffnen, und wählen Sie eine der folgenden Optionen aus:

  

  • Standort anzeigen
  • Bedingung oder Logpunkt bearbeiten.
  • Alle Haltepunkte aktivieren.
  • Deaktivieren Sie alle Haltepunkte.
  • Entfernen Sie den Haltepunkt.
  • Entfernen Sie alle anderen Haltepunkte (in allen Dateien).
  • Entfernen Sie alle Haltepunkte (in allen Dateien).

Im Video werden verschiedene Haltepunktbearbeitungen in Aktion gezeigt: Deaktivieren, Entfernen, Bearbeiten der Bedingung, Anzeige der Position über das Menü und Ändern des Typs.

Überspringe Pausen mit „Hier nie pausieren“

Verwenden Sie den Haltepunkt Hier nie pausieren mit einer Codezeile, um Pausen zu überspringen, die aus anderen Gründen auftreten. Das kann nützlich sein, wenn Sie Ausnahme-Bruchpunkte aktiviert haben, der Debugger aber immer bei einer besonders störenden Ausnahme anhält, die Sie nicht beheben möchten.

So deaktivierst du die Unterbrechungsorte:

1. Öffnen Sie im Bereich Quellen die Quelldatei und suchen Sie die Zeile, die nicht unterbrochen werden soll.
2. Klicken Sie links in der Zeilennummernspalte neben der Anweisung, die die Unterbrechung verursacht, mit der rechten Maustaste auf die Zeilennummer.
3. 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 erfährst du 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 stummschalten.

Hier nie pausieren funktioniert möglicherweise nicht in einer Zeile mit mehreren Anweisungen, wenn sich die Anweisung, die nicht pausiert werden soll, von der Anweisung unterscheidet, die die Pause verursacht. In auf Quellcode bezogener Code entspricht nicht jeder Unterbrechungspunkt der ursprünglichen Anweisung, die die Unterbrechung verursacht.

DOM-Umschaltpunkte

Verwenden Sie einen DOM-Änderungs-Bruchpunkt, wenn Sie den Code anhalten möchten, der einen DOM-Knoten oder seine untergeordneten Elemente ändert.

So legen Sie einen DOM-Änderungs-Haltepunkt fest:

1. Klicken Sie auf den Tab Elemente.
2. Rufen Sie das Element auf, für das Sie den Haltepunkt setzen möchten.
3. Klicken Sie mit der rechten Maustaste auf das Element.
4. Bewegen Sie den Mauszeiger auf Unterbrechung aktivieren und wählen Sie dann Änderungen am untergeordneten Knoten, Änderungen am Attribut oder Entfernen von Knoten aus.

In diesem Beispiel ist das Kontextmenü zum Erstellen eines DOM-Änderungs-Bruchpunkts zu sehen.

Eine Liste der DOM-Änderungs-Breakpoints finden Sie hier:

• Elemente > Bereich DOM-Haltepunkte.
• Quellen > Seitenbereich DOM-Haltepunkte.

Hier haben Sie folgende Möglichkeiten:

• Sie können sie mit aktivieren oder deaktivieren.
• Klicken Sie im DOM mit der rechten Maustaste und wählen Sie Entfernen oder Anzeigen aus.

Arten von DOM-Änderungs-Haltepunkten

• Änderungen der Unterstruktur: Wird ausgelöst, wenn ein untergeordnetes Element des aktuell ausgewählten Knotens entfernt oder hinzugefügt wird oder der Inhalt eines untergeordneten Elements geändert wird. Wird nicht bei Änderungen an untergeordneten Knotenattributen oder an Änderungen am aktuell ausgewählten Knoten ausgelöst.
• Attributänderungen: Wird ausgelöst, wenn dem aktuell ausgewählten Knoten ein Attribut hinzugefügt oder entfernt wird oder 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 einen Break setzen möchten, wenn die Anfrage-URL eines XHR einen bestimmten String enthält. Die Entwicklertools werden an der Codezeile pausiert, in der send() vom XHR aufgerufen wird.

Ein Beispiel hierfür ist, 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 XHR/fetch-Haltepunkt fest:

1. Klicken Sie auf den Bereich Quellen.
2. Maximieren Sie den Bereich XHR-Haltepunkte.
3. Klicken Sie auf  Bruchpunkt hinzufügen.
4. Geben Sie den String ein, an dem die Unterbrechung erfolgen soll. DevTools wird pausiert, wenn dieser String irgendwo in der Anfrage-URL einer XHR vorhanden ist.
5. Drücken Sie zur Bestätigung die Eingabetaste.

In diesem Beispiel wird gezeigt, wie Sie einen XHR/fetch-Haltepunkt unter XHR/fetch-Haltepunkte für alle Anfragen erstellen, die org in der URL enthalten.

Event-Listener-Haltepunkte

Verwenden Sie Event-Listener-Haltepunkte, wenn Sie den Code des Event-Listeners pausieren möchten, der nach dem Auslösen eines Ereignisses ausgeführt wird. Sie können bestimmte Ereignisse wie click oder Ereigniskategorien wie alle Mausereignisse auswählen.

1. Klicken Sie auf den Bereich Quellen.
2. Maximieren Sie den Bereich Event-Listener-Haltepunkte. In den Entwicklertools wird eine Liste von Ereigniskategorien angezeigt, z. B. Animation.
3. Setzen Sie ein Häkchen in eine dieser Kategorien, um die Auslieferung zu pausieren, wenn ein Ereignis aus dieser Kategorie ausgelöst wird. Sie können die Kategorie auch maximieren und ein bestimmtes Ereignis auswählen.

In diesem Beispiel wird gezeigt, wie ein Haltepunkt für einen Ereignis-Listener für deviceorientation erstellt wird.

Außerdem hält der Debugger bei Ereignissen an, die in Webworkern oder Worklets jeglicher Art auftreten, einschließlich der Shared Storage Worklets.

In diesem Beispiel wird der Debugger bei einem setTimer-Ereignis pausiert, das in einem Service Worker aufgetreten ist.

Eine Liste der Ereignislistener finden Sie auch im Bereich Elemente > Ereignislistener.

Haltepunkte für Ausnahmen

Verwenden Sie Ausnahme-Haltepunkte, wenn Sie an der Codezeile pausieren möchten, in der eine aufgefangene oder nicht aufgefangene Ausnahme ausgelöst wird. Sie können beide Ausnahmen unabhängig voneinander in jeder anderen Debug-Sitzung als Node.js pausieren.

Aktivieren Sie im Bereich Unterbrechungen des Bereichs Quellen eine oder beide der folgenden Optionen und führen Sie dann den Code aus:

• Klicken Sie das Kästchen für Bei nicht abgefangenen Ausnahmen anhalten an.

  

  In diesem Beispiel wird die Ausführung bei einer nicht abgefangenen Ausnahme angehalten.

• Klicken Sie das Kästchen für Bei erkannten Ausnahmen anhalten an.

  

  In diesem Beispiel wird die Ausführung bei einer erkannten Ausnahme angehalten.

Ausnahmen bei asynchronen Aufrufen

Wenn eines oder beide Kästchen für aufgefangene und nicht aufgefangene Ausnahmen aktiviert sind, versucht der Debugger, bei den entsprechenden Ausnahmen sowohl bei synchronen als auch bei asynchronen Aufrufen anzuhalten. Im asynchronen Fall sucht der Debugger in allen Versprechen nach Ablehnungs-Handlern, um zu bestimmen, wann er anhalten soll.

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

Im nächsten Beispiel ist der Debugger an einer aufgefangenen Ausnahme angehalten, die von der ignorierten library.js ausgelöst wurde, 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.

Funktions-Haltepunkte

Rufen Sie debug(functionName) auf, wobei functionName die Funktion ist, die Sie debuggen möchten, wenn bei jedem Aufruf einer bestimmten Funktion eine Pause erfolgen soll. Sie können debug() in Ihren Code einfügen (z. B. in eine console.log()-Anweisung) oder es über die Entwicklertools-Konsole aufrufen. debug() entspricht dem Festlegen eines Haltepunkts für eine 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();

Prüfen, ob die Zielfunktion im Geltungsbereich liegt

In den Entwicklertools wird eine ReferenceError ausgegeben, wenn sich die Funktion, die Sie debuggen möchten, nicht im Gültigkeitsbereich befindet.

(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 sich die Zielfunktion im Gültigkeitsbereich befindet, wenn Sie debug() über die DevTools-Konsole aufrufen. Hier eine mögliche Strategie:

1. Legen Sie einen Codezeilen-Haltepunkt an einer Stelle fest, an der die Funktion gültig ist.
2. Lösen Sie den Haltepunkt aus.
3. Rufen Sie debug() in der Entwicklertools-Konsole auf, während der Code noch an der Codezeile mit dem Haltepunkt angehalten ist.

Haltepunkte für vertrauenswürdige Typen

Die Trusted Type API bietet Schutz vor Sicherheitslücken, die als Cross-Site-Scripting (XSS) bezeichnet werden.

Gehen Sie im Bereich Quellen im Bereich Breakpoints zum Bereich Breakpoints für CSP-Verstöße und aktivieren Sie eine oder beide der folgenden Optionen. Führen Sie dann den Code aus:

• Klicken Sie auf Senkenverstöße.

  

  In diesem Beispiel wird die Ausführung bei einem Sink-Verstoß pausiert.

• Klicken Sie auf Richtlinienverstöße.

  

  In diesem Beispiel wird die Ausführung aufgrund eines Richtlinienverstoßes pausiert. Richtlinien für vertrauenswürdige Typen werden mit trustedTypes.createPolicy eingerichtet.

Weitere Informationen zur Verwendung der API:

• Weitere Informationen zu Sicherheitszielen finden Sie unter DOM-basierte Cross-Site-Scripting-Sicherheitslücken mit vertrauenswürdigen Typen verhindern.
• Informationen zum Debuggen finden Sie unter Implementing CSP and Trusted Types debugging in Chrome DevTools (CSP- und Trusted Types-Debugging in Chrome DevTools implementieren).