Sebelum menulis kode yang lebih kompleks, mari kita bahas tentang debugging.
Debugging adalah proses menemukan dan memperbaiki kesalahan dalam skrip. Semua browser modern dan sebagian besar lingkungan lainnya mendukung alat debugging – UI khusus dalam alat pengembang yang membuat proses debug menjadi lebih mudah. Hal ini juga memungkinkan untuk melacak kode langkah demi langkah untuk melihat apa yang sebenarnya terjadi.
Kami akan menggunakan Chrome di sini, karena memiliki fitur yang cukup, sebagian besar browser lain memiliki proses serupa.
Versi Chrome Anda mungkin terlihat sedikit berbeda, namun tetap terlihat jelas apa yang ada di sana.
Buka halaman contoh di Chrome.
Aktifkan alat pengembang dengan F12 (Mac: Cmd + Opt + I ).
Pilih panel Sources .
Inilah yang harus Anda lihat jika Anda melakukannya untuk pertama kali:
Tombol pengalih membuka tab dengan file.
Mari kita klik dan pilih hello.js di tampilan pohon. Inilah yang akan muncul:
Panel Sumber memiliki 3 bagian:
Panel File Navigator mencantumkan HTML, JavaScript, CSS, dan file lainnya, termasuk gambar yang dilampirkan ke halaman. Ekstensi Chrome juga dapat muncul di sini.
Panel Editor Kode memperlihatkan kode sumber.
Panel JavaScript Debugging adalah untuk debugging, kami akan segera menjelajahinya.
Sekarang Anda bisa mengklik tombol yang sama lagi untuk menyembunyikan daftar sumber daya dan memberi ruang pada kode.
Jika kita menekan Esc , maka konsol terbuka di bawah. Kita bisa mengetikkan perintah di sana dan tekan Enter untuk mengeksekusi.
Setelah suatu pernyataan dieksekusi, hasilnya ditunjukkan di bawah ini.
Misalnya, di sini 1+2 menghasilkan 3 , sedangkan pemanggilan fungsi hello("debugger") tidak mengembalikan apa pun, sehingga hasilnya undefined :
Mari kita periksa apa yang terjadi dalam kode halaman contoh. Di hello.js , klik pada baris nomor 4 . Iya, pas di angka 4 , bukan di kodenya.
Selamat! Anda telah menetapkan titik henti sementara. Silakan klik juga nomor untuk baris 8 .
Seharusnya terlihat seperti ini (biru adalah tempat Anda harus mengklik):
Breakpoint adalah titik kode di mana debugger akan secara otomatis menghentikan sementara eksekusi JavaScript.
Saat kode dijeda, kita dapat memeriksa variabel saat ini, menjalankan perintah di konsol, dll. Dengan kata lain, kita dapat melakukan debug.
Kami selalu dapat menemukan daftar breakpoint di panel kanan. Itu berguna ketika kita memiliki banyak breakpoint di berbagai file. Ini memungkinkan kita untuk:
Lompat dengan cepat ke breakpoint dalam kode (dengan mengkliknya di panel kanan).
Nonaktifkan sementara breakpoint dengan menghapus centangnya.
Hapus breakpoint dengan mengklik kanan dan memilih Hapus.
…Dan sebagainya.
Breakpoint bersyarat
Klik kanan pada nomor baris memungkinkan untuk membuat breakpoint bersyarat . Ini hanya terpicu ketika ekspresi yang diberikan, yang harus Anda berikan saat Anda membuatnya, benar.
Ini berguna ketika kita perlu berhenti hanya untuk nilai variabel tertentu atau parameter fungsi tertentu.
Kita juga bisa menjeda kode tersebut dengan menggunakan perintah debugger di dalamnya, seperti ini:
fungsi halo(nama) {
biarkan frase = `Halo, ${nama}!`;
debug; // <-- debugger berhenti di sini
katakan(frasa);
}Perintah tersebut hanya berfungsi ketika alat pengembangan terbuka, jika tidak, browser akan mengabaikannya.
Dalam contoh kita, hello() dipanggil selama pemuatan halaman, jadi cara termudah untuk mengaktifkan debugger (setelah kita menyetel breakpoint) adalah dengan memuat ulang halaman. Jadi mari kita tekan F5 (Windows, Linux) atau Cmd + R (Mac).
Saat breakpoint disetel, eksekusi dijeda di baris ke-4:
Silakan buka dropdown informasi di sebelah kanan (diberi label panah). Mereka memungkinkan Anda memeriksa status kode saat ini:
Watch – menunjukkan nilai saat ini untuk ekspresi apa pun.
Anda dapat mengklik tanda tambah + dan memasukkan ekspresi. Debugger akan menunjukkan nilainya, secara otomatis menghitung ulang selama eksekusi.
Call Stack – menunjukkan rantai panggilan bersarang.
Saat ini debugger berada di dalam panggilan hello() , dipanggil oleh skrip di index.html (tidak ada fungsi di sana, jadi disebut "anonim").
Jika Anda mengklik item tumpukan (misalnya “anonim”), debugger akan melompat ke kode yang sesuai, dan semua variabelnya juga dapat diperiksa.
Scope – variabel saat ini.
Local menunjukkan variabel fungsi lokal. Anda juga dapat melihat nilainya disorot tepat di atas sumbernya.
Global memiliki variabel global (dari fungsi apa pun).
Ada juga kata kunci this yang belum kami pelajari, tapi kami akan segera melakukannya.
Sekarang saatnya menelusuri skripnya.
Ada tombolnya di bagian atas panel kanan. Mari libatkan mereka.
– “Lanjutkan”: lanjutkan eksekusi, tombol pintas F8 .
Melanjutkan eksekusi. Jika tidak ada breakpoint tambahan, maka eksekusi akan dilanjutkan dan debugger kehilangan kendali.
Inilah yang dapat kita lihat setelah mengkliknya:
Eksekusi telah dilanjutkan, mencapai breakpoint lain di dalam say() dan berhenti di sana. Lihatlah "Call Stack" di sebelah kanan. Ini telah meningkat satu panggilan lagi. Kami berada di dalam say() sekarang.
– “Langkah”: jalankan perintah berikutnya, hotkey F9 .
Jalankan pernyataan berikutnya. Jika kita mengkliknya sekarang, alert akan ditampilkan.
Mengklik ini lagi dan lagi akan menelusuri semua pernyataan skrip satu per satu.
– “Melangkahi”: jalankan perintah berikutnya, tetapi jangan masuk ke suatu fungsi , tombol pintas F10 .
Mirip dengan perintah “Langkah” sebelumnya, tetapi berperilaku berbeda jika pernyataan berikutnya adalah pemanggilan fungsi (bukan bawaan, seperti alert , tetapi fungsi kita sendiri).
Jika kita membandingkannya, perintah “Langkah” masuk ke dalam pemanggilan fungsi yang disarangkan dan menjeda eksekusi pada baris pertama, sementara “Langkah” mengeksekusi pemanggilan fungsi yang disarangkan tanpa terlihat oleh kita, melewati fungsi internal.
Eksekusi kemudian dijeda segera setelah pemanggilan fungsi tersebut.
Itu bagus jika kita tidak tertarik untuk melihat apa yang terjadi di dalam pemanggilan fungsi.
– “Masuk”, tombol pintas F11 .
Itu mirip dengan "Langkah", tetapi berperilaku berbeda jika terjadi pemanggilan fungsi asinkron. Jika Anda baru mulai mempelajari JavaScript, Anda dapat mengabaikan perbedaannya, karena kami belum memiliki panggilan asinkron.
Untuk selanjutnya, perhatikan bahwa perintah “Langkah” mengabaikan tindakan asinkron, seperti setTimeout (panggilan fungsi terjadwal), yang dijalankan nanti. "Langkah ke dalam" masuk ke dalam kode mereka, menunggu mereka jika perlu. Lihat manual DevTools untuk detail selengkapnya.
– “Step out”: lanjutkan eksekusi hingga akhir fungsi saat ini, tombol pintas Shift + F11 .
Lanjutkan eksekusi dan hentikan di baris terakhir dari fungsi saat ini. Itu berguna ketika kita secara tidak sengaja memasukkan panggilan bersarang menggunakan , tapi itu tidak menarik bagi kami, dan kami ingin melanjutkannya secepat mungkin.
– mengaktifkan/menonaktifkan semua breakpoint.
Tombol itu tidak menggerakkan eksekusi. Hanya on/off massal untuk breakpoint.
– mengaktifkan/menonaktifkan jeda otomatis jika terjadi kesalahan.
Saat diaktifkan, jika alat pengembang terbuka, kesalahan selama eksekusi skrip secara otomatis menjedanya. Lalu kita bisa menganalisis variabel di debugger untuk melihat apa yang salah. Jadi jika skrip kita mati karena kesalahan, kita dapat membuka debugger, mengaktifkan opsi ini dan memuat ulang halaman untuk melihat di mana skrip tersebut mati dan apa konteksnya pada saat itu.
Lanjutkan ke sini
Klik kanan pada sebaris kode akan membuka menu konteks dengan opsi bagus yang disebut "Lanjutkan ke sini".
Ini berguna ketika kita ingin maju beberapa langkah ke garis, tapi kita terlalu malas untuk menetapkan breakpoint.
Untuk mengeluarkan sesuatu untuk dihibur dari kode kita, ada fungsi console.log .
Misalnya, ini menghasilkan nilai dari 0 hingga 4 ke konsol:
// buka konsol untuk melihat
untuk (misalkan i = 0; i < 5; i++) {
console.log("nilai",,i);
}Pengguna biasa tidak melihat keluaran itu, melainkan ada di konsol. Untuk melihatnya, buka panel Konsol alat pengembang atau tekan Esc saat berada di panel lain: yang membuka konsol di bagian bawah.
Jika kita memiliki cukup login dalam kode kita, maka kita dapat melihat apa yang terjadi dari catatan, tanpa debugger.
Seperti yang bisa kita lihat, ada tiga cara utama untuk menjeda skrip:
Sebuah titik henti sementara.
Pernyataan debugger .
Kesalahan (jika alat pengembang terbuka dan tombol sedang “aktif”).
Saat dijeda, kita dapat melakukan debug: memeriksa variabel dan melacak kode untuk melihat kesalahan eksekusi.
Ada lebih banyak pilihan dalam alat pengembang daripada yang dibahas di sini. Panduan lengkapnya ada di https://developers.google.com/web/tools/chrome-devtools.
Informasi dari bab ini cukup untuk memulai proses debug, namun nanti, khususnya jika Anda melakukan banyak hal di browser, silakan buka di sana dan lihat kemampuan alat pengembang yang lebih canggih.
Oh, dan Anda juga dapat mengklik di berbagai tempat alat pengembang dan melihat apa yang muncul. Itu mungkin cara tercepat untuk mempelajari alat pengembang. Jangan lupa tentang klik kanan dan menu konteks!