Anhalten von Code mit Haltepunkten

Verwenden Sie Haltepunkte, um Ihren JavaScript-Code anzuhalten. In diesem Artikel werden die einzelnen in DevTools verfügbaren Breakpointtypen sowie die Verwendung und das Festlegen der einzelnen Typen erläutert.

Ein einführungstutorial mit einer vorhandenen Webseite finden Sie unter Erste Schritte beim Debuggen von JavaScript.

Übersicht über die Verwendung der einzelnen Haltepunkttypen

Der bekannteste Breakpointtyp ist die Codezeile. Das Festlegen von Zeilenhaltepunkten kann jedoch ineffizient sein, insbesondere wenn Sie nicht genau wissen, wo Sie suchen sollen, oder wenn Sie mit einer großen Codebasis arbeiten. Sie können sich beim Debuggen Zeit sparen, indem Sie wissen, wie und wann die anderen Typen von Haltepunkten verwendet werden sollen.

Haltepunkttyp	Verwenden Sie diese, wenn Sie anhalten möchten...
Codezeile	Für einen genauen Codebereich.
Bedingte Codezeile	Für einen genauen Codebereich, aber nur, wenn eine andere Bedingung erfüllt ist.
DOM	Auf dem Code, der einen bestimmten DOM-Knoten oder die untergeordneten Elemente ändert oder entfernt.
XHR	Wenn eine XHR-URL ein Zeichenfolgenmuster enthält.
Ereignislistener	In dem Code, der nach einem Ereignis ausgeführt wird, z click. B. , wird ausgeführt.
Ausnahme	In der Codezeile, die eine abgefangene oder nicht abgefangene Ausnahme auslöst.
Funktion	Immer dann, wenn ein bestimmter Befehl, eine bestimmte Funktion oder methode ausgeführt wird.
Protokollpunkte	Eine Variante, die nicht in den Debugger einbricht, sondern stattdessen eine Meldung in der Konsole protokolliert.

Breakpoints für Zeilenzeilen

Verwenden Sie einen Zeilenhaltepunkt, wenn Sie den genauen Codebereich kennen, den Sie untersuchen müssen. DevTools hält immer an, bevor diese Codezeile ausgeführt wird.

So legen Sie einen Zeilenhaltepunkt in DevTools fest:

1. Wählen Sie das Tool Quellen aus.

2. Öffnen Sie die Datei, die die Codezeile enthält, die Sie unterbrechen möchten.

3. Wechseln Sie zur Codezeile.

4. Links neben der Codezeile befindet sich die Zeilennummerspalte. Klicken Sie darauf. Neben der Zeilennummerspalte wird ein rotes Symbol angezeigt:

   

Breakpoints in Codezeilen im Code

Verwenden Sie die debugger -Anweisung aus Ihrem Code, um in dieser Zeile anzuhalten. Dies entspricht einem Zeilenhaltepunkt, mit der Ausnahme, dass der Haltepunkt im Code und nicht in der DevTools-Benutzeroberfläche festgelegt wird.

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

Wenn der obige Codeausschnitt in Microsoft Edge ausgeführt wird, hält DevTools in der Zeile, die die debugger -Anweisung enthält, kurz vor dem Ausführen der console.log('c'); Zeile an.

Bedingte Breakpoints für Codezeilen

Verwenden Sie einen bedingten Codezeilenhaltepunkt, wenn Sie den genauen Codebereich kennen, den Sie untersuchen müssen, sie aber nur anhalten möchten, wenn eine andere Bedingung erfüllt ist.

So legen Sie einen bedingten Codezeilenhaltepunkt fest:

1. Wählen Sie das Tool Quellen aus.

2. Öffnen Sie die Datei, die die Codezeile enthält, die Sie unterbrechen möchten.

3. Wechseln Sie zur Codezeile.

4. Links neben der Codezeile befindet sich die Zeilennummerspalte. Klicken Sie mit der rechten Maustaste darauf.

5. Wählen Sie Bedingten Haltepunkt hinzufügen aus. Unterhalb der Codezeile wird ein Dialogfeld angezeigt.

   

