Zusammenfassung und Teilen: 6 Möglichkeiten, Punkte in JavaScript zu unterbrechen (zum Lernen sammeln)

Dieser Artikel fasst 6 Möglichkeiten zum Brechen von Punkten in JavaScript zusammen. Es lohnt sich, zu lernen und zu sammeln. Kommen Sie und sehen Sie, wie viele davon Sie verwendet haben. Hoffe, es hilft allen!

Der Debugger ist ein sehr wichtiges Tool für die Front-End-Entwicklung. Er kann bei dem Code anhalten, der uns wichtig ist, und die Logik durch Einzelschrittoperationen klären. Die Qualität des Debuggers steht in direktem Zusammenhang mit der Qualität der Haltepunkte.

Sowohl Chrome Devtools als auch VSCode bieten Debugger, der 6 Haltepunktmethoden unterstützt.

Normaler Haltepunkt

Klicken Sie auf die linke Seite der Zeile, die Sie unterbrechen möchten, um einen Haltepunkt hinzuzufügen. Wenn Sie dort ausgeführt werden, wird er unterbrochen.

Dies ist die grundlegendste Haltepunktmethode. Sowohl VSCode als auch Chrome Devtools unterstützen diesen Haltepunkt. [Verwandte Empfehlungen: Javascript-Lerntutorial]

Bedingter Haltepunkt

Klicken Sie mit der rechten Maustaste auf die linke Seite der Zeile, in der sich der Code befindet. Daraufhin wird ein Dropdown-Feld zum Hinzufügen eines bedingten Haltepunkts angezeigt.

Geben Sie einen bedingten Ausdruck ein. Wenn diese Codezeile erreicht ist und der Wert des Ausdrucks wahr ist, wird er unterbrochen. Dies ist flexibler als gewöhnliche Haltepunkte.

Diese Art von Haltepunkt basierend auf Bedingungen wird auch von VSCode und Chrome Devtools unterstützt.

DOM-Haltepunkt

Klicken Sie mit der rechten Maustaste auf das entsprechende Element im Bedienfeld „Elemente“ von Chrome Devtools und wählen Sie „Break on“, um einen Dom-Haltepunkt hinzuzufügen, d. h. wenn sich der Unterbaum ändert, sich das Attribut ändert oder der Knoten entfernt wird . Wenn dies geschieht, wird es aufhören. Kann zum Debuggen von Code verwendet werden, der Dom-Änderungen verursacht.

Da es sich um DOM-Debugging handelt, unterstützt nur Chrome Devtools diesen Haltepunkt.

URL-Haltepunkte

Sie können XHR-URL-Haltepunkte im Quellenbereich von Chrome Devtools hinzufügen. Wenn eine Ajax-Anfrage der URL entspricht, wird sie unterbrochen und kann zum Debuggen von anforderungsbezogenem Code verwendet werden.

Diese Funktion ist nur in Chrome Devtools verfügbar.

Event-Listener-Haltepunkte

Sie können Event-Listener-Haltepunkte auch im Quellenbereich von Chrome Devtools hinzufügen, um anzugeben, welche Ereignisse unterbrochen werden sollen, wenn ein Ereignis auftritt, was zum Debuggen von ereignisbezogenem Code verwendet werden kann.

Diese Funktion ist nur in Chrome Devtools verfügbar.

Ausnahmehaltepunkte

Überprüfen Sie „Nicht abgefangene Ausnahmen“ und „Abgefangene Ausnahmen“ im Debugger-Bedienfeld von VSCode, um Ausnahmehaltepunkte hinzuzufügen und die Spalte zu unterbrechen, wenn eine Ausnahme ausgelöst wird und nicht abgefangen oder abgefangen wird. Dies ist nützlich beim Debuggen von Code, bei dem Ausnahmen auftreten.

Zusammenfassung

Debugger Zusätzlich zu gewöhnlichen Haltepunkten, die direkt auf die entsprechende Codezeile klicken, gibt es viele Möglichkeiten, Haltepunkte basierend auf verschiedenen Situationen hinzuzufügen.

Es gibt insgesamt sechs Typen:

• Gewöhnlicher Haltepunkt: Stoppen, wenn die Operation diesen Punkt erreicht.
• Bedingter Haltepunkt: Stoppen, wenn die Operation diesen Punkt erreicht und der Ausdruck wahr ist gewöhnliche Haltepunkte.
• DOM-Haltepunkt: Unterbricht, wenn sich der Teilbaum des DOM ändert, Attributänderungen oder Knoten gelöscht werden. Er kann zum Debuggen des Codes verwendet werden, der DOM-Änderungen verursacht stimmt mit einem bestimmten Muster überein. Kann zum Debuggen von anforderungsbezogenem Code verwendet werden
• Event-Listener-Haltepunkt: Unterbrechung, wenn ein Ereignis-Listener ausgelöst wird. Kann zum Debuggen von ereignisbezogenem Code verwendet werden
• Ausnahme-Haltepunkt: Die ausgelöste Ausnahme abgefangen oder nicht Das Unterbrechen während der Erfassung kann zum Debuggen des Codes verwendet werden, bei dem Ausnahmen auftreten
• Die meisten dieser Haltepunktmethoden werden von Chrome Devtools unterstützt (normal, bedingt, DOM, URL, Ereignis-Listener, Ausnahme), und einige werden von VSCode unterstützt Debugger (normal, bedingt, abnormal).
Code kann in verschiedenen Situationen unterschiedliche Haltepunktmethoden verwenden, sodass das Debuggen des Codes viel effizienter ist. Wie viele dieser sechs Haltepunktmethoden haben Sie verwendet?

(Lernvideo-Sharing:

Web-Frontend-Tutorial

)

Das obige ist der detaillierte Inhalt vonZusammenfassung und Teilen: 6 Möglichkeiten, Punkte in JavaScript zu unterbrechen (zum Lernen sammeln). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!