JavaScript Debug

Kayce Basques

Sofia Emelianova

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

Mereproduksi bug

Menemukan serangkaian tindakan yang mereproduksi bug secara konsisten 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 fitur yang 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. Titik titik henti memungkinkan Anda menjeda kode di tengah eksekusi, dan memeriksa semua nilai pada saat tersebut. 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 menampilkan 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 mundur selangkah dan memikirkan cara kerja aplikasi, Anda dapat membuat perkiraan yang matang bahwa jumlah yang salah (5 + 1 = 51) dihitung dalam pemroses peristiwa click yang terkait dengan tombol Tambahkan Nomor 1 dan Angka 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. Melangkahi kode memungkinkan Anda menelusuri eksekusi kode, baris demi baris, dan mengetahui secara persis tempat dieksekusi dalam urutan yang berbeda dari yang Anda harapkan. Coba sekarang:

1. Di panel Sumber pada DevTools, klik step_into Step into next function call untuk melangkahi eksekusi fungsi onClick(), baris demi baris. DevTools menandai baris kode berikut:

   if (inputsAreEmpty()) {
   

2. Klik step_over Step over next function.

   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

Titik henti sementara baris kode adalah jenis titik henti sementara yang paling umum. Jika Anda ingin menjeda 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 akan menempatkan ikon biru di atas 32. Ini berarti ada breakpoint baris kode pada baris ini. DevTools kini selalu dijeda sebelum baris kode ini dieksekusi.

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 lebih banyak informasi. 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 Tonton memungkinkan Anda memantau nilai variabel dari waktu ke waktu. Tonton 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 smartwatch.
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 yang diduga, sum sedang dievaluasi sebagai string, padahal seharusnya berupa 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. Alat ini 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 Code Editor, 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 perangkat tersebut aktif. Meskipun ini disetel, DevTools mengabaikan breakpoint yang telah Anda setel.
5. Coba demo dengan nilai yang berbeda. Demo sekarang 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 adalah true.
• 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 waktu dan cara menggunakan setiap jenis.

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