Tetapan titik putus dan petua penyahpepijatan untuk menyahpepijat JavaScript menggunakan petua Chrome_javascript

Bagaimana anda menyahpepijat program JavaScript? Kaedah yang paling primitif ialah menggunakan alert() untuk mencetak kandungan pada halaman, dan kaedah yang sedikit dipertingkatkan ialah menggunakan console.log() untuk mengeluarkan kandungan pada konsol JavaScript. Nah~, kedua-dua kaedah ini sememangnya telah menyelesaikan masalah penyahpepijatan banyak skrip JavaScript kecil. Tetapi adalah memalukan untuk membiarkan alat pembangun Chrome yang semakin berkuasa tidak digunakan. Artikel ini terutamanya memperkenalkan tetapan titik putus JavaScript dan fungsi penyahpepijatan, iaitu Panel Sumber (dahulunya dipanggil Skrip). Jika anda mahir dalam pelbagai teknik penyahpepijatan Java dalam Eclipse, konsep di sini adalah serupa. Versi Chrome yang digunakan semasa menulis artikel ini ialah 25.0.1364.172.

Persekitaran asas

Sebelah kiri SourcesPanel ialah sumber kandungan, termasuk pelbagai sumber dalam halaman. Antaranya, ia dibahagikan kepada Sumber dan skrip Kandungan. Sumber adalah pelbagai sumber yang terkandung dalam halaman itu sendiri. Ia disusun mengikut domain yang muncul di halaman ini. Fail js yang dimuatkan secara tidak segerak juga akan muncul di sini selepas dimuatkan. Skrip kandungan ialah sambungan Chrome Ia disusun mengikut ID sambungan tersebut sebenarnya adalah sumber yang dibenamkan dalam halaman. Pembangun yang menulis dan menyahpepijat sambungan sedemikian perlu mengambil berat tentangnya Jika penyemak imbas anda tidak mempunyai sebarang sambungan yang dipasang, maka skrip Kandungan tidak akan melihat apa-apa.

Kawasan utama tengah Panel Sumber digunakan untuk memaparkan kandungan fail sumber di sebelah kiri.

Sebelah kanan Panel Sumber ialah reben penyahpepijatan Baris atas butang ialah jeda/teruskan, pelaksanaan satu langkah, satu langkah masuk, satu langkah keluar dan lumpuhkan/dayakan semua titik putus. Di bawah adalah pelbagai bidang fungsi tertentu. Diperkenalkan kemudian.

Perhatikan bahawa kawasan kiri dan kanan mungkin dikecilkan secara lalai dan tidak dipaparkan pada kedua-dua bahagian. Klik butang tarik balik pada kedua-dua belah untuk memaparkannya. Kawasan di sebelah kiri secara automatik mengecut secara lalai apabila mengklik butang pin di sebelahnya tidak akan mengecilkannya.

Terdapat juga beberapa butang fungsi yang berguna di bahagian bawah.

Tetapkan titik putus pada kod sumber

Buka fail JavaScript yang sepadan melalui sumber kandungan di sebelah kiri, dan klik nombor baris fail untuk menetapkan dan memadam titik putus. Setiap titik putus yang ditambahkan akan muncul dalam senarai Titik putus dalam kawasan penyahpepijatan di sebelah kanan Mengklik pada titik putus dalam senarai akan mencari titik putus dalam kawasan kandungan. Jika anda mempunyai berbilang fail dan berbilang titik putus, adalah sangat mudah untuk menggunakan titik putus dalam senarai Titik Putus untuk mencarinya dengan cepat.

Untuk setiap titik putus tambahan terdapat dua keadaan: diaktifkan dan dilumpuhkan. Titik putus yang baru ditambah semuanya dalam keadaan diaktifkan, dan keadaan lumpuh bermakna titik putus dikekalkan tetapi fungsi titik putus dibatalkan buat sementara waktu. Terdapat kotak semak di hadapan setiap titik putus dalam senarai Titik Putus tanda ia akan melumpuhkan titik putus. Titik putus juga boleh dilumpuhkan dalam menu klik kanan lokasi titik putus. Anda juga boleh melumpuhkan sementara semua titik putus tambahan pada butang pada reben kanan dan klik sekali lagi untuk memulihkan keadaan asal.