6. Geben Sie ihre Bedingung in das Dialogfeld ein.

7. Drücken Sie die EINGABETASTE , um den Haltepunkt zu aktivieren. Neben der Zeilennummerspalte wird ein rotes Symbol angezeigt:

   

Verwalten von Breakpoints für Codezeilen

Verwenden Sie den Bereich Haltepunkte , um Breakpoints für Zeilenzeilen an einer einzelnen Position zu deaktivieren oder zu entfernen.

• Aktivieren Sie das Kontrollkästchen neben einem Eintrag, um diesen Haltepunkt zu deaktivieren.

• Klicken Sie mit der rechten Maustaste auf einen Eintrag, um diesen Haltepunkt zu entfernen.

• Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle im Bereich Haltepunkte , um alle Haltepunkte zu entfernen.

Um alle Haltepunkte zu deaktivieren, klicken Sie auf die Schaltfläche Deaktive Haltepunkte ():

DOM-Änderungshaltepunkte

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

So legen Sie einen DOM-Änderungshaltepunkt fest:

1. Wählen Sie das Tool Elemente aus.

2. Wechseln Sie zu dem Element, für das Sie den Haltepunkt festlegen möchten.

3. Klicken Sie mit der rechten Maustaste auf das Element, klicken Sie auf Unterbrechen, und klicken Sie dann auf Unterstrukturänderungen, Attributänderungen oder Knotenentfernung:

   

Typen von DOM-Haltepunkten ändern

• Ä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 Knotens geändert wird. Wird nicht bei Änderungen des untergeordneten Knotenattributes oder änderungen am aktuell ausgewählten Knoten ausgelöst.

• Attributänderungen: Wird ausgelöst, wenn ein Attribut auf dem aktuell ausgewählten Knoten 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-Breakpoints

Verwenden Sie einen XHR/Fetch-Haltepunkt, wenn Sie beim Auftreten einer XmlHttpRequest (XHR)- oder Fetch-Anforderung unterbrechen möchten. DevTools hält in der Codezeile an, in der die XHR- oder Fetch-Anforderung auftritt.

Dies ist beispielsweise hilfreich, wenn Ihre Webseite eine falsche URL anfordert und Sie schnell den XHR- oder Fetch-Quellcode finden möchten, der die falsche Anforderung verursacht.

So legen Sie einen XHR-Haltepunkt fest:

1. Wählen Sie das Tool Quellen aus.

2. Erweitern Sie den Bereich XHR/Breakpoints abrufen .

3. Klicken Sie auf Haltepunkt hinzufügen.

4. Geben Sie die GESAMTE URL oder einen Teil der URL ein, für die Sie unterbrechen möchten. DevTools hält an, wenn der von Ihnen eingegebene Wert an einer beliebigen Stelle in einer XHR- oder Fetch-Anforderungs-URL vorhanden ist.

5. Drücken Sie zur Bestätigung die EINGABETASTE .

   

Breakpoints für Ereignislistener

Verwenden Sie Ereignislistenerhaltepunkte, wenn Sie den Ereignislistenercode anhalten möchten, der nach dem Auslösen eines Ereignisses ausgeführt wird. Sie können bestimmte Ereignisse auswählen, z click. B. , oder Ereigniskategorien, z. B. alle Mausereignisse.

1. Wählen Sie das Tool Quellen aus.

2. Erweitern Sie den Bereich Breakpoints für Ereignislistener . DevTools zeigt eine Liste von Ereigniskategorien an, z. B. Animation.

3. Wählen Sie eine Kategorie aus, um anzuhalten, wenn ein Ereignis aus dieser Kategorie ausgelöst wird. Oder erweitern Sie die Kategorie, und wählen Sie dann ein bestimmtes Ereignis aus:

   

Ausnahmehaltepunkte

Verwenden Sie Ausnahmehaltepunkte, wenn Sie in der Codezeile anhalten möchten, die eine abgefangene oder nicht abgefangene Ausnahme auslöst.

