JavaScript Debug

Kayce Basques

Sofia Emelianova

Tutorial ini mengajarkan Anda alur kerja dasar untuk men-debug masalah JavaScript di DevTools. Baca lanjutan, atau tonton video dari tutorial ini.

Mereproduksi bug

Menemukan serangkaian tindakan yang secara konsisten mengulangi kemunculan bug selalu menjadi langkah pertama untuk proses debug.

1. Buka demo ini di tab baru.
2. Masukkan 5 di kotak Nomor 1.
3. Masukkan 1 di kotak Nomor 2.
4. Klik Tambahkan Nomor 1 dan Nomor 2. Label di bawah tombol bertuliskan 5 + 1 = 51. Hasilnya harus 6. Inilah bug yang akan Anda perbaiki.

Dalam contoh ini, hasil 5 + 1 adalah 51. Seharusnya 6.

Memahami UI panel Sumber

DevTools menyediakan banyak alat berbeda untuk tugas yang berbeda, seperti mengubah CSS, membuat profil performa pemuatan halaman, dan memantau permintaan jaringan. Panel Sumber adalah tempat Anda men-debug JavaScript.

1. Buka DevTools dan buka panel Sources.

   

Panel Sumber memiliki tiga bagian:

1. Tab Halaman dengan hierarki file. Setiap file yang diminta oleh halaman tercantum di sini.
2. Bagian Code Editor. Setelah memilih file di tab Halaman, isi file tersebut akan ditampilkan di sini.

3. Bagian Debugger. Beragam alat untuk memeriksa JavaScript halaman.

   Jika jendela DevTools Anda lebar, secara default, Debugger berada di sebelah kanan Editor Kode. Dalam hal ini, tab Cakupan dan Pantau bergabung dengan Titik henti sementara, Stack panggilan, dan lainnya sebagai bagian yang dapat diciutkan.

Menjeda kode dengan titik henti sementara

Metode umum untuk melakukan debug pada masalah seperti ini adalah menyisipkan banyak pernyataan console.log() ke dalam kode, untuk memeriksa nilai saat skrip dieksekusi. Contoh:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

Metode console.log() mungkin dapat menyelesaikan tugas tersebut, tetapi titik henti sementara dapat menyelesaikannya lebih cepat. Breakpoint memungkinkan Anda menjeda kode di tengah eksekusi, dan memeriksa semua nilai pada saat itu. Titik henti sementara memiliki beberapa keunggulan dibandingkan metode console.log():

• Dengan console.log(), Anda perlu membuka kode sumber secara manual, menemukan kode yang relevan, menyisipkan pernyataan console.log(), lalu memuat ulang halaman untuk melihat pesan di Konsol. Dengan titik henti sementara, Anda dapat menjeda kode yang relevan tanpa perlu mengetahui cara kode terstruktur.
• Dalam pernyataan console.log(), Anda harus secara eksplisit menentukan setiap nilai yang ingin Anda periksa. Dengan titik henti sementara, DevTools menunjukkan nilai semua variabel pada saat itu. Terkadang ada variabel yang memengaruhi kode bahkan tanpa Anda sadari.

Singkatnya, titik henti sementara dapat membantu Anda menemukan dan memperbaiki bug lebih cepat daripada metode console.log().

Jika Anda mengingat-ingat kembali cara kerja aplikasi, Anda dapat menebak bahwa jumlah yang tidak tepat (5 + 1 = 51) dihitung di pemroses peristiwa click yang terkait dengan tombol Tambahkan Nomor 1 dan Nomor 2. Oleh karena itu, sebaiknya Anda menjeda kode sekitar waktu pemroses click dieksekusi. Titik Henti Sementara Pemroses Peristiwa memungkinkan Anda melakukan hal tersebut:

1. Di bagian Debugger, klik Event Listener Breakpoints untuk meluaskan bagian tersebut. DevTools menampilkan daftar kategori peristiwa yang dapat diluaskan, seperti Animasi dan Papan Klip.
2. Di samping kategori peristiwa Mouse, klik arrow_right Expand. DevTools menampilkan daftar peristiwa mouse, seperti click dan mousedown. Setiap peristiwa memiliki kotak centang di sampingnya.