Titik putus bersyarat: Pilih "Edit Titik putus..." dalam menu klik kanan lokasi titik putus untuk menetapkan syarat untuk mencetus titik putus, iaitu menulis ungkapan dan mencetuskannya hanya apabila ungkapan adalah titik putus yang benar. Lihat timbunan panggilan persekitaran (Timbunan Panggilan) bagi titik putus: Apabila titik putus berhenti, Timbunan Panggilan dalam kawasan penyahpepijatan di sebelah kanan akan memaparkan timbunan panggilan kaedah di mana titik putus semasa terletak Sebagai contoh, terdapat fungsi g(. ) yang memanggil fungsi f(), dan saya menetapkan titik putus dalam f(), maka titik putus akan dicetuskan apabila saya melaksanakan fungsi g() dalam konsol, dan timbunan panggilan dipaparkan seperti berikut:

Atas ialah f(), kemudian g(). Setiap lapisan dalam timbunan panggilan dipanggil bingkai Klik pada setiap bingkai untuk melompat ke titik panggilan bingkai.

Selain itu, anda juga boleh menggunakan menu klik kanan pada bingkai untuk memulakan semula pelaksanaan bingkai semasa, iaitu, laksanakan dari permulaan bingkai. Sebagai contoh, jika anda memulakan semula Frame pada bingkai fungsi f(), titik putus akan melompat ke permulaan f() dan dilaksanakan semula, dan nilai pembolehubah dalam konteks juga akan dipulihkan. Dengan cara ini, digabungkan dengan fungsi seperti pengubahsuaian berubah-ubah dan penyuntingan kod, anda boleh menyahpepijat berulang kali dalam bingkai semasa tanpa memuat semula halaman dan mencetuskan titik putus lagi. Lihat pembolehubah

Di bawah senarai Tindanan Panggilan ialah senarai Pembolehubah Skop, di mana anda boleh melihat nilai pembolehubah tempatan dan pembolehubah global pada masa ini. Jalankan kod yang dipilih

Apabila menyahpepijat titik putus, anda boleh menggunakan tetikus untuk memilih pembolehubah atau ungkapan yang anda mahu lihat, dan kemudian klik kanan menu dan laksanakan "Evaluate in Console" untuk melihat nilai semasa ungkapan. Mengganggu penyataan JavaScript yang akan dilaksanakan pada kali seterusnya Butang "Interrupt/Continue" di sebelah kanan kawasan penyahpepijatan juga mempunyai fungsi Apabila titik putus tidak dicetuskan, mengklik butang ini akan memasuki keadaan gangguan kali seterusnya halaman secara automatik mengganggu apabila melaksanakan pernyataan JavaScript, seperti kod yang dilaksanakan apabila tindakan klik dicetuskan. Pengubahsuaian sementara kod JavaScript biasanya digunakan semasa menyahpepijat kod: ubah suai kod → muat semula halaman → semak semula, kitaran sedemikian. Tetapi sebenarnya, dalam Chrome, anda boleh mengubah suai kandungan fail JS buat sementara waktu, menyimpannya (Ctrl S) dan ia akan berkuat kuasa serta-merta. Digabungkan dengan fungsi seperti Console, anda boleh nyahpepijat semula dengan segera. Tetapi sila ambil perhatian bahawa pengubahsuaian ini adalah sementara dan akan hilang apabila anda memuat semula halaman.

Titik putus kecuali pengecualian

Anda boleh melihat butang di bahagian bawah antara muka Ia adalah suis yang menetapkan sama ada untuk mengganggu program apabila ia menghadapi pengecualian semasa berjalan. Mengklik butang ini akan bertukar antara 3 keadaan:

Secara lalai, ia tidak akan mengganggu apabila menghadapi pengecualian

Akan mengganggu apabila menghadapi semua pengecualian, termasuk kes yang ditangkap

Putus hanya pada pengecualian yang tidak ditangkap

Terangkan terutamanya perbezaan antara keadaan 2 dan keadaan 3

cuba{
buang 'pengecualian';
}tangkap(e){
console.log(e);
}

Kod dalam percubaan di atas akan menghadapi pengecualian, tetapi kod tangkapan berikut boleh menangkap pengecualian. Jika semua pengecualian terganggu, maka kod akan secara automatik mengganggu apabila ia mencapai pernyataan lontaran yang menghasilkan pengecualian dan jika ia hanya mengganggu apabila pengecualian tidak ditangkap ditemui, maka tidak akan ada gangguan di sini. Secara amnya kami lebih prihatin tentang menghadapi pengecualian yang tidak ditangkap.