1. Wählen Sie das Tool Quellen aus.

2. Um anzuhalten, wenn der Code eine JavaScript-Ausnahme auslöst, aktivieren Sie im Bereich Haltepunkte das Kontrollkästchen Bei nicht abgefangenen Ausnahmen anhalten .

3. Wenn Sie bei abgefangenen Ausnahmen anhalten möchten, z. B. wenn eine Ausnahme von einem try/catch Block abgefangen wird, aktivieren Sie das Kontrollkästchen Bei abgefangenen Ausnahmen anhalten :

   

Funktionshaltepunkte

Führen Sie die debug(function) -Methode aus, wobei function die JavaScript-Funktion ist, die Sie debuggen möchten, wenn Sie anhalten möchten, wenn eine bestimmte Funktion ausgeführt wird. Sie können in Ihren Code einfügen debug() (z. B. bei Verwendung einer console.log() -Anweisung) oder die -Methode über das DevTools-Konsolentool ausführen.

debug() entspricht dem Festlegen eines Zeilenhaltepunkts in der ersten Zeile der Funktion.

function sum(a, b) {
  let result = a + b; // DevTools will pause before running this line.
  return result;
}

// Call the debug method by passing a reference to the function object,
// not its name as a string.
debug(sum);

sum();

Stellen Sie sicher, dass sich die Zielfunktion im Bereich befindet.

DevTools löst eine aus ReferenceError , wenn sich die Funktion, die Sie debuggen möchten, nicht im Bereich befindet.

(function () {
  function foo() {
    console.log('foo');
  }

  function bar() {
    console.log('bar');
  }

  // Here, calling debug(bar) works because
  // bar is defined in the current scope.
  debug(bar);

  bar();
})();

// Here, calling debug(foo) won't work, because foo
// isn't defined in the current scope.
debug(foo);

Wenn Sie über das Konsolentool aufrufendebug(), finden Sie hier eine Technik, um sicherzustellen, dass sich die Zielfunktion im Bereich befindet:

1. Legen Sie einen Zeilenhaltepunkt an einer Stelle fest, an der sich die Funktion im Bereich befindet.

2. Lösen Sie den Haltepunkt aus. Ihr Code wird am Haltepunkt angehalten, und die Variablen für die aktuelle Funktion befinden sich im Gültigkeitsbereich.

3. Rufen Sie debug() in der DevTools-Konsole auf, während der Code noch an Ihrem Zeilenhaltepunkt angehalten ist.

Protokollpunkte

Ein Protokollpunkt ist eine Breakpointvariante, die im Debugger nicht "umbricht", sondern stattdessen eine Meldung direkt in der Konsole protokolliert. Sie fügen einen Protokollpunkt über DevTools auf die gleiche Weise ein wie jeder andere Haltepunkt.

So legen Sie einen Protokollpunkt fest:

1. Wählen Sie das Tool Quellen aus.

2. Öffnen Sie die Datei, die die Codezeile enthält, in der Sie einen Protokollpunkt einfügen möchten.

3. Klicken Sie mit der rechten Maustaste auf die linke Seite der Codezeile in der Spalte Zeilennummer.

4. Wählen Sie Protokollpunkt hinzufügen aus. Unterhalb der Codezeile wird ein Dialogfeld angezeigt.

5. Geben Sie eine Nachricht oder einen JavaScript-Ausdruck ein, die ausgewertet wird, wenn der Protokollpunkt erreicht wird.

6. Drücken Sie die EINGABETASTE , um den Protokollpunkt zu aktivieren. Neben der Zeilennummer wird ein rotes Symbol angezeigt.

Weitere Informationen finden Sie unter Protokollmeldungen im Konsolentool.

Siehe auch

• JavaScript-Debugfeatures : Verwenden der Benutzeroberfläche des Debuggers im Quellentool .
• Erste Schritte beim Debuggen von JavaScript : Ein Einführungstutorial mit einer vorhandenen Webseite.
• Übersicht über das Quellentool : Der Debugger ist Teil des Quellentools , das einen JavaScript-Editor enthält.

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.