Bagaimana Anda men -debug program JavaScript? Metode yang paling primitif adalah menggunakan peringatan () untuk mencetak konten pada halaman, dan metode yang sedikit lebih baik adalah menggunakan Console.log () untuk mengeluarkan konten pada konsol JavaScript. Nah, menggunakan kedua metode ini memang telah memecahkan banyak masalah debugging dari skrip javascript kecil. Namun, sangat disayangkan untuk tidak menggunakan alat pengembang yang menjadi semakin kuat di Chrome. Artikel ini terutama memperkenalkan pengaturan breakpoint JavaScript dan fungsi debugging, yaitu panel sumber (sebelumnya disebut skrip). Jika Anda mahir dalam berbagai teknik debugging Java di Eclipse, konsep -konsep di sini serupa. Versi krom yang digunakan saat menulis artikel ini adalah 25.0.1364.172.
Lingkungan dasar
Di sebelah kiri Sourcespanel adalah sumber konten, termasuk berbagai sumber daya di halaman. Di antara mereka, itu dibagi menjadi sumber dan skrip konten. Sumber adalah berbagai sumber yang terkandung dalam halaman itu sendiri. Mereka diatur sesuai dengan domain yang muncul di halaman, yang perlu kita perhatikan. File JS yang dimuat secara asinkron juga akan muncul di sini setelah memuat. Skrip konten adalah ekstensi chrome yang disusun sesuai dengan ID ekstensi. Jenis ekstensi ini sebenarnya adalah sumber daya yang tertanam di halaman, dan mereka juga dapat membaca dan menulis DOM. Hanya pengembang yang menulis dan men -debug ekstensi seperti ini yang harus merawatnya. Jika browser Anda tidak menginstal ekstensi, skrip konten tidak akan melihat apa pun.
Area utama tengah panel sumber digunakan untuk menampilkan konten file sumber daya di sebelah kiri.
Di sisi kanan panel sumber adalah area fungsional debugging. Baris atas tombol adalah jeda/lanjutkan, langkah demi langkah, langkah demi langkah, melompat langkah demi langkah, menonaktifkan/mengaktifkan semua breakpoint. Di bawah ini adalah berbagai area fungsional spesifik. Ini akan diperkenalkan nanti.
Perhatikan bahwa area di kedua sisi dapat menyusut secara default dan tidak ditampilkan di kedua sisi. Klik tombol teleskopik di kedua sisi untuk ditampilkan. Ketika area kiri ditampilkan, standarnya adalah untuk secara otomatis menyusut. Klik tombol PIN di sebelahnya dan itu tidak akan menarik kembali.
Ada juga beberapa tombol fitur di bagian bawah yang sangat berguna.
Atur breakpoint pada kode sumber
Melalui sumber konten di sebelah kiri, buka file JavaScript yang sesuai, klik nomor baris file dan atur dan hapus breakpoints. Setiap breakpoint yang ditambahkan akan muncul dalam daftar breakpoints di area debug di sebelah kanan. Mengklik daftar breakpoint akan menemukan breakpoint di area konten. Jika Anda memiliki beberapa file dan beberapa breakpoint, sangat nyaman untuk dengan cepat menemukan breakpoint dalam daftar breakpoints.
Ada dua negara bagian untuk setiap breakpoint tambahan: aktifkan dan nonaktifkan. Breakpoint yang baru saja ditambahkan adalah semua keadaan yang diaktifkan, dan keadaan cacat adalah untuk mempertahankan breakpoint tetapi untuk sementara membatalkan fungsi breakpoint. Ada kotak centang sebelum setiap breakpoint dalam daftar breakpoints, dan hapus centang akan menonaktifkan breakpoint. Breakpoint juga dapat dinonaktifkan di menu klik kanan dari posisi breakpoint. Anda juga dapat menonaktifkan sementara semua breakpoint yang ditambahkan pada tombol pada pita kanan, dan klik untuk mengembalikan keadaan asli.
Breakpoint bersyarat : Pilih "Edit Breakpoint ..." di menu klik kanan dari posisi breakpoint untuk mengatur kondisi untuk memicu breakpoint, yaitu, tulis ekspresi, dan breakpoint akan dipicu hanya ketika ekspresi itu benar. Periksa tumpukan panggilan lingkungan dari breakpoints (tumpukan panggilan): Ketika breakpoint berhenti, tumpukan panggilan di area debugging di sebelah kanan akan menampilkan stack panggilan metode di mana breakpoint saat ini. Misalnya, ada fungsi g () di mana fungsi f () dipanggil, dan saya mengatur breakpoint di f (). Kemudian ketika saya menjalankan fungsi g () di konsol, breakpoint akan dipicu, dan tumpukan panggilan akan ditampilkan sebagai berikut:
Bagian atas adalah f (), dan kemudian g (). Setiap lapisan dalam tumpukan panggilan disebut bingkai. Mengklik pada setiap bingkai dapat melompat ke titik panggilan bingkai itu.
Selain itu, Anda dapat memulai kembali eksekusi bingkai saat ini pada bingkai menggunakan menu klik kanan, yaitu, dari awal bingkai. Misalnya, pada bingkai fungsi f (), breakpoint akan melompat ke awal f () dan eksekusi ulang, dan nilai variabel dalam konteks juga akan dipulihkan. Dengan cara ini, menggabungkan fungsi seperti modifikasi variabel dan pengeditan kode, Anda dapat berulang kali men -debug dalam bingkai saat ini tanpa menyegarkan halaman dan memicu breakpoint lagi. Lihat variabel
Di bawah daftar tumpukan panggilan adalah daftar Variabel Lingkup, di mana Anda dapat melihat nilai -nilai variabel lokal dan global saat ini. Menjalankan kode yang dipilih
Selama debugging breakpoint, Anda dapat menggunakan mouse untuk memilih variabel atau ekspresi yang ingin Anda lihat, dan kemudian klik kanan menu untuk mengeksekusi "Evaluasi dalam konsol" untuk melihat nilai ekspresi saat ini. Tombol "Interrupt/Lanjutan" di bagian atas area debugging di sisi kanan pernyataan JavaScript yang akan dieksekusi di waktu berikutnya memiliki fungsi. Ketika tidak ada breakpoint yang dipicu, mengklik tombol ini akan memasuki keadaan interupsi "persiapan". Lain kali halaman mengeksekusi pernyataan JavaScript, akan secara otomatis mengganggu, seperti kode yang akan dieksekusi ketika tindakan klik dipicu. Modifikasi untuk sementara kode JavaScript. Kami biasanya terbiasa dengan loop ini saat debugging kode: Ubah kode → Segarkan halaman → periksa kembali. Namun pada kenyataannya, konten dalam file JS dapat dimodifikasi sementara di Chrome. Save (Ctrl+S) dapat segera berlaku, dan segera mendebugnya dengan konsol dan fungsi lainnya. Tetapi harap dicatat bahwa modifikasi ini bersifat sementara, dan modifikasi halaman penyegaran akan hilang.
Break Point in Exception
Anda dapat melihat tombol di bawah antarmuka. Ini adalah sakelar yang menetapkan apakah program terganggu ketika menemukan pengecualian saat berjalan. Mengklik tombol ini akan beralih di antara 3 status:
Secara default, tidak ada gangguan yang akan ditemui
Semua pengecualian akan terganggu, termasuk situasi yang ditangkap
Hanya menyela jika pengecualian yang tidak terasa terjadi
Terutama menjelaskan perbedaan antara keadaan 2 dan keadaan 3
mencoba{
Lempar 'pengecualian';
} catch (e) {
console.log (e);
}
Kode dalam percobaan di atas akan menghadapi pengecualian, tetapi kode tangkapan di belakang dapat menangkap pengecualian. Jika semua pengecualian terganggu, kode akan secara otomatis mengganggu ketika dieksekusi ke pernyataan lemparan yang akan menghasilkan pengecualian; Dan jika itu terganggu hanya ketika mengalami pengecualian yang tidak tertutup, maka itu tidak akan mengganggu di sini. Secara umum, kami akan lebih khawatir tentang menemukan pengecualian yang tidak tertulis.
Atur breakpoint pada elemen DOM
Kadang -kadang kita perlu mendengarkan DOM tertentu yang dimodifikasi tanpa peduli dengan baris kode mana yang dimodifikasi (atau mungkin ada banyak tempat yang akan dimodifikasi). Kemudian kita dapat mengatur breakpoint langsung pada DOM.
Seperti yang ditunjukkan pada gambar, di Panel Elemen Ulasan Elemen, Anda dapat mengatur tiga breakpoint di menu klik kanan pada elemen: Setelah simpul anak memodifikasi atributnya sendiri dan memodifikasi simpulnya sendiri dihapus, dom breakpoint akan muncul dalam daftar breakpoint DOM di sisi kanan panel sumber. Setelah dieksekusi untuk membuat modifikasi yang sesuai ke DOM, kode akan berhenti di situ, seperti yang ditunjukkan pada gambar di bawah ini.
XHR Break Point
Ada breakpoint XHR di area debugging di sebelah kanan. Klik + dan masukkan string yang terkandung dalam URL untuk mendengarkan permintaan AJAX untuk URL. Konten input setara dengan filter URL. Jika tidak ada yang diisi, dengarkan semua permintaan XHR. Setelah panggilan XHR dipicu, itu akan pecah di tempat di mana permintaan.send () diminta.
Trigger Breakpoint berdasarkan jenis acara
Daftar pendengar acara di area debug di sebelah kanan, di mana berbagai jenis acara yang mungkin terdaftar. Periksa jenis acara yang sesuai, dan secara otomatis akan mengganggu ketika kode JavaScript yang memicu peristiwa jenis itu.
Kunci Pintasan Debug
Kunci pintasan di semua alat pengembangan dapat ditemukan di pengaturan di sudut kanan bawah antarmuka. F8, F10, F11 atau SHITF+F11 umumnya digunakan ketika debugging breakpoint, tetapi kunci fungsi seperti F10 dapat bertentangan dengan kunci pintasan default sistem. Tidak masalah, mereka dapat diganti dengan cmd+/, cmd+', cmd+; , Shift+cmd+; masing -masing. //@ SumberUrl Nama Kode yang diproduksi oleh Eval. Kadang -kadang beberapa kode yang sangat dinamis dibuat dalam konteks JavaScript saat ini dalam bentuk string melalui fungsi eval (), daripada memuat sebagai file JS terpisah. Dengan cara ini, Anda tidak akan menemukan file di area konten di sebelah kiri, jadi sulit untuk men -debug. Bahkan, kami hanya menambahkan baris "//@ sourceUrl = name" di akhir kode yang dibuat oleh Eval untuk menyebutkan kode ini (browser akan memperlakukan bentuk komentar khusus ini secara khusus), sehingga akan muncul di area konten di sebelah kiri, sama seperti Anda memuat file JS dengan nama yang ditentukan, Anda dapat mengatur breakpoint dan debug. Pada gambar di bawah ini, kami menjalankan sepotong kode melalui eval dan menggunakan SourceUrl untuk menamainya DynamicScript.js. Setelah dieksekusi, "file" ini muncul di area konten di sebelah kiri, dan isinya adalah konten dalam eval. Anda juga dapat melihat contoh penamaan kode CoffeeScript yang dikompilasi secara dinamis:
var coffee = coffeescript.compile (code.value) + "//@ sourceUrl =" + (evalname.value || "coffeeeeeeeee!");
eval (kopi);
Faktanya, //@ SourceUrl tidak hanya dapat digunakan dalam kode eval, tetapi file JS apa pun atau bahkan kode yang dimasukkan oleh konsol JavaScript dapat digunakan, dengan efek yang sama! Tombol Format Code (Pretty Print) digunakan untuk memformat ulang kode yang berantakan menjadi kode yang indah, seperti beberapa file JS terkompresi yang pada dasarnya tidak dapat dibaca atau debugged. Klik format dan kemudian unformat. Sebelum kecantikan
Referensi yang dipercantik: Dokumentasi Resmi Alat Pengembang Chrome