Tetapkan titik putus pada elemen DOM

Kadangkala kita perlu memantau pengubahsuaian DOM tertentu, tanpa mengira baris kod mana yang diubah suai (ia mungkin diubah suai di beberapa tempat). Kemudian kita boleh menetapkan titik putus terus pada DOM.

Seperti yang ditunjukkan dalam rajah, dalam Panel Elemen pemeriksaan elemen, anda boleh menetapkan titik putus dalam tiga situasi berbeza dalam menu klik kanan elemen: nod anak mengubah suai atributnya sendiri, mengubah suai nodnya sendiri, dipadamkan dan dipilih, bahagian kanan tengah Panel Sumber Titik putus DOM akan muncul dalam senarai Titik Putus DOM di sebelah. Setelah dilaksanakan untuk membuat pengubahsuaian yang sepadan pada DOM, kod tersebut akan berhenti di situ, seperti yang ditunjukkan dalam rajah di bawah.

Titik Putus XHR

Terdapat Titik Putus XHR di kawasan penyahpepijatan di sebelah kanan Klik dan masukkan rentetan yang terkandung dalam URL untuk memantau permintaan Ajax bagi URL tersebut. Jika tiada apa-apa yang diisi, semua permintaan XHR akan didengari. Sebaik sahaja panggilan XHR dicetuskan ia akan putus atas permintaan.send().

Cetus titik putus mengikut jenis acara

Senarai Pendengar Acara dalam kawasan penyahpepijatan di sebelah kanan, pelbagai jenis acara yang mungkin disenaraikan di sini. Semak jenis acara yang sepadan dan ia akan mengganggu secara automatik apabila kod JavaScript jenis acara tersebut dicetuskan.

Menyahpepijat kekunci pintasan

Kekunci pintasan dalam semua alatan pembangunan boleh didapati dalam tetapan di sudut kanan bawah antara muka. F8, F10, F11 atau Shitf F11 biasanya digunakan untuk penyahpepijatan titik putus, tetapi pada Mac OS, kekunci fungsi seperti F10 mungkin bercanggah dengan kekunci pintasan lalai sistem. Tidak mengapa, mereka boleh digantikan dengan Cmd / , Cmd ' , Cmd , Shift Cmd ; //@ sourceURL Namakan kod yang dijana oleh eval Kadangkala beberapa kod yang sangat dinamik dicipta dalam konteks Javascript semasa dalam bentuk rentetan melalui fungsi eval(), dan bukannya dimuatkan sebagai fail js bebas. Dengan cara ini anda tidak akan dapat mencari fail di kawasan kandungan kiri, menjadikannya sukar untuk nyahpepijat. Sebenarnya, kita hanya perlu menambah baris "//@ sourceURL=name" ke penghujung kod yang dibuat oleh eval untuk menamakan kod ini (penyemak imbas akan merawat bentuk ulasan istimewa ini secara istimewa), supaya ia akan Muncul dalam kawasan kandungan di sebelah kiri, sama seperti anda memuatkan fail js dengan nama yang ditentukan, dan anda boleh menetapkan titik putus dan nyahpepijat. Dalam gambar di bawah, kami melaksanakan sekeping kod melalui eval dan menamakannya dynamicScript.js menggunakan sourceURL Selepas pelaksanaan, "fail" ini muncul di kawasan kandungan sebelah kiri, dan kandungannya ialah kandungan dalam eval. Juga lihat contoh ini untuk menamakan kod CoffeeScript yang disusun secara dinamik:

var coffee = CoffeeScript.compile(code.value) "//@ sourceURL=" (evalName.value || "Coffeeeeeeee!");
eval(kopi);

Malah, //@ sourceURL boleh digunakan bukan sahaja dalam kod eval, tetapi juga dalam mana-mana fail js atau pun kod yang dimasukkan dalam Javascript Console, dengan kesan yang sama! Butang format (Cetakan Cantik) digunakan untuk memformat semula kod yang tidak kemas kepada kod yang cantik. Contohnya, sesetengah fail js yang dimampatkan pada dasarnya tidak boleh dibaca, apatah lagi nyahpepijat. Klik sekali untuk memformat, dan klik sekali lagi untuk membatalkan pemformatan. Sebelum mencantikkan
Bahan rujukan selepas pengindahan: dokumentasi rasmi Alat Pembangun Chrome