Ringkasan dan perkongsian: 6 cara untuk memecahkan mata dalam JavaScript (kumpul untuk pembelajaran)

Artikel ini akan meringkaskan dan berkongsi dengan anda 6 cara untuk memecahkan mata dalam JavaScript Perlu dipelajari dan dikumpulkan. Semoga ia membantu semua orang!

Penyahpepijat ialah alat yang sangat penting untuk pembangunan bahagian hadapan. Ia boleh berhenti pada kod yang kami ambil berat dan menjelaskan logik melalui operasi satu langkah. Kualiti penyahpepijat berkait secara langsung dengan kualiti titik putus.

Kedua-dua Chrome Devtools dan VSCode menyediakan Penyahpepijat, yang menyokong 6 cara untuk memecahkan mata.

Titik putus biasa

Anda boleh menambah titik putus dengan mengklik pada sebelah kiri garisan yang ingin anda putuskan, dan garis itu akan putus apabila berlari ke sana.

Ini ialah kaedah titik putus yang paling asas Kedua-dua VSCode dan Chrome Devtools menyokong titik putus ini. [Cadangan berkaitan: Tutorial pembelajaran javascript]

Titik putus bersyarat

Klik kanan pada sebelah kiri baris di mana kod itu terletak, dan kotak lungsur akan muncul , anda boleh menambah titik putus bersyarat.

Masukkan ungkapan bersyarat apabila baris kod ini dicapai dan nilai ungkapan itu benar, ia akan pecah daripada titik putus biasa.

Titik putus jenis ini berdasarkan syarat turut disokong oleh VSCode dan Chrome Devtools.

titik putus DOM

Klik kanan pada elemen yang sepadan dalam panel Elemen Chrome Devtools dan pilih putus untuk menambah titik putus dom, iaitu, apabila Ia akan terganggu apabila subpokok berubah, atribut berubah, atau nod dialih keluar. Boleh digunakan untuk nyahpepijat kod yang menyebabkan perubahan dom.

Oleh kerana ia melibatkan penyahpepijatan DOM, hanya Chrome Devtools menyokong titik putus ini.

Titik putus URL

Anda boleh menambah titik putus url XHR dalam panel Sumber Chrome Devtools Ia akan rosak apabila permintaan ajax sepadan dengan url, yang boleh digunakan untuk menyahpepijat kod berkaitan permintaan .

Ciri ini hanya tersedia dalam Chrome Devtools.

Titik putus Pendengar Acara

Anda juga boleh menambah titik putus Pendengar Acara dalam panel Sumber Chrome Devtools untuk menentukan apabila peristiwa berlaku pecah, yang boleh digunakan untuk menyahpepijat kod berkaitan acara.

Ciri ini hanya tersedia dalam Chrome Devtools.

Titik putus pengecualian

Semak Pengecualian Tidak Ditangkap dan Pengecualian Tertangkap dalam panel Penyahpepijat VSCode untuk menambah titik putus pengecualian dan pecahkan lajur apabila pengecualian yang dilemparkan tidak ditangkap atau ditangkap. Ia berguna apabila menyahpepijat beberapa kod di mana pengecualian berlaku.

Ringkasan

Selain titik putus biasa yang diklik terus pada baris kod yang sepadan, terdapat banyak cara untuk memecahkan titik berdasarkan situasi yang berbeza . Bagaimana untuk menambah titik putus.

Terdapat enam jenis kesemuanya:

• Titik putus biasa: Berhenti apabila berlari pada titik itu
• Titik putus bersyarat: Break apabila dijalankan di sana dan ungkapan adalah benar, lebih fleksibel daripada titik putus biasa
• titik putus DOM: Apabila subtree DOM berubah, atribut berubah atau nod dipadamkan Break, boleh digunakan untuk nyahpepijat kod yang menyebabkan perubahan DOM
• titik putus URL: Pecah apabila URL sepadan dengan corak tertentu, boleh digunakan untuk nyahpepijat kod berkaitan permintaan
• Acara Titik putus pendengar: Putus apabila pendengar acara dicetuskan, yang boleh digunakan untuk nyahpepijat kod berkaitan acara
• Titik putus pengecualian: Pengecualian dilemparkan Pecah apabila ditangkap atau tidak ditangkap boleh digunakan untuk menyahpepijat kod di mana pengecualian berlaku

Kebanyakan kaedah titik putus ini disokong oleh Chrome Devtools (biasa, bersyarat, DOM, URL, Pendengar Acara, pengecualian) dan sesetengahnya disokong oleh VSCode Penyahpepijat (normal, bersyarat, pengecualian).

Kod dalam situasi berbeza boleh menggunakan kaedah titik putus yang berbeza, jadi nyahpepijat kod akan menjadi lebih cekap. Berapa banyak daripada enam kaedah titik putus ini yang telah anda gunakan?

(Mempelajari perkongsian video: tutorial bahagian hadapan web)

Atas ialah kandungan terperinci Ringkasan dan perkongsian: 6 cara untuk memecahkan mata dalam JavaScript (kumpul untuk pembelajaran). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!