Code mit Haltepunkten pausieren

Kayce Basques

Sofia Emelianova

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.

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:

1. Klicken Sie auf den Bereich Quellen.
2. Öffnen Sie die Datei mit der Codezeile, die Sie unterbrechen möchten.
3. Gehen Sie zur Codezeile.
4. 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:

1. Öffnen Sie den Bereich Quellen.
2. Öffnen Sie die Datei mit der Codezeile, die Sie unterbrechen 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 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. Ü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:

1. Öffnen Sie den Bereich Quellen.
2. Öffnen Sie die Datei mit der Codezeile, die Sie unterbrechen 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 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'}
   

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.

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:

1. Öffnen Sie im Bereich Quellen die Quelldatei und suchen Sie die Zeile, die nicht unterbrochen werden soll.
2. Klicken Sie links in der Spalte mit der Zeilennummer neben der Anweisung, die den Zeilenumbruch 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 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:

1. Klicken Sie auf den Tab Elements.
2. Gehen Sie zu dem Element, 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 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:

1. Klicken Sie auf den Bereich Quellen.
2. Maximieren Sie den Bereich XHR Breakpoints.
3. Klicken Sie auf Haltepunkt hinzufügen.
4. Geben Sie die Zeichenfolge ein, die unterbrochen werden soll. Die Entwicklertools werden pausiert, wenn dieser String vorhanden ist irgendwo in der XHR-Anforderungs-URL.
5. 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.

1. Klicken Sie auf den Bereich Quellen.
2. Maximieren Sie den Bereich Ereignis-Listener-Haltepunkte. In den Entwicklertools wird eine Liste von Ereigniskategorien angezeigt, z. B. als Animation.
3. 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:

1. Legen Sie an der Stelle, an der die Funktion enthalten ist, einen Haltepunkt für die Codezeile fest.
2. Lösen Sie den Haltepunkt aus.
3. 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.