Penyahpepijatan JavaScript moden. Kesilapan dua: masalah definisi bahasa. Titik putus bersyarat

helo! Meneruskan topik, mari bercakap tentang skrip penyahpepijatan menggunakan penyemak imbas. Sebagai contoh, mari kita ambil yang paling banyak pelayar terbaik di Bumi - Chrome.

Pada dasarnya, alat sedemikian tersedia dalam mana-mana pelayar, dan jika anda menganggap bahawa kebanyakan penyemak imbas berjalan pada enjin yang sama seperti Chrome, maka pada dasarnya tidak akan ada banyak perbezaan. Firefox juga sangat bagus dengan alat Firebugnya.

Pandangan umum panel Sumber

Lancarkan penyemak imbas Chrome.

Tekan F12 dan Alat Pembangun akan dilancarkan.

Pergi ke tab Sumber

Terdapat 3 zon di sini:

Wilayah fail sumber. Ia mengandungi semua fail projek
Kawasan teks. Kawasan ini mengandungi teks fail
Bidang maklumat dan kawalan. Kita akan bercakap tentang dia nanti

Sebagai peraturan, apabila menyahpepijat, kawasan fail sumber tidak diperlukan, jadi anda boleh menyembunyikannya dengan butang.

Butang kawalan am

3 butang kawalan yang paling biasa digunakan:

Format Butang ini membolehkan anda memformat kod. Anda mungkin memerlukannya jika anda ingin memformat kod orang lain. Konsol sangat butang penting mengklik pada yang membuka konsol. Anda boleh memasukkan pelbagai arahan dan operator dalam JavaScript dalam konsol. Tingkap Dalam kes bahagian besar kod, ia membolehkan anda membuka kod dalam tetingkap berasingan.

Titik putus

Mari lihat fail pow.js sebagai contoh. Jika anda mengklik pada mana-mana baris fail ini, titik putus akan ditetapkan pada baris tersebut.

Ia sepatutnya kelihatan seperti ini:

Titik putus juga dipanggil titik putus, yang lebih kepada jargon yang telah diasimilasikan ke dalam bahasa kita dan secara harfiah juga bermaksud titik putus.

Dalam kod tempat anda membuat titik putus, anda boleh melihat nilai pembolehubah pada setiap langkah, secara umum, menjejakinya dalam setiap cara yang mungkin.

Maklumat titik putus muncul pada tab Titik putus.

Tab Breakpoints sangat berguna apabila kod itu sangat besar, ia membolehkan anda untuk:

Cepat pergi ke tempat dalam kod di mana titik putus ditetapkan dengan satu klik mudah kepada teks.
Lumpuhkan titik putus untuk sementara waktu dengan mengklik pada kotak pilihan.
Alih keluar titik putus dengan cepat dengan mengklik kanan pada teks dan memilih Alih keluar.

Beberapa ciri tambahan

