1. Apa debugging breakpoint? Apakah itu sulit?
Breakpoint Debugging sebenarnya bukan hal yang rumit. Pemahaman sederhana tentang tidak ada panggilan keluar adalah untuk membuka browser, membuka sumber, menemukan file JS, dan klik pada nomor baris. Tampaknya sangat sederhana untuk beroperasi, tetapi apa yang sebenarnya bingung adalah di mana harus melanggar intinya? (Mari kita lihat screenshot breakpoint, mengambil breakpoint browser Chrome sebagai contoh)
Ingat langkahnya?
Buka halaman dengan browser chrome → tekan F12 untuk membuka alat pengembang → buka sumber → buka file kode JS yang ingin Anda debug → klik nomor baris, oke! Selamat untuk breakpoint perawan Anda karena memukul, haha ~~
2. Bagaimana cara mencapai breakpoint dengan tepat?
Pengoperasian breakpoint sangat sederhana. Masalah intinya adalah, bagaimana cara mencapai breakpoint untuk memecahkan masalah masalah dengan kode? Izinkan saya terus memberi Anda contoh untuk dipahami. Tanpa basa -basi lagi, gambar di atas:
Misalkan kita sekarang menerapkan fungsi yang memuat lebih banyak, seperti yang ditunjukkan pada gambar di atas, tetapi ada masalah dengan memuat lebih banyak fungsi. Setelah mengklik, data tidak dimuat. Apa yang harus kita pikirkan saat ini? (Tulis jawabannya di baris lain, dan Anda dapat melihat apa reaksi pertama Anda)
Hal pertama yang terlintas dalam pikiran saya adalah apakah klik saya berhasil? Apakah metode dalam acara klik berjalan? Oke, jika Anda ingin mengetahui jawaban untuk pertanyaan ini, mari kita coba tekan breakpoint segera. Dimana breakpoint? Pikirkan dulu.
Gambar berikutnya:
Apakah Anda memikirkannya? Itu benar, karena kami ingin tahu apakah klik berhasil, tentu saja kami menambahkan breakpoint di acara klik dalam kode. Ingatlah untuk tidak menambahkannya di baris 226, karena fungsi dalam metode klik dijalankan, bukan pemilih baris 226. Breakpoint telah dipukul sekarang, jadi apa yang harus dilakukan? Pikirkan sendiri ~
Lanjutkan ke gambar di atas:
Lalu tentu saja kami kembali dan mengklik tombol Load More, mengapa? Dahi. . . Jika Anda menanyakan ini, izinkan saya untuk menggunakan emoticon ini, tanpa mengklik tombol Load More, bagaimana cara memicu acara klik? Bagaimana cara menjalankan fungsi di acara klik tanpa memicu acara klik? Gemuruh. . Tapi saya yakin semua orang tidak akan mengajukan pertanyaan rendah seperti itu ~ Saya tidak akan berbicara omong kosong ~
Lanjutkan ke topik, gambar di atas adalah situasi setelah mengklik tombol Load More. Kita dapat melihat bahwa halaman di sebelah kiri dicakup oleh lapisan tembus cahaya. Ada juga serangkaian bahasa Inggris dan dua tombol di atas halaman. 227 baris kode di sebelah kanan telah ditambahkan dengan warna latar belakang. Situasi ini terjadi, tidak peduli apa arti tombolnya dan apa fungsi mereka. Informasi apa yang Anda dapatkan dari gambar ini? Terus memikirkannya ~
Jika situasi di atas terjadi, itu berarti bahwa fungsi dalam acara klik telah dipanggil, yang lebih lanjut menjelaskan bahwa acara klik berlaku. Kemudian "tersangka kriminal" pertama yang kami sebabkan pada masalah ini dikesampingkan.
Untuk menambahkan:
Bagaimana jika situasi di atas tidak terjadi? Apakah itu berarti bahwa acara klik belum berlaku? Apa yang menyebabkan acara klik tidak berlaku? Semua orang memikirkannya sendiri ~
Ada banyak alasan mengapa acara klik tidak berlaku, seperti kesalahan multi-selektor, kesalahan sintaksis, elemen yang dipilih kemudian dihasilkan, dll. Bagaimana cara menyelesaikannya?
Pemilih salah, Anda dapat terus melihat konten bagian konsol nanti, saya pikir semua orang tahu bagaimana menghadapinya.
Kesalahan sintaks, periksa dengan cermat. Anda dapat membandingkan tata bahasa yang tidak dikenal di Baidu.
Elemen yang dipilih dihasilkan nanti. Cara termudah untuk menanganinya adalah dengan menggunakan metode .on (). Hal ini diproses dengan delegasi acara. Anda dapat menggunakan Baidu untuk detailnya.
Jadi di mana identitas "tersangka kriminal" akan dikunci selanjutnya?
Kami mengalihkan perhatian kami ke acara di dalam, dan acara klik dipicu, jadi masalah berikutnya adalah masalah fungsi di dalamnya. Jika Anda ingin bertanya mengapa? Tolong beri saya sepotong tahu. . .
Misalnya, saya akan memberi Anda pena dan meminta Anda untuk menulis. Kemudian Anda menulis satu kata di atas kertas dan menemukan bahwa kata itu tidak keluar. Mengapa? Anda bilang saya menulisnya, dan masih ada goresan di atas kertas. Mungkinkah pena tidak memiliki tinta atau ujungnya rusak? Contoh ini lebih merupakan prinsip pemuatan klik. Tindakan penulisan adalah operasi klik, dan fungsi internal adalah tinta atau tip pena. Apakah Anda mengerti ~
Selanjutnya, kami menganalisis konten acara klik, yang berisi tiga kalimat. Kalimat pertama adalah bahwa variabel yang saya tanam sendiri, kalimat kedua adalah menambahkan tag I ke tombol, dan kalimat ketiga adalah memanggil metode meminta data.
Melalui peran ketiga kalimat ini, kita dapat menempatkan sebagian besar kecurigaan dalam kalimat ketiga dan sebagian kecil pada kalimat pertama dan kedua. Beberapa orang mungkin bertanya -tanya, bagaimana kalimat kedua bisa mencurigakan? Fungsinya hanya untuk menambahkan label, yang tidak berpengaruh pada data sama sekali. Memang, kalimat ini tidak berpengaruh pada data, tetapi untuk pertimbangan yang ketat, mungkin masih membuat kesalahan, misalnya, bagaimana jika tidak memiliki titik koma? Atau apakah ada simbol di dalam kalimat yang salah? Seringkali, masalah kecil inilah yang membuang banyak waktu kita.
OK, untuk mengunci lebih lanjut dalam "Tersangka Kriminal", saya akan memperkenalkan Anda ke sebuah alat, yang juga merupakan salah satu dari dua ikon yang muncul di gambar di atas, lihat gambar di bawah ini:
Fungsi ikon kecil ini disebut "eksekusi dengan kalimat" atau "eksekusi langkah demi langkah". Ini adalah nama yang saya pahami secara pribadi, yang berarti bahwa setiap kali saya mengkliknya, pernyataan JS akan menjalankan kalimat nanti, dan juga memiliki kunci pintasan, F10. Gambar berikut menunjukkan efek setelah diklik:
Saya mengklik tombol ini dua kali (atau menggunakan kunci pintasan F10), dan kode JS dieksekusi dari baris 227 ke baris 229, jadi saya menyebutnya "pernyataan demi langkah" atau "langkah demi langkah". Fungsi ini sangat praktis dan akan digunakan untuk sebagian besar debugging.
Sudah terlambat, saya akan terus menulis besok, pertunjukan yang bagus masih datang ~
―6 ―6 ―6 secara
Oke, terus menulis!
Pendahuluan di atas menunjukkan bahwa saya mengklik tombol "Kalimat-oleh-Konsentensi" dua kali, dan kode berjalan dari baris 227 ke baris 229. Menurut Anda apa artinya ini? Apakah ini berarti bahwa dari sudut pandang tata bahasa, dua kalimat pertama tidak bermasalah, jadi apakah itu juga berarti bahwa dua kalimat pertama menghilangkan kecurigaan? Saya tidak melihatnya.
Seperti yang kita semua tahu, memuat lebih banyak adalah fungsi dari halaman berikutnya, dan yang paling inti adalah nilai nomor halaman yang diteruskan ke latar belakang. Setiap kali saya mengklik tombol Load More sekali, nilai nomor halaman harus ditingkatkan dengan 1. Jadi jika data pada halaman berikutnya tidak keluar, mungkinkah ada masalah dengan nilai nomor halaman, yaitu, [i variabel] (berikut ini adalah nama terpadu i)? Jadi bagaimana cara memecahkan masalah apakah ada masalah dengan nomor halaman? Semua orang berpikir dulu.
Berikut adalah dua cara untuk melihat nilai output aktual dari nomor halaman i], gambar di atas:
Tipe pertama:
Langkah operasi adalah sebagai berikut:
1. Masih tekan breakpoint pada baris 227 → 2. Klik tombol LOAD More → 3. Klik tombol "Eksekusi Pernyataan menurut Kalimat" sekali, dan kode JS akan dieksekusi ke baris 228 → 4. Gunakan mouse untuk memilih i ++ (apa yang Anda tidak mengerti? Hasil dalam gambar di atas.
Tipe kedua:
Metode ini sebenarnya mirip dengan yang pertama, kecuali bahwa nilai i adalah output pada konsol. Anda hanya perlu mengikuti metode pertama untuk dieksekusi ke langkah 3 → 4. Buka konsol level yang sama dengan sumber → 5. Masukkan i → 6. Tekan tombol Enter ENTER.
Dalam metode kedua di atas, konsol disebutkan. Kita bisa menyebutnya konsol atau apapun. Ini tidak penting. Konsol memiliki fungsi yang sangat kuat. Selama proses debugging, kita sering perlu tahu apa nilai variabel tertentu output, atau apakah kita menggunakan pemilih [$ ". Div") untuk memilih elemen yang kita inginkan, dll., Dapat dicetak pada konsol. Tentu saja, dimungkinkan juga untuk menggunakan metode pertama secara langsung.
Izinkan saya menunjukkan kepada Anda elemen yang ingin kami pilih di konsol. Gambar di atas ~
Masukkan $ (ini) di konsol untuk mendapatkan elemen yang dipilih. Ya, itu adalah objek yang kami klik - muat lebih banyak elemen tombol.
Di sini saya akan memberi tahu Anda pemahaman saya tentang konsol konsol: benda ini adalah parser JS, yang digunakan oleh browser itu sendiri untuk mengurai orang yang menjalankan JS. Namun, browser memungkinkan pengembang AS untuk mengontrol operasi dan output JS selama proses debugging melalui konsol. Melalui dua metode di atas, Anda mungkin berpikir itu sangat mudah digunakan, tetapi saya ingin mengingatkan Anda, atau itu adalah kebingungan bahwa beberapa pemula lebih cenderung bertemu.
Bingung 1: Ketika tidak ada titik istirahat, masukkan saya di konsol, dan konsol melaporkan kesalahan.
Ini harus menjadi masalah umum bagi pemula. Mengapa saya tidak dapat secara langsung mengeluarkan nilai variabel di konsol tanpa melanggar intinya? Secara pribadi, saya mengerti bahwa saya hanyalah variabel lokal saat ini. Jika tidak ada breakpoint yang ditetapkan, browser akan mengurai semua JS. Konsol tidak dapat mengakses variabel lokal, tetapi hanya dapat mengakses variabel global. Oleh karena itu, konsol akan melaporkan kesalahan yang tidak saya tentukan, tetapi ketika JS mencapai breakpoint, konsol ini mem -parsing ke dalam fungsi di mana variabel lokal I berada, dan saya dapat diakses saat ini.
Kebingungan 2: Mengapa saya bisa mencetak sesuatu langsung ke $ (". Xxx") di konsol?
Ini sangat sederhana. Konsol itu sendiri adalah parser JS, dan $ (". xxx") adalah pernyataan JS, jadi konsol secara alami dapat menguraikan pernyataan ini dan menghasilkan hasilnya.
Setelah memperkenalkan penggunaan tombol dan konsol "Kalimat-oleh-Konsentensi", kami akhirnya akan memperkenalkan tombol, gambar di atas:
Saya memanggil tombol ini tombol "Eksekusi proses", yang berbeda dari tombol "Eksekusi Pernyataan". Tombol "Eksekusi Proses" sering digunakan ketika metode memanggil beberapa file JS. Kode JS yang terlibat relatif panjang, jadi tombol ini akan digunakan.
Di atas:
Misalkan dalam gambar di atas, saya hanya membuat breakpoint pada baris 227, dan kemudian terus mengklik tombol "Eksekusi dengan kalimat" ke baris 229, bagaimana jika saya mengklik tombol "Eksekusi dengan kalimat" lagi? Itu akan memasuki JS di gambar berikut:
Ini adalah isi dari file perpustakaan Zepto. Tidak ada yang bagus untuk ditonton. Sangat rumit untuk dijalankan. Kami tidak selalu dapat menggunakan tombol "Kalimat-oleh-Konsentensi", jadi Anda akan menemukan bahwa Anda telah menekan hampir sepanjang hari dan masih berputar-putar di file perpustakaan. . . Apa yang harus dilakukan saat ini? Maka sudah waktunya untuk "proses eksekusi proses demi proses" untuk naik ke atas panggung.
Di atas:
Selain mengatur breakpoint pada baris 227, saya juga menekan breakpoint pada baris 237. Ketika kami menjalankan ke baris 229, langsung mengklik tombol "Process-by-Process Execution". Anda akan menemukan bahwa JS langsung melewatkan file perpustakaan dan berlari ke jalur 237. Anda dapat menggunakannya sendiri untuk mengalaminya.
Ringkasan terakhir:
Artikel ini terutama memperkenalkan tiga alat "Tombol Eksekusi-oleh-Konsentensi-oleh-Serial" Tombol, "Tombol Eksekusi-demi-Serial Proses", konsol konsol, dan beberapa ide saat men-debug bug. Saya tidak akan mengulangi penggunaan alat. Ketahuilah penggunaannya. Bagaimana menggunakannya lebih wajar perlu dirangkum dan ditingkatkan melalui banyak latihan ~
Sebenarnya, apa yang ingin saya bicarakan dalam artikel ini adalah cara untuk men -debug bug, tetapi karena contoh yang saya pilih melibatkan terlalu banyak hal. . . Saya takut bahwa konten semuanya terlalu lama dan semua orang tidak tertarik membacanya, jadi saya hanya memilih bagian untuk menjelaskannya kepada Anda. Saya ingin tahu apakah Anda telah mendapatkan sesuatu. Jangan melihat tiga kalimat yang saya tulis banyak hal dalam debugging. Jika Anda benar -benar melakukannya seperti saya dalam proyek yang sebenarnya, Anda mungkin akan membutuhkan waktu lebih lama untuk men -debug bug daripada menulis skrip. . . Dalam situasi yang sebenarnya, kita harus mengembangkan pertama kali kita mendapatkan masalah, memeriksa masalah dalam pikiran kita dan menemukan poin yang paling mungkin. Jika kami tidak dapat dengan cepat menemukan poin yang paling penting, maka Anda dapat menggunakan metode yang paling merepotkan tetapi dapat diandalkan untuk menggunakan tombol "Eksekusi Kalimat-oleh-Konsentensi" untuk menjalankan seluruh JS yang terkait dengan masalah satu per satu. Selama proses eksekusi, kita juga harus mengklarifikasi pemikiran kita, dan memperhatikan nilai yang benar dari setiap variabel dan elemen yang dipilih oleh pemilih. Secara umum, jika Anda melakukan ini sekali, bug akan hampir terpecahkan.
Jadi saya pribadi berpikir bahwa gagasan kami tentang debugging bug harus sebagai berikut: Pertama, apakah JS berhasil dieksekusi; Kedua, apakah JS memiliki masalah logika, masalah variabel, masalah parameter, dll.; Akhirnya, jika tidak ada masalah dengan hal di atas, silakan periksa berbagai simbol. . .
Ok ~ itu semua tentang breakpoint ~ jika Anda tidak mengerti, Anda dapat meninggalkan pesan di bawah ~ jika Anda memiliki poin pengetahuan yang tidak Anda mengerti atau bingung tentang front-end, Anda juga dapat meninggalkan pesan di bawah ini. Ketika Anda punya waktu, saya akan terus menulis beberapa dokumen di pesan Anda ~