Debugging Kod Asynchronous di Chrome Devtools

Aktifkan jejak timbunan async dalam tetapan DevTools untuk mengekalkan timbunan panggilan merentasi operasi async seperti janji dan menunggu, membolehkan anda melihat rantaian pelaksanaan penuh. 2. Tetapkan titik putus secara langsung dalam fungsi async, .then ()/. Catch () panggil balik, dan menunggu ekspresi untuk memeriksa pembolehubah dan melihat nilai janji yang diselesaikan. 3. Gunakan "Jeda pada Pengecualian" dan membolehkan "Jeda pada Pengecualian Tertangkap" untuk menangkap penolakan janji dan kesilapan dalam kod async yang mungkin gagal dengan senyap. 4. Masukkan konsol.trace () dalam panggilan balik async untuk log stack panggilan async dan aliran pelaksanaan surih tanpa berhenti. 5. Memahami perbezaan gelung peristiwa antara tugas (contohnya, setTimeout) dan microtasks (contohnya, janji. Di samping itu, gunakan titik pemecatan pendengar acara untuk menjeda peristiwa DOM atau rangkaian yang mencetuskan kod async, membantu mengesan asal -usul operasi tak segerak. Mengaktifkan susunan async, berhenti pada pengecualian, dan menggunakan konsol.trace () dengan berkesan merangkumi kebanyakan senario debugging async dunia dalam JavaScript.

Debugging Kod Asynchronous dalam JavaScript boleh menjadi rumit -callbacks, janji, async/menunggu, dan gelung acara menjadikan sukar untuk mengesan aliran pelaksanaan. Chrome Devtools menawarkan ciri -ciri yang kuat untuk membantu anda debug kod async dengan berkesan. Inilah cara menggunakannya.

1. Gunakan tumpukan panggilan dan jejak timbunan async

Apabila menyahpepijat fungsi async, timbunan panggilan biasa hanya menunjukkan konteks segerak semasa, yang sering pecah di sempadan gelung peristiwa (misalnya, selepas Promise.then() ). Ini menjadikan sukar untuk mengetahui di mana operasi async berasal.

Dayakan jejak timbunan async:

• Buka Chrome Devtools.
• Pergi ke Tetapan (Ikon Gear) → Keutamaan → Sumber .
• Semak "Async Stack Traces" .

Sebaik sahaja diaktifkan, Chrome mengekalkan timbunan panggilan merentasi operasi async seperti setTimeout , Promise.then , dan await . Anda akan melihat gambaran yang lebih lengkap tentang bagaimana kod anda mendapat titik putus.

Contoh:
Jika anda mempunyai fetchData() → fetch() → .then(handleResult) → handleResult() , dengan susunan async diaktifkan, mengklik ke handleResult akan menunjukkan rantaian penuh, bukan hanya panggilan balik .then() .

2. Tetapkan titik putus dalam janji dan fungsi async

Anda boleh menyahpepijat kod async seperti kod break -break Code -shink secara langsung di:

• badan fungsi async
• .then() dan .catch() Callbacks
• Kod di dalam Ekspresi await

Petua:

• Gunakan titik pemecahan line-of-code dengan mengklik nombor baris dalam tab Sumber .
• Apabila pelaksanaan mencecah titik putus di dalam fungsi async , kata kunci await akan menunjukkan nilai yang diselesaikan sebaik sahaja janji selesai.
• Bergegas ke atas pembolehubah untuk memeriksa keadaan semasa mereka -walaupun janji -janji menunjukkan status mereka ( pending , fulfilled , rejected ) dan nilai.

3. Gunakan ciri "Jeda pada Pengecualian"

Penolakan janji atau kesilapan yang tidak diingini dalam panggilan balik async boleh menjadi sukar untuk ditangkap kerana mereka tidak selalu mencetuskan berhenti segera.

Dayakan pengecualian pintar berhenti:

• Dalam tab Sumber DevTools, klik butang Jeda pada Butang Pengecualian (?).
• Semak "Jeda pada Pengecualian Tertangkap" jika diperlukan.
• Chrome kini akan menjeda penolakan janji yang tidak diingini (dengan --unhandled-rejections=strict atau dalam versi moden).

Ini membantu anda menangkap kesilapan dalam .then() panggilan balik atau await ekspresi yang mungkin gagal dengan senyap.

4. Gunakan konsol.trace () untuk debugging cepat

Jika anda tidak menggunakan titik putus, taburkan console.trace() dalam panggilan balik async anda untuk log timbunan panggilan async semasa ke konsol.

 fungsi async langkah1 () {
  langkah2 ();
}

fungsi async step2 () {
  menunggu janji.Resolve ();
  Console.Trace ("Di manakah kita sampai di sini?");
}

Ini mengeluarkan jejak yang menunjukkan laluan async -walaupun merentasi microtasks -membantu apabila anda tidak boleh atau tidak mahu menjeda pelaksanaan.

5. Memahami tugas vs microtask dalam gelung acara

Chrome Devtools tidak membezakan secara visual antara tugas -tugas (contohnya, setTimeout ) dan microtasks (contohnya, Promise.then .

• Tugas : Acara UI, setTimeout , setInterval
• Microtasks MutationObserver Promise.then queueMicrotask

Microtasks dijalankan sebelum tugas seterusnya, yang boleh menyebabkan kelewatan atau kekeliruan yang tidak dijangka dalam masa debugging.

Petua: Gunakan performance.now() atau console.time() untuk mengukur masa sebenar apabila menyahpepijat keadaan perlumbaan.

Bonus: Gunakan titik putus pendengar acara

Kadang -kadang kod async dicetuskan oleh peristiwa DOM atau respons rangkaian.

Dalam tab Sumber :

• Memperluaskan titik pemecatan pendengar (di sebelah kanan).
• Dayakan titik putus untuk acara seperti click , fetch , atau timeout .

Ini membolehkan anda berhenti sejenak apabila operasi async dijadualkan, membantu mengesan kembali ke tindakan pengguna atau panggilan API.

Debugging kod async di Chrome Devtools tidak perlu menyakitkan. Dengan jejak stack async diaktifkan, titik putus pintar, dan pengendalian pengecualian yang betul, anda boleh mengikuti aliran seperti itu segerak. Kuncinya adalah mengetahui di mana hendak melihat -dan menghidupkan tetapan yang betul.

Pada asasnya, membolehkan susunan async, jeda pada pengecualian, dan gunakan console.trace() apabila diperlukan. Itu meliputi senario debugging dunia yang paling nyata.

Atas ialah kandungan terperinci Debugging Kod Asynchronous di Chrome Devtools. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!