Titik putus juga boleh dicetuskan terus daripada skrip menggunakan arahan penyahpepijat: function pow(x, n) ( ... debugger; //<-- отладчик остановится тут... }

Klik kanan pada nombor baris dalam pow.js akan membolehkan anda mencipta titik putus bersyarat yang dipanggil, i.e. tetapkan keadaan di mana titik putus akan dicetuskan.

Berhenti dan lihat sekeliling

Memandangkan fungsi kami berjalan serentak dengan pemuatan halaman, cara paling mudah untuk mengaktifkan penyahpepijat JavaScript adalah dengan memuatkannya semula. Untuk melakukan ini, tekan F5. Dan pada masa yang sama, pelaksanaan skrip akan dihentikan pada baris ke-6.

Beri perhatian kepada tab maklumat:

Tonton Ungkapan– di sini anda boleh melihat nilai semasa pembolehubah yang anda pantau dalam skrip.
Timbunan panggilan– menunjukkan timbunan panggilan - ini adalah semua panggilan yang membawa kepada baris kod ini.
Pembolehubah Skop– menunjukkan pembolehubah. Selain itu, ia menunjukkan pembolehubah global dan tempatan.

Pengurusan Perlaksanaan

Sekarang mari jalankan skrip dan jejaki operasinya. Beri perhatian kepada panel di bahagian atas terdapat 6 butang, operasi yang akan kami pertimbangkan.

– teruskan pelaksanaan, atau anda boleh menekan kekunci F8. Butang ini meneruskan pelaksanaan skrip. Dengan cara ini kita boleh melangkah melalui skrip kita seolah-olah ia berjalan dalam penyemak imbas. – ambil langkah tanpa pergi ke fungsi, atau kekunci F10.

Jalankan satu langkah skrip tanpa masuk ke dalam fungsi.

– ambil langkah ke dalam fungsi, kekunci F11. Melaksanakan satu langkah skrip dan pada masa yang sama masuk ke dalam fungsi. – jalankan sehingga keluar dari fungsi semasa, kekunci Shift+F11.

melaksanakan keseluruhan kod yang terkandung dalam fungsi.

– lumpuhkan/dayakan semua titik putus. Butang ini hanya melumpuhkan dan, apabila ditekan sekali lagi, membolehkan semua titik putus. – dayakan/lumpuhkan berhenti automatik apabila ralat berlaku. Butang ini sangat berguna semasa menyahpepijat dan membolehkan anda mendayakan atau melumpuhkan pemberhentian automatik apabila ralat berlaku.

Proses penyahpepijatan itu sendiri terdiri daripada melalui program langkah demi langkah dan memerhatikan nilai pembolehubah.

Konsol Pelayar

Apabila menyahpepijat kod skrip, anda boleh pergi ke tab Konsol dan melihat jika terdapat sebarang ralat di sana Anda juga boleh mengeluarkan maklumat kepada konsol menggunakan console.log().

Sebagai contoh:

// hasilnya akan kelihatan dalam konsol untuk (var i = 0; i< 6; i++) { console.log("значение", i); }

Konsol tersedia dalam mana-mana pelayar

Ralat konsol

Ralat skrip JavaScript boleh dilihat dalam konsol.

Dalam konsol anda boleh melihat:

Garis merah ialah mesej ralat sebenar.

Jumlah

Penyahpepijat membolehkan anda:

Berhenti pada titik yang ditanda (titik putus) atau pada arahan penyahpepijat.
Laksanakan kod - nyahpepijat atur cara satu baris pada satu masa atau ke titik tertentu.
Pantau pembolehubah, laksanakan arahan dalam konsol, dsb.

Dalam alat pembangun terdapat tab lain seperti Elemen membolehkan anda melihat kod HTML halaman, Garis Masa menunjukkan bilangan fail yang dimuat turun oleh penyemak imbas dan tempoh masa yang diperlukan. Tetapi tab ini tidak begitu menarik kepada kami lagi.

Firebug mengandungi penyahpepijat AvaScript yang berkuasa yang memberi anda keupayaan untuk menjeda pelaksanaan pada bila-bila masa dan melihat setiap pembolehubah pada masa itu. Jika kod anda lembap, gunakan pemprofil JavaScript untuk mengukur prestasi dan mencari kesesakan dengan cepat.

Cari skrip dengan mudah

Banyak aplikasi web terdiri daripada sejumlah besar fail, dan mencari satu untuk nyahpepijat boleh menjadi tugas rutin dan membosankan. Menu pemilihan skrip Firebug mengisih dan menyusun fail ke dalam senarai yang jelas dan mudah difahami yang membantu anda mencari sebarang fail dengan satu klik.

Jeda pelaksanaan di mana-mana baris

Firebug membolehkan anda menetapkan titik putus, yang memberitahu penyahpepijat untuk berhenti melaksanakan skrip apabila ia mencapai baris tertentu. Semasa pelaksanaan digantung, anda boleh melihat nilai mana-mana pembolehubah dan memeriksa objek.

Untuk menetapkan titik putus, klik pada mana-mana nombor baris dan titik merah akan muncul di sana, menunjukkan bahawa titik putus telah ditetapkan. Klik pada titik merah sekali lagi untuk mengalih keluar titik putus.

Jeda pelaksanaan hanya jika...

Titik putus boleh menyebabkan masalah jika dicetuskan terlalu kerap. Kadang-kadang kita mahu menjeda pelaksanaan hanya apabila syarat tertentu dipenuhi. Firebug membolehkan anda menetapkan titik putus "bersyarat". Mereka menyemak ungkapan yang mesti benar untuk titik putus berfungsi.

Untuk menetapkan titik putus bersyarat, cuma klik kanan pada mana-mana nombor baris. Gelembung akan muncul menggesa anda memasukkan ungkapan javascript. Anda boleh klik kanan sekali lagi pada bila-bila masa untuk menukar ungkapan, atau klik kiri untuk menghilangkan titik putus.

Satu langkah pada satu masa

Apabila penyahpepijat telah menjeda pelaksanaan, anda boleh meneruskan skrip satu langkah pada satu masa. Ini membolehkan anda melihat dengan jelas cara melaksanakan baris tertentu mempengaruhi pembolehubah dan objek.

Anda juga boleh meneruskan pelaksanaan untuk lebih daripada satu baris. Pilih "Jalankan ke Baris ini" dalam menu konteks baris yang dikehendaki untuk meneruskan pelaksanaan ke baris ini.

Saya terganggu apabila saya membuat kesilapan

Anda tidak selalu memilih penyahpepijat... Kadangkala penyahpepijat memilih anda Firebug memberi anda keupayaan untuk melompat ke penyahpepijat secara automatik apabila ralat berlaku, supaya anda boleh menyiasat keadaan di mana masalah itu berlaku.

Timbunan tidak dilipat

Apabila penyahpepijat dijeda, Firebug menunjukkan kepada anda timbunan panggilan, yang merupakan koleksi panggilan fungsi bersarang yang sedang berjalan dan menunggu untuk kembali.

Tindanan panggilan diwakili oleh jalur padat butang dalam panel, setiap satu dengan nama fungsi pada tindanan. Anda boleh mengklik mana-mana butang untuk melompat ke baris di mana fungsi dijeda dan melihat nilai pembolehubah tempatan dari dalam fungsi.

Menonton Ekspresi

Apabila menyahpepijat, anda selalunya ingin melihat maksud ungkapan atau objek kompleks yang terkubur dalam DOM. Firebug membolehkan anda mencetak ungkapan javascript sewenang-wenangnya, yang nilainya akan dikemas kini pada setiap langkah penyahpepijat.

Apabila menaip ungkapan, jangan lupa bahawa anda boleh menggunakan kekunci Tab untuk autolengkapkan sifat objek.

Petunjuk Pembolehubah

Semasa pelaksanaan dijeda, anda boleh menggerakkan tetikus ke atas mana-mana pembolehubah fungsi semasa, melihat petua alat dengan nilai. Ini adalah cara terbaik untuk mengawasi kod dan mendapatkan jawapan semasa anda membaca.

Prestasi JavaScript Profil

Aplikasi web anda hampir sempurna. Anda telah menyelesaikan semua kesilapan, anda telah mencipta reka bentuk yang bergaya dan pengguna menyukainya. Hanya satu masalah - sesetengah ciri adalah perlahan dan anda tidak pasti mengapa...

Dengan Firebug, anda tidak perlu lagi tertanya-tanya mengapa kod anda berjalan perlahan. Menggunakan profiler Firebug, anda boleh memisahkan lalat daripada potongan daging dalam beberapa saat.

Untuk menggunakan profiler, hanya pergi ke tab Console dan klik butang "Profil". Kemudian gunakan aplikasi anda untuk seketika atau muat semula halaman dan klik "Profil" sekali lagi. Anda akan melihat laporan terperinci yang menunjukkan fungsi yang dipanggil dan berapa lama setiap fungsi itu diambil.

Panggilan fungsi pengelogan

Kadangkala fungsi bermasalah dipanggil berkali-kali sehingga anda tidak boleh masuk ke penyahpepijat setiap kali. Anda hanya ingin tahu bila ia dipanggil dan dengan parameter apa.

Untuk menjejaki semua panggilan fungsi, cuma klik kanan pada tab Skrip dan pilih "Log panggilan ke "nama fungsi"". Kemudian pergi ke konsol dan lihat panggilan muncul dalam log...

Pergi terus ke baris 108

Selalunya anda mahu pergi dengan jelas ke baris skrip anda yang dikehendaki. Tiada apa-apa yang lebih mudah, hanya taip nombor baris dalam kotak carian pantas, meletakkan # dahulu, seperti yang ditunjukkan dalam tangkapan skrin kiri.

Dalam beberapa tahun kebelakangan ini, berkat kemunculan pelbagai perpustakaan seperti jQuery dan Prototaip, JavaScript telah mendapat kedudukan utama dalam kalangan bahasa untuk mencipta skrip untuk projek web. Populariti yang semakin meningkat dan kemudahan penggunaan telah membawa kepada kemunculan aplikasi lengkap, seperti Gmail, yang mengandungi beribu-ribu rentetan JavaScript, meletakkan permintaan yang meningkat kepada pasukan pembangunan berkenaan tahap kecekapan alat.

Hasil daripada peningkatan kerumitan aplikasi adalah keperluan untuk alat yang berkuasa alat penyahpepijatan yang membolehkan anda mencari punca ralat dengan cepat dan cekap. Output mudah nilai pembolehubah menggunakan fungsi amaran() hilang kaitannya.

DALAM pelajaran ini diadakan ulasan ringkas peluang instrumen moden pembangun yang membantu menjadikan kod JavaScript penyahpepijatan lebih banyak proses yang mudah. Tumpuan akan diberikan pada keupayaan penyemak imbas Chrome dan alat tambah Firebug untuk FireFox, tetapi kebanyakan ciri yang diterangkan juga tersedia dalam alatan lain, seperti Dragonfly untuk Opera.

Konsol - pandangan umum

Dalam kebanyakan program pembangun, paling banyak kawan baik Pengaturcara akan mempunyai konsol. Panel pelbagai guna digunakan untuk mengelog mesej ralat, pemeriksaan DOM, nyahpepijat Kod JavaScript dan banyak lagi tugasan lain. Bergantung pada penyemak imbas, konsol dipanggil pasukan yang berbeza(kecuali untuk pemilihan terus melalui menu):

V penyemak imbas Chrome dan Dragonfly untuk Opera - Ctrl + Shift + I
Firebug - F12

Konsol secara automatik memaparkan ralat dalam kod yang dikesan semasa pelaksanaan skrip. Fail dan baris disenaraikan di sebelah ralat, dan mengklik pada ralat akan mengalihkan fokus input ke lokasi yang sesuai.

Kami mengeluarkan data ke konsol

Konsol bukan sahaja boleh menunjukkan ralat dalam kod skrip. Menggunakan Console API dan Command Line API, anda boleh mengawal output data ke konsol. Yang paling terkenal dan perintah yang berguna .log().

Apabila membangunkan kod borang, sangat berguna untuk mengetahui nilai pembolehubah supaya anda boleh mengesahkan bahawa kod itu berfungsi dengan betul. Amalan biasa ialah menggunakan fungsi tersebut amaran() untuk pemeriksaan visual. Walau bagaimanapun, menggunakan kaedah ini menyekat seluruh kod daripada melaksanakan sehingga butang dalam kotak dialog diklik.

Penyelesaian moden adalah dengan menggunakan kaedah tersebut konsol.log, yang mengeluarkan nilai berubah-ubah ke panel konsol:

Console.log("Log Kapten"); // memaparkan "Captain's Log" dalam panel konsol

Kaedah ini boleh digunakan untuk mengeluarkan nilai yang dikira:

Fungsi calcPhotos() ( total_photos_diff = total_photos - prev_total_photos; // Cetak nilai pembolehubah ke konsol konsol.log(total_photos_diff); )

Kelebihan pendekatan ini berbanding kaedah menggunakan dialog amaran() ialah pelaksanaan kod tidak terganggu, dan pembangun boleh mencetak nilai pembolehubah beberapa kali untuk melihat perubahan data dalam masa nyata.

Var t = 3, p = 1; fungsi calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // Keluarkan nilai ke console console.log(total_photos_diff); // Kemas kini nilai t = t*1.3; p = p*1.1 ; ) setInterval(function() ( calcPhotos(t,p); ),100);

Menyerlahkan mesej

Dalam contoh di atas, gelung akan mencetak banyak nilai pembolehubah ke konsol. Walau bagaimanapun, selalunya mudah untuk memisahkan data yang berbeza secara visual untuk menyerlahkan tempat dalam kod yang memerlukan dengan berkesan peningkatan perhatian. Untuk menyelesaikan masalah sedemikian, Console API mempunyai beberapa kaedah.

console.info(): Memaparkan ikon "maklumat" dan mewarnai maklumat yang dipersembahkan. Kaedah ini mudah digunakan untuk memberi amaran tentang pelbagai acara.

console.warn(): Memaparkan ikon amaran dan mewarnai maklumat yang dibentangkan. Mudah digunakan untuk maklumat tentang parameter yang melebihi had.

console.error(): Memaparkan ikon "ralat" dan mewarnakan maklumat yang dibentangkan. Berguna untuk melaporkan ralat dan keadaan kritikal.

Nota: alat Pembangun Chrome tidak mempunyai cara untuk menyampaikan maklumat secara berbeza dalam konsol.

Penggunaan pelbagai kaedah untuk mengeluarkan maklumat ke konsol membolehkan anda membentangkan data dalam bentuk visual. Penyampaian maklumat boleh diperbaiki dengan menyekat. Kaedah yang digunakan console.group() :

// Kumpulan pertama console.group("Pengiraan foto"); console.info("Jumlah perbezaan sekarang " + total_photos_diff); console.log(total_photos_diff); console.groupEnd(); // Kumpulan kedua console.group("Pembolehubah bertambah"); console.log("Jumlah foto sekarang: " + t); console.log("Jumlah foto sebelum ini ialah: " + p); console.groupEnd();

Contoh ini akan mengumpulkan maklumat dalam konsol. Penampilan visual akan berbeza-beza bergantung pada pelayar yang berbeza, gambar di bawah menunjukkan paparan dalam Dragonfly untuk Opera:

Contoh di atas mewakili senarai kecil kaedah yang ada daripada Console API. Terdapat banyak kaedah lain yang berguna, yang diterangkan pada halaman Firebug rasmi.

Mengganggu pelaksanaan skrip

Mencetak maklumat ke konsol ialah ciri yang berguna, tetapi kod itu boleh berjalan dengan cepat dan masih menjejaki banyak pembolehubah.

Untuk memudahkan proses penyahpepijatan, anda boleh mengganggu pelaksanaan kod pada titik tertentu untuk mendapatkan akses kepada data. Titik putus digunakan untuk ini.

Bekerja dengan titik putus

Untuk menetapkan titik putus, pergi ke tab "Skrip" dan pilih skrip yang diperlukan daripada senarai. Sekarang kita mencari baris di mana kita perlu mengganggu pelaksanaan skrip, dan klik pada medan dengan nombor baris untuk diaktifkan - penunjuk visual akan muncul. Sekarang kami memuat semula halaman dan pelaksanaan kod akan terganggu pada titik yang diberikan:

Apabila pelaksanaan terganggu, anda boleh meletakkan kursor tetikus pada mana-mana pembolehubah dan penyahpepijat akan memaparkan petua alat dengan nilai semasa.

Anda kemudian boleh terus melaksanakan kod menggunakan butang khas, yang terletak di bahagian atas bar sisi:

Bar sisi membolehkan anda menjejaki perubahan dalam keadaan kod, termasuk dinamik pembolehubah tempatan dan global.

Titik putus bersyarat

Apabila menyahpepijat kod, kadangkala anda mahu menghentikan pelaksanaan kod hanya apabila syarat tertentu dipenuhi. Sebagai contoh, jika skrip anda mempunyai gelung yang mengambil masa 50 milisaat untuk melengkapkan setiap lelaran, ia akan menjadi sangat menyusahkan untuk memulakan proses pelaksanaan selepas berhenti pada setiap langkah apabila kita hanya memerlukan 300 lelaran. Untuk kes sedemikian terdapat gangguan bersyarat.

Dalam contoh dalam rajah, pelaksanaan kod tidak akan terganggu sehingga nilai pembolehubah total_photos_diff tidak akan lebih daripada 200.

Untuk mengaktifkan gangguan bersyarat, anda perlu klik kanan pada titik putus dan pilih "Edit Titik Putus" untuk memaparkan dialog untuk mengedit syarat untuk menjana gangguan.

Menetapkan titik putus dalam kod

Ia tidak selalunya mudah untuk menetapkan titik putus menggunakan antara muka alat pembangun dalam penyemak imbas. Kadangkala lebih mudah untuk menjalankan penyahpepijat dari dalam kod pasukan khas. Contoh di bawah menunjukkan cara anda boleh membatalkan pelaksanaan kod apabila syarat tertentu dipenuhi:

Jika (total_photos_diff > 300) (debugger; // lancarkan penyahpepijat dan hentikan pelaksanaan kod)

Cara lain untuk mengganggu pelaksanaan kod

Selain menggunakan titik putus, alat pembangun menyediakan pilihan lain untuk menghentikan pelaksanaan kod dalam kes yang berbeza.

Berhenti apabila DOM berubah

Jika anda perlu menyahpepijat sekeping kod yang mengendalikan perubahan DOM, alat pembangun menyediakan cara untuk menghentikan kod daripada dilaksanakan apabila nod DOM berubah.

Dalam panel kod HTML apabila diklik butang kanan tetikus pada elemen yang dikehendaki, anda boleh memilih syarat untuk menghentikan kod (menukar atribut, menambah/mengalih keluar keturunan, memadam elemen) apabila DOM berubah. Bebankan kod dan apabila elemen berubah, pelaksanaan kod akan berhenti.

Berhenti apabila semua atau pengecualian yang tidak dikendalikan berlaku

Kebanyakan alat pembangun membenarkan anda menghentikan pelaksanaan skrip apabila pengecualian berlaku. DALAM Chrome diberikan Fungsi ini boleh didayakan menggunakan ikon "Jeda" pada baris bawah antara muka.

Anda boleh memilih pengecualian untuk menghentikan pelaksanaan kod. Contoh di bawah menunjukkan satu pengecualian yang tidak dikendalikan dan satu pengecualian yang dikendalikan (cuba|tangkap blok):

Var t = 3, p = 1; fungsi calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // Console.info kumpulan pertama ("Jumlah perbezaan sekarang " + total_photos_diff); // Kemas kini nilai t = t+5; p = p+1 ;// Pengecualian yang tidak dikendalikan if (total_photos_diff > 300) ( throw 0; ) // Mengendalikan pengecualian jika (total_photos_diff > 200) ( cuba ($$("#nonexistent-element").hide(); ) catch(e) ( console.error(e ); ) ) ) setInterval(function() ( calcPhotos(t,p); ),50);

Pengenalan kepada Timbunan Panggilan

Jika ralat muncul semasa melaksanakan skrip anda, kaedah yang diterangkan di atas akan membantu anda menghentikan program untuk menganalisis ralat. Tetapi ia tidak selalu jelas di mana alasannya.

Apabila pelaksanaan skrip terganggu, beri perhatian kepada panel kanan, yang mempersembahkan maklumat yang berguna, yang mengandungi timbunan Panggilan.

Rancangan timbunan panggilan laluan penuh, yang membawa kepada titik di mana ralat berlaku dan pelaksanaan kod berhenti.

Dalam rajah di bawah, ralat sengaja dijana dalam fungsi incrementValues(), yang menyebabkan kod berhenti melaksanakan. Alat pembangun menunjukkan timbunan panggilan penuh, yang membolehkan anda mengenal pasti tempat yang berpotensi berbahaya.

Kesimpulan

Pelajaran ini ialah titik permulaan untuk kajian yang lebih terperinci tentang dokumentasi untuk alat yang anda merancang untuk digunakan secara aktif.

Dari semasa ke semasa, pembangun membuat kesilapan pengekodan. Ralat dalam program atau skrip dipanggil pepijat.

Proses mencari dan membetulkan ralat dipanggil penyahpepijatan dan merupakan bahagian biasa dalam proses pembangunan. Bahagian ini membincangkan alatan dan teknik yang boleh membantu anda menyahpepijat tugas.

Mesej ralat dalam IE

Cara paling mudah untuk menjejaki ralat adalah dengan mendayakan pelaporan ralat dalam penyemak imbas anda. Oleh Internet lalai Penjelajah menunjukkan ikon ralat dalam bar status apabila ralat berlaku pada halaman.

Mengklik dua kali ikon ini akan membawa anda ke kotak dialog yang memaparkan maklumat tentang ralat tertentu.

Kerana ikon ini mudah diabaikan, internet Explorer memberi anda pilihan untuk memaparkan dialog Ralat secara automatik apabila ralat berlaku.

Untuk mendayakan pilihan ini, pilih Alat → Pilihan Internet → tab Lanjutan. dan akhirnya semak kotak semak "Tunjukkan pemberitahuan pada setiap skrip" seperti yang ditunjukkan di bawah -

Mesej ralat dalam Firefox atau Mozilla

Pelayar lain, seperti Firefox, Netscape dan Mozilla, menghantar mesej ralat ke tetingkap khas yang dipanggil Konsol JavaScript atau Konsol Ralat. Untuk melihat konsol, pilih Alat → Konsol Ralat atau Pembangunan Web.

Malangnya, memandangkan penyemak imbas ini tidak memberikan maklumat visual apabila ralat berlaku, anda mesti memastikan konsol terbuka dan memerhatikan ralat semasa skrip anda berjalan.

Pemberitahuan Ralat

Pemberitahuan ralat dipaparkan dalam konsol atau melalui dialog tingkap Internet Penjelajah adalah hasil daripada ralat sintaks dan masa jalan. Pemberitahuan ralat ini termasuk nombor baris tempat ralat itu berlaku.

Jika anda menggunakan Firefox, anda boleh mengklik pada ralat yang tersedia dalam konsol ralat untuk pergi ke garisan yang tepat dalam skrip dengan ralat.

Bagaimana untuk menyahpepijat skrip

wujud pelbagai cara menyahpepijat JavaScript anda - Gunakan Pengesah JavaScript

Satu cara untuk menguji kod JavaScript untuk kesilapan pelik- jalankannya melalui program yang menyemaknya untuk memastikan ia sah dan ia mengikut peraturan sintaks rasmi bahasa tersebut. Atur cara ini dipanggil parser atau hanya pengesah secara ringkas dan selalunya disertakan dengan komersial penyunting HTML dan JavaScript.

Pengesah yang paling mudah untuk JavaScript ialah JavaScript Lint Douglas Crockford, yang tersedia secara percuma dalam JavaScript Lint Douglas Crockford.

Hanya lawati halaman web ini, tampal kod JavaScript (JavaScript sahaja) ke dalam kawasan teks yang disediakan dan klik butang jslint. Program ini akan menganalisis kod JavaScript anda, memastikan semua definisi pembolehubah dan fungsi mengikut sintaks yang betul. Dia juga akan menyemak Arahan JavaScript, seperti jika dan sementara, supaya mereka juga mengikut format yang betul

Tambahkan kod penyahpepijatan pada program anda

Anda boleh menggunakan kaedah alert() atau document.write() dalam program anda untuk nyahpepijat kod anda. Sebagai contoh, anda boleh menulis sesuatu seperti ini:

var debugging = benar; var whichImage = "widget"; if(debugging) alert("Panggilan swapImage() dengan hujah: " + whichImage); var swapStatus = swapImage(whichImage); if(debugging) alert("Keluar daripada swapImage() dengan swapStatus=" + swapStatus);

Dengan memeriksa kandungan dan susunan alert() apabila ia muncul, anda boleh menguji kefungsian program anda dengan mudah.

Cara Menggunakan Penyahpepijat JavaScript

Penyahpepijat ialah aplikasi di mana semua aspek pelaksanaan skrip berada di bawah kawalan pengaturcara. Penyahpepijat menyediakan kawalan terperinci ke atas keadaan skrip melalui antara muka yang membolehkan anda memeriksa dan menetapkan nilai serta mengawal aliran pelaksanaan.

Setelah skrip dimuatkan ke dalam penyahpepijat, ia boleh dijalankan satu baris pada satu masa atau diarahkan untuk berhenti pada masa tertentu. titik kawalan. Apabila pelaksanaan dihentikan, pengaturcara boleh menyemak keadaan skrip dan pembolehubahnya untuk menentukan sama ada ada yang salah. Anda juga boleh melihat pembolehubah untuk menukar nilainya.

Gunakan banyak komen. Komen membolehkan anda menerangkan sebab anda menulis skrip seperti yang anda lakukan dan menerangkan bahagian kod yang sukar.
Sentiasa gunakan lekukan untuk menjadikan kod anda mudah dibaca. Lekukan juga memudahkan anda memadankan teg permulaan dan penamat, pendakap kerinting dan lain lain elemen HTML dan skrip.
Tulis kod modular. Apabila boleh, kumpulkan pernyataan anda ke dalam fungsi. Fungsi membolehkan anda mengumpulkan pengendali yang berkaitan, dan menguji serta menggunakan semula bahagian kod dengan usaha yang minimum.
Konsisten dalam cara anda menamakan pembolehubah dan fungsi anda. Cuba gunakan nama yang cukup panjang untuk bermakna dan huraikan kandungan pembolehubah atau tujuan fungsi.
Gunakan sintaks yang konsisten apabila menamakan pembolehubah dan fungsi. Dengan kata lain, simpan mereka huruf kecil atau dalam huruf besar; jika anda lebih suka notasi Camel-Back, gunakannya secara konsisten.
Semak skrip panjang dengan cara modular. Dalam erti kata lain, jangan cuba menulis keseluruhan skrip sebelum menguji mana-mana bahagiannya. Tulis bahagian dan jalankannya sebelum menambah bahagian seterusnya kod.
Gunakan nama deskriptif untuk pembolehubah dan fungsi dan elakkan menggunakan nama aksara tunggal.
Berhati-hati dengan petikan. Ingat bahawa petikan digunakan secara berpasangan di sekeliling rentetan dan kedua-dua petikan mestilah gaya yang sama (satu atau dua).
Jejaki tanda-tanda sama anda. Anda tidak sepatutnya menggunakan satu = untuk tujuan perbandingan.
Saya secara eksplisit mengisytiharkan pembolehubah menggunakan kata kunci var.

Dalam beberapa tahun kebelakangan ini, berkat kemunculan pelbagai perpustakaan seperti jQuery dan Prototaip, JavaScript telah mendapat kedudukan utama dalam kalangan bahasa untuk mencipta skrip untuk projek web. Peningkatan populariti dan kemudahan penggunaan telah membawa kepada kemunculan aplikasi lengkap, seperti Gmail, yang mengandungi beribu-ribu baris JavaScript, meletakkan permintaan yang meningkat pada pasukan pembangunan dari segi kecekapan alat.

Hasil daripada peningkatan kerumitan aplikasi ialah keperluan untuk alat nyahpepijat yang berkuasa yang boleh mencari punca ralat dengan cepat dan cekap. Output mudah nilai pembolehubah menggunakan fungsi amaran() hilang kaitannya.

Pelajaran ini memberikan gambaran keseluruhan ringkas tentang keupayaan alat pembangun moden yang membantu menjadikan kod JavaScript penyahpepijatan proses yang lebih mudah. Tumpuan akan diberikan pada keupayaan penyemak imbas Chrome dan alat tambah Firebug untuk FireFox, tetapi kebanyakan ciri yang diterangkan juga tersedia dalam alatan lain, seperti Dragonfly untuk Opera.

Konsol - pandangan umum

Dalam kebanyakan program pembangun, konsol ialah kawan baik pengaturcara. Panel pelbagai guna digunakan untuk mengelog mesej ralat, pemeriksaan DOM, menyahpepijat kod JavaScript dan banyak tugas lain. Bergantung pada penyemak imbas, konsol dipanggil dengan arahan yang berbeza (kecuali pemilihan langsung melalui menu):

dalam penyemak imbas Chrome dan Dragonfly untuk Opera - Ctrl + Shift + I
Firebug - F12

Kami mengeluarkan data ke konsol

Konsol bukan sahaja boleh menunjukkan ralat dalam kod skrip. Menggunakan Console API dan Command Line API, anda boleh mengawal output data ke konsol. Perintah yang paling terkenal dan berguna .log().

Penyelesaian moden adalah dengan menggunakan kaedah tersebut konsol.log, yang mengeluarkan nilai berubah-ubah ke panel konsol:

Console.log("Log Kapten"); // memaparkan "Captain's Log" dalam panel konsol

Kaedah ini boleh digunakan untuk mengeluarkan nilai yang dikira:

Fungsi calcPhotos() ( total_photos_diff = total_photos - prev_total_photos; // Cetak nilai pembolehubah ke konsol konsol.log(total_photos_diff); )

Menyerlahkan mesej

Dalam contoh di atas, gelung akan mencetak banyak nilai pembolehubah ke konsol. Walau bagaimanapun, selalunya berguna untuk memisahkan data yang berbeza secara visual untuk menyerlahkan kawasan dalam kod yang memerlukan lebih perhatian dengan berkesan. Untuk menyelesaikan masalah sedemikian, Console API mempunyai beberapa kaedah.

console.info(): Memaparkan ikon "maklumat" dan mewarnai maklumat yang dipersembahkan. Kaedah ini mudah digunakan untuk memberi amaran tentang pelbagai peristiwa.

console.warn(): Memaparkan ikon amaran dan mewarnai maklumat yang dibentangkan. Mudah digunakan untuk maklumat tentang parameter yang melebihi had.

console.error(): Memaparkan ikon "ralat" dan mewarnakan maklumat yang dibentangkan. Berguna untuk melaporkan ralat dan keadaan kritikal.

Nota: Alat Pembangun Chrome tidak mempunyai keupayaan untuk memaparkan maklumat secara berbeza dalam konsol.

Menggunakan pelbagai kaedah untuk mengeluarkan maklumat ke konsol membolehkan anda mempersembahkan data dalam bentuk visual. Penyampaian maklumat boleh diperbaiki dengan menyekat. Kaedah yang digunakan console.group() :

Contoh ini akan mengumpulkan maklumat dalam konsol. Persembahan visual akan berbeza-beza dalam pelayar yang berbeza, rajah di bawah menunjukkan paparan dalam Dragonfly untuk Opera:

Contoh di atas mewakili senarai kecil kaedah yang tersedia daripada Console API. Terdapat banyak kaedah lain yang berguna, yang diterangkan pada halaman Firebug rasmi.

Mengganggu pelaksanaan skrip

Mencetak maklumat ke konsol ialah ciri yang berguna, tetapi kod itu boleh berjalan dengan cepat dan masih menjejaki banyak pembolehubah.

Untuk memudahkan proses penyahpepijatan, anda boleh mengganggu pelaksanaan kod pada titik tertentu untuk mendapatkan akses kepada data. Titik putus digunakan untuk ini.

Bekerja dengan titik putus

Untuk menetapkan titik putus, anda perlu pergi ke tab "Skrip" dan pilih skrip yang dikehendaki daripada senarai. Sekarang kita mencari baris di mana kita perlu mengganggu pelaksanaan skrip, dan klik pada medan dengan nombor baris untuk diaktifkan - penunjuk visual akan muncul. Sekarang kami memuat semula halaman dan pelaksanaan kod akan terganggu pada titik yang diberikan:

Apabila pelaksanaan terganggu, anda boleh meletakkan kursor tetikus pada mana-mana pembolehubah dan penyahpepijat akan memaparkan petua alat dengan nilai semasa.

Anda kemudian boleh terus melaksanakan kod menggunakan butang khas yang terletak di bahagian atas bar sisi:

Bar sisi membolehkan anda menjejaki perubahan dalam keadaan kod, termasuk dinamik pembolehubah tempatan dan global.

Titik putus bersyarat

Dalam contoh dalam rajah, pelaksanaan kod tidak akan terganggu sehingga nilai pembolehubah total_photos_diff tidak akan lebih daripada 200.

Untuk mengaktifkan gangguan bersyarat, anda perlu klik kanan pada titik putus dan pilih "Edit Titik Putus" untuk memaparkan dialog untuk mengedit syarat untuk menjana gangguan.

Menetapkan titik putus dalam kod

Ia tidak selalunya mudah untuk menetapkan titik putus menggunakan antara muka alat pembangun dalam penyemak imbas. Kadangkala lebih mudah untuk melancarkan penyahpepijat daripada kod menggunakan arahan khas. Contoh di bawah menunjukkan cara anda boleh membatalkan pelaksanaan kod apabila syarat tertentu dipenuhi:

Jika (total_photos_diff > 300) (debugger; // lancarkan penyahpepijat dan hentikan pelaksanaan kod)

Cara lain untuk mengganggu pelaksanaan kod

Selain menggunakan titik putus, alat pembangun menyediakan pilihan lain untuk menghentikan pelaksanaan kod dalam kes yang berbeza.

Berhenti apabila DOM berubah

Jika anda perlu menyahpepijat sekeping kod yang mengendalikan perubahan DOM, alat pembangun menyediakan cara untuk menghentikan kod daripada dilaksanakan apabila nod DOM berubah.

Dalam panel kod HTML, apabila anda mengklik kanan pada elemen yang dikehendaki, anda boleh memilih syarat untuk menghentikan kod (menukar atribut, menambah/mengalih keluar kanak-kanak, memadam elemen) apabila DOM berubah. Bebankan kod dan apabila elemen berubah, pelaksanaan kod akan berhenti.

Berhenti apabila semua atau pengecualian yang tidak dikendalikan berlaku

Kebanyakan alat pembangun membenarkan anda menghentikan pelaksanaan skrip apabila pengecualian berlaku. Dalam Chrome, fungsi ini boleh didayakan menggunakan ikon "Jeda" di bahagian bawah antara muka.

Anda boleh memilih pengecualian untuk menghentikan pelaksanaan kod. Contoh di bawah menunjukkan satu pengecualian yang tidak dikendalikan dan satu pengecualian yang dikendalikan (cuba|tangkap blok):

Var t = 3, p = 1; fungsi calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // Console.info kumpulan pertama ("Jumlah perbezaan sekarang " + total_photos_diff); // Kemas kini nilai t = t+5; p = p+1 ; / / Pengecualian tidak dikendalikan jika (total_photos_diff > 300) ( throw 0; ) // Mengendalikan pengecualian jika (total_photos_diff > 200) ( cuba ( $$("#nonexistent-element").hide(); ) catch(e) ( konsol. ralat(e); ) ) ) setInterval(function() ( calcPhotos(t,p); ),50);

Pengenalan kepada Timbunan Panggilan

Jika ralat muncul semasa melaksanakan skrip anda, kaedah yang diterangkan di atas akan membantu anda menghentikan program untuk menganalisis ralat. Tetapi ia tidak selalu jelas di mana alasannya.

Apabila pelaksanaan skrip terganggu, perhatikan panel kanan, yang menyediakan maklumat berguna, termasuk timbunan Panggilan.

Timbunan panggilan menunjukkan laluan penuh yang membawa kepada titik di mana ralat berlaku dan pelaksanaan kod berhenti.

Kesimpulan

Pelajaran ini ialah titik permulaan untuk kajian yang lebih terperinci tentang dokumentasi untuk alat yang anda merancang untuk digunakan secara aktif.