3. Centang kotak klik. DevTools kini disiapkan untuk dijeda otomatis saat pemroses peristiwa click mana pun dieksekusi.

   

4. Kembali ke demo, klik Tambahkan Nomor 1 dan Nomor 2 lagi. DevTools menjeda demo dan menyoroti baris kode di panel Sumber. DevTools harus dijeda pada baris kode ini:

   function onClick() {
   

   Jika Anda dijeda pada baris kode yang berbeda, tekan lanjutkan Lanjutkan Eksekusi Skrip hingga Anda dijeda pada baris yang benar.

Titik Henti Sementara Pemroses Peristiwa hanyalah salah satu dari banyak jenis titik henti sementara yang tersedia di DevTools. Sebaiknya pelajari semua jenisnya, karena setiap jenis pada akhirnya membantu Anda men-debug berbagai skenario secepat mungkin. Lihat Menjeda Kode dengan Titik Henti untuk mempelajari kapan dan cara menggunakan setiap jenis.

Menyusuri kode

Salah satu penyebab umum bug adalah jika skrip dieksekusi dalam urutan yang salah. Dengan menelusuri kode, Anda dapat mengikuti proses eksekusi kode, baris demi baris, dan mengetahui secara persis tempat kode dieksekusi dalam urutan yang berbeda dengan yang Anda harapkan. Coba sekarang:

1. Di panel Sumber pada DevTools, klik step_into Masuk ke panggilan fungsi berikutnya untuk melangkahi eksekusi fungsi onClick(), baris demi baris. DevTools menandai baris kode berikut:

   if (inputsAreEmpty()) {
   

2. Klik step_over Step over next function call.

   DevTools mengeksekusi inputsAreEmpty() tanpa melangkah ke dalamnya. Perhatikan cara DevTools melewati beberapa baris kode. Hal ini karena inputsAreEmpty() dievaluasi sebagai salah, sehingga blok kode pernyataan if tidak dieksekusi.

Itulah gambaran umum mengenai penyusuran kode. Jika melihat kode di get-started.js, Anda dapat melihat bahwa bug mungkin ada di suatu tempat dalam fungsi updateLabel(). Daripada menelusuri setiap baris kode, Anda dapat menggunakan jenis titik henti sementara lain untuk menjeda kode yang lebih dekat dengan kemungkinan lokasi bug.

Menetapkan titik henti sementara baris kode

Breakpoint baris kode adalah jenis titik henti sementara yang paling umum. Jika Anda ingin menjeda di baris kode tertentu, gunakan titik henti sementara baris kode:

1. Lihat baris terakhir kode di updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. Di sebelah kiri kode, Anda dapat melihat nomor baris dari baris kode tertentu ini, yaitu 32. Klik 32. DevTools menempatkan ikon biru di atas 32. Ini berarti ada breakpoint baris kode pada baris ini. DevTools sekarang selalu dijeda sebelum baris kode ini dijalankan.

3. Klik lanjutkan Lanjutkan eksekusi skrip. Skrip akan terus dieksekusi hingga mencapai baris 32. Pada baris 29, 30, dan 31, DevTools menampilkan nilai addend1, addend2, dan sum secara inline di samping deklarasinya.

Dalam contoh ini, DevTools dijeda pada titik henti sementara baris kode pada baris 32.

Memeriksa nilai variabel

Nilai addend1, addend2, dan sum terlihat mencurigakan. Nilai tersebut diberi tanda kutip, yang berarti string. Ini adalah hipotesis yang baik untuk menjelaskan penyebab bug. Sekarang saatnya untuk mengumpulkan informasi selengkapnya. DevTools menyediakan banyak alat untuk memeriksa nilai variabel.

Metode 1: Memeriksa Cakupan

Saat Anda dijeda pada baris kode, tab Cakupan akan menampilkan variabel lokal dan global yang ditentukan pada titik ini dalam eksekusi, beserta nilai setiap variabel. Laporan ini juga menampilkan variabel penutupan, jika berlaku. Jika Anda tidak dijeda pada baris kode, tab Cakupan akan kosong.

Klik dua kali nilai variabel untuk mengeditnya.

Metode 2: Ekspresi watch

Tab Watch memungkinkan Anda memantau nilai variabel dari waktu ke waktu. Watch tidak hanya terbatas pada variabel. Anda dapat menyimpan ekspresi JavaScript yang valid di tab Watch.

Coba sekarang:

1. Klik tab Tonton.
2. Klik tambahkan Tambahkan ekspresi watch.
3. Ketik typeof sum.
4. Tekan Enter. DevTools menampilkan typeof sum: "string". Nilai di sebelah kanan titik dua adalah hasil ekspresi Anda.

Screenshot ini menampilkan tab Watch (kanan bawah) setelah membuat ekspresi pengawasan typeof sum.

Seperti diduga, sum dievaluasi sebagai string, padahal seharusnya sebagai angka. Anda sekarang telah mengonfirmasi bahwa inilah penyebab bug tersebut.

Metode 3: Konsol

Selain melihat pesan console.log(), Anda juga dapat menggunakan Konsol untuk mengevaluasi pernyataan JavaScript arbitrer. Dalam hal proses debug, Anda dapat menggunakan Konsol untuk menguji potensi perbaikan bug. Coba sekarang:

1. Jika panel samping Konsol tidak terbuka, tekan Escape untuk membukanya. Panel samping akan terbuka di bagian bawah jendela DevTools.
2. Di Konsol, ketik parseInt(addend1) + parseInt(addend2). Pernyataan ini berfungsi karena Anda dijeda pada baris kode dengan addend1 dan addend2 dalam cakupan.
3. Tekan Enter. DevTools akan mengevaluasi pernyataan dan mencetak 6, yang merupakan hasil yang diharapkan dari demo tersebut.

Screenshot ini menampilkan panel samping Console setelah mengevaluasi parseInt(addend1) + parseInt(addend2).

Menerapkan perbaikan

Anda telah menemukan perbaikan untuk bug tersebut. Sekarang tinggal mencoba perbaikan dengan mengedit kode dan menjalankan ulang demo. Anda tidak perlu keluar dari DevTools untuk menerapkan perbaikan. Anda dapat mengedit kode JavaScript langsung dalam UI DevTools. Coba sekarang:

1. Klik lanjutkan Lanjutkan eksekusi skrip.
2. Di Editor Kode, ganti baris 31, var sum = addend1 + addend2, dengan var sum = parseInt(addend1) + parseInt(addend2).
3. Tekan Command + S (Mac) atau Control + S (Windows, Linux) untuk menyimpan perubahan.
4. Klik label_off Nonaktifkan titik henti sementara. Warnanya berubah menjadi biru untuk menunjukkan bahwa tombol tersebut aktif. Meskipun telah disetel, DevTools akan mengabaikan breakpoint yang telah Anda tetapkan.
5. Coba demo dengan nilai yang berbeda. Demo sekarang menghitung dengan benar.

Langkah berikutnya

Tutorial ini hanya menunjukkan dua cara untuk menyetel titik henti sementara. DevTools menawarkan banyak cara lainnya, termasuk:

• Breakpoint bersyarat yang hanya dipicu jika kondisi yang Anda berikan adalah true.
• Titik henti sementara pada pengecualian yang tertangkap atau yang tidak tertangkap.
• Titik henti sementara XHR yang dipicu saat URL yang diminta cocok dengan substring yang Anda berikan.

Lihat Menjeda Kode dengan Titik Henti Sementara untuk mempelajari kapan dan cara menggunakan setiap jenis.

Ada beberapa kontrol penyusuran kode yang belum dijelaskan dalam tutorial ini. Lihat Melangkahi baris kode untuk mempelajari lebih lanjut.