JavaScript Debug

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

Langkah 1: Reproduksi bug

Menemukan serangkaian tindakan yang secara konsisten mereproduksi bug selalu merupakan langkah pertama untuk melakukan proses debug.

1. Buka demo ini di tab baru.
2. Masukkan 5 di kotak teks Nomor 1.
3. Masukkan 1 di kotak teks 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 5 + 1 adalah 51. Seharusnya 6.

Langkah 2: Memahami UI panel Sumber

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

1. Buka DevTools dengan menekan Command+Option+J (Mac) atau Control+Shift+J (Windows, Linux). Pintasan ini membuka panel Konsol.

   

2. Klik tab Sumber.

   

UI panel Sumber memiliki 3 bagian:

1. Panel File Navigator. Setiap file yang diminta halaman tercantum di sini.
2. Panel Code Editor. Setelah memilih file di panel File Navigator, isi file tersebut akan ditampilkan di sini.
3. Panel Debug JavaScript. Berbagai alat untuk memeriksa JavaScript halaman. Jika jendela DevTools Anda lebar, panel ini akan ditampilkan di sebelah kanan panel Code Editor.

Langkah 3: Jeda 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 menentukan secara eksplisit setiap nilai yang ingin diperiksa. Dengan titik henti sementara, DevTools menampilkan nilai semua variabel pada saat itu. Terkadang 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 mundur selangkah dan memikirkan cara kerja aplikasi, Anda dapat membuat tebakan bahwa jumlah yang salah (5 + 1 = 51) dihitung di pemroses peristiwa click yang terkait dengan tombol Tambahkan Nomor 1 dan Nomor 2. Oleh karena itu, Anda mungkin ingin menjeda kode di sekitar waktu saat pemroses click dieksekusi. Titik Henti Sementara Pemroses Peristiwa memungkinkan Anda melakukan hal tersebut secara persis:

1. Di panel Proses Debug JavaScript, klik Titik Henti Sementara Pemroses Peristiwa untuk meluaskan bagiannya. DevTools menampilkan daftar kategori peristiwa yang dapat diperluas, seperti Animasi dan Papan Klip.
2. Di samping kategori peristiwa Mouse, klik Expand . DevTools 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 salah satu pemroses peristiwa click dieksekusi.

   

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 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 menghafal semua jenis yang berbeda tersebut, karena setiap jenis tersebut pada akhirnya membantu Anda men-debug skenario yang berbeda secepat mungkin. Lihat Menjeda Kode Dengan Breakpoint untuk mempelajari kapan dan cara menggunakan setiap jenis.

Langkah 4: Menyusuri kode

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

1. Di panel Sources di DevTools, klik Step into next function call untuk menelusuri eksekusi fungsi onClick(), baris demi baris. DevTools menandai baris kode berikut:

   if (inputsAreEmpty()) {
   

2. Klik 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 false, sehingga blok kode pernyataan if tidak dieksekusi.

Itulah ide dasar saat menelusuri kode. Jika melihat kode dalam 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.

Langkah 5: Tetapkan 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 tertentu ini, yaitu 32. Klik 32. DevTools menempatkan ikon biru di atas 32. Artinya, ada titik henti sementara baris kode pada baris ini. DevTools sekarang selalu dijeda sebelum baris kode ini dieksekusi.

3. Klik 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 di baris 32.

Langkah 6: Periksa nilai variabel

Nilai addend1, addend2, dan sum tampak mencurigakan. Mereka diapit dalam tanda kutip, yang berarti 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: Panel Cakupan

Saat jeda pada baris kode, panel Cakupan akan menampilkan variabel lokal dan global yang saat ini ditentukan, beserta nilai setiap variabel. Contoh ini juga menunjukkan variabel penutupan, jika berlaku. Klik dua kali nilai variabel untuk mengeditnya. Jika Anda tidak dijeda pada baris kode, panel Scope akan kosong.

Metode 2: Pantau Ekspresi

Tab Pantau Ekspresi memungkinkan Anda memantau nilai variabel dari waktu ke waktu. Seperti namanya, Ekspresi Pantau tidak hanya dibatasi pada variabel. Anda dapat menyimpan ekspresi JavaScript yang valid di Pantau Ekspresi. Coba sekarang:

1. Klik tab Tonton.
2. Klik Add Expression .
3. Ketik typeof sum.
4. Tekan Enter. DevTools menampilkan typeof sum: "string". Nilai di sebelah kanan tanda titik dua adalah hasil Ekspresi Tontonan Anda.

Screenshot di atas menunjukkan panel Watch Expression (kanan bawah) setelah membuat ekspresi smartwatch typeof sum. Jika jendela DevTools besar, panel Watch Expression berada di kanan, di atas panel Event Listener Breakpoints.

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. Ikon ini akan terbuka di bagian bawah jendela DevTools Anda.
2. Di Console, ketik parseInt(addend1) + parseInt(addend2). Pernyataan ini berfungsi karena Anda dijeda pada baris kode tempat addend1 dan addend2 berada dalam cakupan.
3. Tekan Enter. DevTools akan mengevaluasi pernyataan dan mencetak 6, yang merupakan hasil yang diharapkan dari demo tersebut.

Screenshot di atas menunjukkan panel samping Konsol setelah mengevaluasi parseInt(addend1) + parseInt(addend2).

Langkah 7: Terapkan perbaikan

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

1. Klik 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 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-beda. Demo kini menghitung dengan benar.

Langkah berikutnya

Selamat! Anda sekarang mengetahui cara memaksimalkan Chrome DevTools saat men-debug JavaScript. Alat dan metode yang Anda pelajari dalam tutorial ini dapat menghemat banyak waktu.

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.
• Breakpoint pada pengecualian yang tertangkap atau yang tidak tertangkap.
• Titik henti sementara XHR yang dipicu ketika URL yang diminta cocok dengan substring yang Anda berikan.

Lihat Menjeda Kode dengan Titik Henti Sementara untuk mempelajari kapan dan cara menggunakan tiap jenis titik henti sementara.

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