Code mit Haltepunkten pausieren

Kayce Basques

Sofia Emelianova

Mithilfe von Haltepunkten können Sie Ihren JavaScript-Code pausieren. In diesem Leitfaden werden die einzelnen Arten von Haltepunkten beschrieben, die in den DevTools verfügbar sind, sowie ihre Verwendung und Einrichtung. Eine interaktive Anleitung zum Debuggen finden Sie unter Einstieg in das JavaScript-Debugging 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 auf Codezeilenebene

Verwenden Sie einen Codezeilen-Haltepunkt, wenn Sie genau wissen, welchen Codebereich Sie untersuchen müssen. In den DevTools wird immer pausiert, 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.

In diesem Beispiel ist ein Code-Bruchpunkt in Zeile 29 zu sehen.

Codezeilen-Haltepunkte in Ihrem Code

Rufe debugger in deinem Code auf, um an dieser Zeile anzuhalten. 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 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 von der Codezeile befindet sich die Spalte mit den Zeilennummern. Klicken Sie mit der rechten Maustaste darauf.
5. Wählen Sie Logpunkt 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. Oben in der Spalte mit den Zeilennummern wird ein rosa Symbol mit zwei Punkten angezeigt.

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

Haltepunkte für Codezeilen 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 .
• Wenn Sie eine Gruppe entfernen möchten, bewegen Sie den Mauszeiger darauf und klicken Sie auf .

In diesem Video wird gezeigt, wie Sie Gruppen minimieren und einzelne oder mehrere Breakpoints 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:

• Alle Haltepunkte in der Datei (Gruppe) entfernen.
• 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 die Markierung neben der Zeilennummer im Bereich Quellen transparent.
• Bewegen Sie den Mauszeiger auf einen Haltepunkt und klicken Sie auf , um ihn zu bearbeiten, oder 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.
  • Aktivieren Sie alle Haltepunkte.
  • 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 sehen Sie verschiedene Änderungen an Haltepunkten in Aktion: Deaktivieren, Entfernen, Bedingung bearbeiten, Standort aus dem Menü anzeigen und Typ ändern.

Überspringe Pausen mit „Hier nie pausieren“

Verwenden Sie einen Codezeilen-Unterbrechungspunkt vom Typ Hier nie pausieren, um Pausen zu überspringen, die aus anderen Gründen auftreten würden. 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, an der keine Zeilenumbruchslinie eingefügt 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ü die Option Hier nie 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 Hier nie pausieren können Sie Debugger-Anweisungen und alle anderen Arten von Haltepunkten stummschalten, mit Ausnahme von Codezeilen- und Ereignis-Listener-Haltepunkten.

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:

• Bereich Elemente > DOM-Umschaltpunkte
• Seitenleiste Quellen > DOM-Haltepunkte

Dort 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 an 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. In den Entwicklertools wird die Ausführung an der Codezeile pausiert, in der send() von XHR aufgerufen wird.

Das ist beispielsweise 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 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. Bestätigen Sie mit der 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 ist der Debugger bei einem setTimer-Ereignis angehalten, 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 anhalten 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, hält der Debugger bei Ausnahmen an, die entweder in nicht ignorierten Frames oder bei der Durchlaufung eines solchen Frames im Aufrufstack erfasst werden.

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.

Weitere Informationen zum Verhalten des Debuggers in Grenzfällen finden Sie auf dieser Demoseite.

Funktions-Haltepunkte

Rufen Sie debug(functionName) auf, wobei functionName die Funktion ist, die Sie debuggen möchten, wenn Sie die Ausführung jedes Mal anhalten möchten, wenn eine bestimmte Funktion aufgerufen wird. 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 Setzen eines Codezeilen-Bruchpunkts 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 CSP-Verstoß-Breakpoints 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).