Artikel sebelumnya telah memperkenalkan beberapa pengetahuan dasar dari seri debugging JS. Kali ini, saudara -saudara kode yang kacau telah membawakan Anda breakpoint JS dan metode debugging yang dinamis. Teman yang membutuhkannya bisa merujuknya.
Latihan setelah kelas yang saya tinggalkan kemarin 1. Menganalisis bagaimana fungsi sulung diimplementasikan seperti yang direkomendasikan.
Bahkan, kami telah melihat kode sumber. Baca saja kode sumber dan Anda bisa tahu bagaimana itu diimplementasikan.
fungsi sulung (n, t, i) {i || (i =! 1); var r = {blogapp: currentBlogApp, postid: n, votetype: t, isabandoned: i}; $ ("#Digg_tips"). CSS ("Color", "Red"). HTML ("Commit ..."); $ .AJAX ({url: "/mvc/vote/voteblogpost.aspx", type: "Post", DataType: "JSON", ContentType: "Application/Json; Charset = UTF-8", data: json.stringify (r), Success: function (n) {if (n.iscess) {r) (r) (n) {if (n.iscess) {r) (r) (n) {if (n.iscess) {r) (r) (n) {if (n.iscess) {r) (r) (n) {if (n.iscess) {r) {r) (n) {if (n.iscess) {r) (n) {if (n.isuccess) {r) {n) {n.isuccess) {n) {n.isuccess) {n. "_count"); && (n.status == 500? $ ("#digg_tips"). html ("Maaf! Terjadi kesalahan! Harap umpan balik ke [email protected]"): $ ("#digg_tips"). html (n.responsetext))}}); }Hampir seperti ini.
PS: Saya menggunakan kode yang diformat teks luhur, yang sedikit berbeda dari hasil setelah memformat pada konsol chrome.
Anda juga dapat mencoba alat pemformatan online ini, efeknya serupa: javascript online cantik
Setelah membaca kode secara sederhana, Anda dapat secara kasar tahu bahwa fungsi ini memiliki 3 parameter. Yang pertama adalah postid, yang merupakan ID artikel, dan yang kedua adalah Rekomendasi (Digg) atau Oposisi (Bury).
Tetapi yang ketiga belum digunakan, dan nilai defaultnya salah
Melihat ke bawah, ia menampilkan string "Kirim ..." di #digg_tips, dan kemudian mengirimkan data ke latar belakang melalui AJAX.
Setelah mengembalikan data, jika n.issuccess benar, itu akan +1 pada ID hitungan yang sesuai dari (#digg_count) atau keberatan (#bury_count).
Namun, jika nilai isabandoned itu benar, hitung -1.
Kemudian kita dapat menebak bahwa parameter ketiga digunakan untuk mencabut rekomendasi atau keberatan. Sederhananya, saya mengklik rekomendasi, tetapi saya tidak ingin merekomendasikannya sekarang. Saya dapat melewati parameter ketiga yang benar untuk mencapai efek membatalkan rekomendasi.
Mari kita mengujinya nanti.
Selanjutnya, informasi N.Message yang dikembalikan oleh server ditampilkan di #DIGG_TIPS.
Jika kesalahan terjadi di Ajax, itu adalah 500. Ini akan meminta "Maaf! Kesalahan telah terjadi! Silakan umpan balik ke [email protected]" Status lain secara langsung meminta server untuk pesan kesalahan yang dikembalikan.
Ini adalah proses umum, karena fungsi ini sederhana, dapat dilihat sekilas.
Beberapa teman baru mungkin bertanya, bagaimana Anda tahu apa nilai Currentblogapp, N, T, I?
Lalu mari kita pergi ke langkah berikutnya dan debugging dinamis. Dinamis debugging adalah metode yang sangat berguna untuk proyek yang dikompilasi.
Pertama -tama temukan kode Sumber sulap, (saya katakan ini kemarin dan tidak terlalu memahaminya, lalu kembali dan lihat lebih dulu.)
Sangat mudah, kami telah menemukan kode sumber.
Selanjutnya, kami mengklik nomor 92 dan melakukan operasi breakpoint.
Mengapa tidak breakpoint di baris 91?
Karena baris 91 adalah bagian deklarasi fungsi, kami tidak dapat mengatur breakpoint, kami dapat mengatur breakpoint pada kode untuk dieksekusi oleh fungsi.
Melihat bahwa jumlah garis baris 91 telah berubah menjadi biru, menunjukkan bahwa telah ada breakpoint di tempat ini. Pada saat yang sama, kita dapat melihat breakpoint yang jatuh di kolom Breakpoints di sebelah kanan.
Kolom Breakpoints mengelola semua breakpoint, yang dapat dengan mudah diarahkan ke posisi breakpoint yang sesuai, dan akan digunakan di masa depan.
Sekarang kami telah selesai mengatur breakpoint, kami akan mengklik rekomendasi. . (Meskipun saya merasa seperti saya selingkuh pada rekomendasi, saya benar -benar tidak berpikir begitu. Saya baru saja menemukan tombol untuk berlatih.)
Ketika Anda mengklik tombol rekomendasi, sesuatu yang keajaiban terjadi. Alih -alih menjalankan fungsi rekomendasi, Anda melompat ke breakpoint kami baru saja menurunkan di panel sumber konsol.
Sekarang, Anda tidak hanya dapat melihat variabel saat ini di kolom Variabel Lingkup di sebelah kanan, tetapi juga memindahkan mouse langsung ke variabel apa pun untuk melihat nilai variabel.
Kolom lingkup variabel menampilkan ruang lingkup saat ini dan ruang lingkup induknya, serta penutupan.
Bukankah itu sangat nyaman? . (Variabel lingkup banyak membantu saya ketika saya pertama kali belajar penutupan.)
Mari kita pergi ke langkah berikutnya dan tekan F10 3 kali untuk melihat sesuatu seperti ini.
Setiap kali kami menekan F10, kami akan menjalankan pernyataan. Setelah menekannya 3 kali sekarang, kami akan mengeksekusi $ ("#digg_tips"). CSS ("Color", "Red"). Html ("Kirim ...");
Jadi kita dapat melihat #digg_tips yang menampilkan kata -kata dalam pengiriman di halaman.
Tetapi ketika kami menekan F10 lagi, kami menemukan bahwa itu terus mengeksekusi sepanjang jalan tanpa memasukkan fungsi callback di dalam Ajax.
Ini adalah pertanyaan yang membingungkan, dan saya ingin fokus padanya.
Untuk fungsi panggilan balik seperti ini, terutama asinkron, kita perlu breakpoint berikutnya di dalam fungsi callback.
Jadi kita bisa mengatur breakpoint pada baris 96. Sekarang kita mengklik rekomendasi dan masih berhenti di baris 92. Kita bisa menekan F8 dan memecahkannya di Ajax Callback Function.
Sekarang, kami dapat men -debug data panggilan balik, dan kami juga dapat menemukan bahwa ada hal penutupan tambahan dalam variabel ruang lingkup di sebelah kanan, yang merupakan penutupan.
Jika Anda tidak dapat memahaminya sekarang, maka lakukan saja. Hal ini perlu diperkenalkan dalam waktu yang besar, dan tidak dapat dijelaskan hanya dalam beberapa kata. Bagaimanapun, konsolnya sangat kuat.
Saat melihat penutupan, kami juga melihat data pengembalian A jax. Jelas bahwa properti issuccess saya salah dan belum berhasil karena mengembalikan pesan "tidak dapat merekomendasikan konten Anda sendiri".
Bukankah itu sangat menarik? Debugging dinamis membuatnya mudah untuk menemukan bug?
Selanjutnya, mari bereksperimen dengan parameter ketiga.
Kami memasuki sumsum (cb_entryid, 'digg', true); dan tekan Enter.
Itu juga berhenti di breakpoint baris 92, jadi tidak akan men -debug dalam hal ini, dan langsung memasukkan fungsi panggilan balik AJAX dari F8.
Di sini kita dengan jelas melihat bahwa ketika parameter ketiga benar, rekomendasi itu memang dibatalkan. Pada saat yang sama, Anda dapat melihat bahwa nomor rekomendasi memang -1, bahkan jika itu disegarkan.
Kali ini kami menggunakan dua tombol pintas F10 dan F8. Kami akan memperkenalkannya secara detail besok. Hari ini kita akan belajar debugging dasar terlebih dahulu.
Latihan After-Class: (Meningkatkan Kesulitan)
1. Lihat tombol Kirim Komentar untuk komentar di bawah ini dan temukan acaranya. (jQuery terikat)
2. Debug secara dinamis proses eksekusi dari acara komentar pengiriman ini.
Jika Anda tidak mengetahui latihan ini, disarankan untuk membaca "pembicaraan singkat tentang masalah penentuan kode sumber acara jQuery" untuk analisis terperinci.
Artikel ini berasal dari: Artikel Blog Garden Blogger yang kacau. http://www.cnblogs.com/52cik/