JavaScript Debug

Kayce Basques

Sofia Emelianova

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

Reproduksi bug

Menemukan serangkaian tindakan yang secara konsisten mereproduksi bug selalu menjadi langkah pertama dalam melakukan 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 seharusnya 6. Inilah bug yang akan Anda perbaiki.

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

Memahami UI panel Sumber

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

1. Buka DevTools dan buka panel Sources.

   

Panel Sources memiliki tiga bagian:

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

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

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

Menjeda kode dengan titik henti sementara

Metode umum untuk men-debug masalah seperti ini adalah dengan 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, tetapi titik henti sementara dapat menyelesaikannya lebih cepat. Dengan titik henti sementara, Anda dapat 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 harus 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 mengetahui struktur kode.
• Dalam pernyataan console.log(), Anda harus secara eksplisit menentukan setiap nilai yang ingin diperiksa. Dengan titik henti sementara, DevTools menampilkan nilai semua variabel pada saat itu. Kadang ada variabel yang memengaruhi kode yang bahkan tidak Anda sadari.

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

Jika Anda mundur selangkah dan memikirkan cara kerja aplikasi, Anda dapat membuat perkiraan yang matang bahwa jumlah yang salah (5 + 1 = 51) akan dihitung di pemroses peristiwa click yang terkait dengan tombol Tambahkan Nomor 1 dan Nomor 2. Oleh karena itu, Anda mungkin perlu menjeda kode pada 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 Luaskan. DevTools akan menampilkan daftar peristiwa mouse, seperti click dan mousedown. Setiap peristiwa memiliki kotak centang di sampingnya.

3. Centang kotak klik. DevTools sekarang disiapkan untuk otomatis dijeda saat semua pemroses peristiwa click dijalankan.

   

4. Kembali ke demo, klik Tambahkan Nomor 1 dan Nomor 2 lagi. DevTools menjeda demo dan menandai baris kode di panel Sources. DevTools akan dijeda pada baris kode ini:

   function onClick() {
   

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

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

Menelusuri kode

Salah satu penyebab umum bug adalah jika skrip dieksekusi dalam urutan yang salah. Dengan menelusuri kode, Anda dapat menelusuri eksekusi kode, baris demi baris, dan mengetahui secara tepat di mana kode tersebut dieksekusi dalam urutan yang berbeda dari yang Anda harapkan. Coba sekarang:

1. Di panel Sources di DevTools, klik step_into Step into next function call untuk menjalankan 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. Ini karena inputsAreEmpty() dievaluasi sebagai false, sehingga blok kode pernyataan if tidak dieksekusi.

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

Menetapkan titik henti sementara baris kode

Titik henti sementara baris kode adalah jenis titik henti sementara yang paling umum. Jika Anda memiliki baris kode tertentu yang ingin dijeda, 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 untuk baris kode khusus ini, yaitu 32. Klik 32. DevTools menempatkan ikon biru di atas 32. Artinya, ada titik henti sementara baris kode pada baris ini. DevTools kini selalu dijeda sebelum baris kode ini dieksekusi.

3. Klik resume Lanjutkan eksekusi skrip. Skrip 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 di baris 32.

Memeriksa nilai variabel

Nilai addend1, addend2, dan sum tampak mencurigakan. Mereka diberi tanda kutip, yang berarti bahwa mereka adalah {i>string<i}. Ini adalah hipotesis yang baik untuk menjelaskan penyebab bug. Sekarang saatnya untuk mengumpulkan lebih banyak informasi. DevTools menyediakan banyak alat untuk memeriksa nilai variabel.

Metode 1: Memeriksa Cakupan

Saat Anda dijeda pada baris kode, tab Cakupan menunjukkan variabel lokal dan global yang ditentukan pada tahap eksekusi ini, beserta nilai setiap variabel. Tabel ini juga menunjukkan variabel penutupan, jika memungkinkan. Saat Anda tidak dijeda pada baris kode, tab Cakupan akan kosong.

Klik dua kali nilai variabel untuk mengeditnya.

Metode 2: Ekspresi smartwatch

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

Coba sekarang:

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

Screenshot ini menampilkan tab Tonton (kanan bawah) setelah membuat ekspresi jam typeof sum.

Seperti diduga, sum dievaluasi sebagai string, padahal seharusnya berupa angka. Sekarang Anda 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 kemungkinan perbaikan bug. Coba sekarang:

1. Jika panel samping Konsol tidak terbuka, tekan Escape untuk membukanya. Tombol tersebut akan terbuka di bagian bawah jendela DevTools.
2. Di Console, 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 Anda harapkan untuk dihasilkan oleh demo.

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

Terapkan perbaikan

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

1. Klik resume 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 itu aktif. Jika ini disetel, DevTools akan mengabaikan titik henti sementara yang telah Anda tetapkan.
5. Coba demo dengan nilai yang berbeda. Demo kini menghitung dengan benar.

Langkah berikutnya

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

• Titik henti sementara bersyarat yang hanya dipicu jika kondisi yang Anda berikan benar.
• Titik henti sementara pada pengecualian yang tertangkap atau tidak tertangkap.
• Breakpoint 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 tiap jenis.

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