Aktivieren Sie die Async -Stapelspuren in den Devtools -Einstellungen, um den Anrufstapel über asynchronisierte Operationen wie Versprechen zu erhalten. Anschlie?end und erwarten Sie, sodass Sie die vollst?ndige Ausführungskette sehen k?nnen. 2. Setzen Sie Breakpoints direkt in asynchronen Funktionen, .then ()/. Catch () Rückrufe und erwarten Sie die Ausdrücke, Variablen zu inspizieren und aufgel?ste Versprechenswerte anzeigen. 3.. Verwenden Sie "Pause für Ausnahmen" und aktivieren Sie "Pause bei gefangenen Ausnahmen", um unberührte Versprechen und Fehler im asynchronen Code zu fangen, der sonst stillschweigend scheitern k?nnte. 4. In asynchronen Rückrufe einfügen. 5. Verstehen Sie die Unterscheidung zwischen Aufgaben (z. B. SetTimeout) und Mikrotasks (z. B. Versprechen), um die Timing- und Ausführungsreihenfolge besser zu interpretieren. Verwenden Sie au?erdem die Haltepunkte für Ereignish?rer, um auf DOM- oder Netzwerkereignissen, die asynchronisierten Code ausl?sen, zu pausieren und die Ursprünge asynchroner Operationen zu verfolgen. Aktivieren von asynchronen Stapeln, Pause bei Ausnahmen und Verwendung von Console.Trace () deckt effektiv die meisten realen Async-Debugging-Szenarien in JavaScript ab.

Das Debuggen von asynchronem Code in JavaScript kann schwierig sein - Callbacks, Versprechen, Asynchronisation/Warte- und Ereignisschleifen machen es schwierig, die Ausführungsfluss zu verfolgen. Chrome Devtools bietet leistungsstarke Funktionen, mit denen Sie den asynchronisierenden Code effektiv debuggen. So benutzt man sie.

1. Verwenden Sie den Anrufstapel und die asynchronen Stapelspuren

Beim Debuggen von asynchronen Funktionen zeigt der regul?re Anrufstapel nur den aktuellen synchronen Kontext, der h?ufig an der Ereignisschleifegrenze bricht (z. B. nach einem Promise.then() ). Dies macht es schwierig zu wissen, wo die asynchronisierte Operation entstanden ist.

Aktivieren Sie asynchrische Stapelspuren:

• Offene Chrome Devtools.
• Gehen Sie zu Einstellungen (Zahnradsymbol) → Einstellungen → Quellen .
• überprüfen Sie "Async Stapel Traces" .

Sobald Chrome aktiviert await , bewahrt Chrome den Anrufstack über asynchronisierte Operationen wie setTimeout , Promise.then . Sie werden ein vollst?ndigeres Bild davon sehen, wie Ihr Code auf einen Haltepunkt gelangt.

Beispiel:
Wenn Sie fetchData() → fetch() → .then(handleResult) → handleResult() haben, zeigt der Klicken in handleResult die vollst?ndige Kette, nicht nur den Rückruf von .then() .

2. Setzen Sie Bruchpunkte in Versprechen und asynchronen Funktionen

Sie k?nnen asynchronisierten Code genauso debuggen, genau wie Sync -Code - Einsetzen von Haltepunkten direkt in:

• async Funktionsk?rper
• .then() und .catch() Rückrufe
• Code im Inneren await Ausdrücke

Tipps:

• Verwenden Sie den Cod-of-Code-Breakpoints, indem Sie auf die Registerkarte Quellen auf die Zeilennummer klicken.
• Wenn die Ausführung in einer async Funktion einen Haltepunkt trifft, zeigt das await auf dem aufgel?sten Wert nach Abschluss des Versprechens an.
• Bewegen Sie sich über Variablen, um rejected aktuellen Zustand fulfilled inspizieren pending

3. Verwenden Sie die Funktion "Pause auf Ausnahmen"

Unbehandeltes Versprechen Ablehnungen oder Fehler in asynchronen Rückern k?nnen schwer zu fangen sein, da sie nicht immer sofortige Halten ausl?sen.

Aktivieren Sie die intelligente Ausnahme pausieren:

• Klicken Sie in der Registerkarte Devtools Quellen auf die Schaltfl?che Ausnahmen auf die Pause (?).
• überprüfen Sie bei Bedarf "Pause auf gefangenen Ausnahmen" .
• Chrome wird nun wegen ungehandeltem Versprechen nach Ablehnungen innehalten (mit --unhandled-rejections=strict Flag oder in modernen Versionen).

Dies hilft Ihnen dabei, Fehler in .then() Rückrufe zu fangen oder auf Ausdrücke await , die sonst stillschweigend scheitern k?nnten.

4. Verwenden Sie Console.trace () für schnelles Debuggen

Wenn Sie keine Haltepunkte verwenden, besprengen Sie console.trace() in Ihre asynchronen Rückrufe, um den aktuellen Async -Anrufstapel an der Konsole zu protokollieren.

 asynchrische Funktion Schritt 1 () {
  Schritt 2 ();
}

asynchrische Funktion Schritt 2 () {
  warte versprachen. Resolve ();
  console.trace ("Woher sind wir hierher gekommen?");
}

Dies gibt eine Trace aus, die den asynchronen Pfad zeigt - selbst über Mikrotasks hinweg - hilfreich, wenn Sie die Ausführung nicht innehalten k?nnen oder nicht.

5. Task verstehen vs microtask in der Ereignisschleife

Chrome Devtools unterscheidet nicht visuell zwischen Aufgaben (z. B. setTimeout ) und Mikrotasks (z. Promise.then ), aber das Verst?ndnis tr?gt dazu bei, die Ausführungsreihenfolge zu interpretieren.

• Aufgaben : UI -Ereignisse, setTimeout , setInterval
• Mikrotasks : Promise.then . Then, queueMicrotask , MutationObserver

Mikrotasks werden vor der n?chsten Aufgabe ausgeführt, was zu unerwarteten Verz?gerungen oder Verwirrungen beim Debugging -Timing führen kann.

Tipp: Verwenden Sie performance.now() oder console.time() um das tats?chliche Timing bei Debuggen von Rennbedingungen zu messen.

Bonus: Verwenden Sie die Event -H?rer -Haltepunkte

Manchmal wird Async -Code durch DOM -Ereignisse oder Netzwerkantworten ausgel?st.

In der Registerkarte Quellen :

• Erweitern Sie den Ereignis -H?rer -Haltepunkt (rechts).
• Aktivieren Sie Breakpoints für Ereignisse wie click , fetch oder timeout .

Auf diese Weise k?nnen Sie direkt innehalten, wenn ein asynchronisierter Vorgang geplant ist, wodurch die Rückverfolgung auf Benutzeraktionen oder API -Anrufe zurückgeführt wird.

Das Debugieren von asynchronisiertem Code in Chrome Devtools muss nicht schmerzhaft sein. Wenn asynchrische Stapelspuren aktiviert sind, intelligente Breakpoints und die richtige Ausnahmebehandlung, k?nnen Sie dem Fluss wie synchron folgen. Der Schlüssel besteht darin, zu wissen, wo man nachsehen soll - und die richtigen Einstellungen einschalten.

Aktivieren Sie im Grunde genommen asynchronische Stapel, pausieren Sie bei Ausnahmen und verwenden Sie console.trace() bei Bedarf. Das umfasst die meisten Debugging-Szenarien in der realen Welt.

Das obige ist der detaillierte Inhalt vonDebugging asynchroner Code in Chrome Devtools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!