JavaScript Debug

Kayce Basques

Sofia Emelianova

Tutorial ini mengajarkan alur kerja dasar untuk men-debug masalah JavaScript di DevTools. {i>Read<i} aktif, atau menonton versi video dari tutorial ini.

Reproduksi 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. Hasil harus 6. Inilah {i>bug<i} yang akan Anda perbaiki.

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

Memahami UI panel Sumber

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

1. Buka DevTools dan buka panel Sources.

   

Panel Sumber memiliki tiga bagian:

1. Tab Page dengan hierarki file. Setiap file yang diminta oleh halaman akan tercantum di sini.
2. Bagian Editor Kode. Setelah memilih file di tab Page, konten 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 menggabungkan Titik henti sementara, Tumpukan 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() dapat menyelesaikan tugas, tetapi titik henti sementara dapat menyelesaikannya lebih cepat. J memungkinkan Anda menjeda kode di tengah eksekusi, dan memeriksa semua nilai pada suatu saat. Titik henti sementara memiliki beberapa keunggulan dibandingkan metode console.log():

• Dengan console.log(), Anda perlu membuka kode sumber secara manual, menemukan kode yang relevan, pernyataan console.log(), lalu muat ulang halaman untuk melihat pesan di Konsol Play. Dengan titik henti sementara, Anda dapat berhenti sejenak pada kode yang relevan tanpa mengetahui bagaimana kodenya data itu tersusun teratur.
• Dalam pernyataan console.log(), Anda harus secara eksplisit menentukan setiap nilai yang ingin memeriksa. Dengan titik henti sementara, DevTools menampilkan nilai semua variabel pada saat itu. Terkadang ada variabel yang memengaruhi kode Anda 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 itu, Anda bisa membuat perkiraan yang matang bahwa jumlah salah (5 + 1 = 51) dihitung dalam pemroses peristiwa click yang terkait dengan Tombol Tambahkan Nomor 1 dan Nomor 2. Oleh karena itu, Anda mungkin ingin menjeda kode sepanjang waktu yang dijalankan oleh pemroses click. Titik henti sementara Pemroses Peristiwa memungkinkan Anda melakukan hal tersebut:

1. Di bagian Debugger, klik Titik henti sementara Pemroses Peristiwa untuk meluaskan bagian. DevTools menampilkan daftar kategori peristiwa yang dapat diperluas, seperti Animasi dan Papan klip.
2. Di samping kategori peristiwa Mouse, klik arrow_right Luaskan. DevTools menampilkan daftar peristiwa mouse, seperti klik dan mousedown. Setiap peristiwa memiliki kotak centang di sampingnya.

3. Centang kotak klik. DevTools kini disiapkan agar otomatis dijeda jika apa pun click pemroses peristiwa akan dieksekusi.

   

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

   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. Penting mempelajari semua tipe yang berbeda, karena setiap tipe pada akhirnya membantu Anda men-debug skenario secepat mungkin. Lihat Menjeda Kode Dengan Titik henti sementara untuk mempelajari waktu dan cara menggunakan setiap jenis.

Menyusuri kode

Salah satu penyebab umum bug adalah jika skrip dieksekusi dalam urutan yang salah. Melewati kode Anda memungkinkan Anda menelusuri eksekusi kode, baris demi baris, dan mencari tahu di mana perintah itu berjalan dengan urutan yang berbeda dari yang Anda harapkan. Coba sekarang:

1. Di panel Sources di DevTools, klik step_into Step into next function call untuk melanjutkan 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 bagaimana DevTools melewati beberapa baris pada kode sumber. Ini karena inputsAreEmpty() dievaluasi sebagai salah, sehingga blok pernyataan if dari kode tidak dapat dijalankan.

Itulah ide dasar ketika menelusuri kode. Jika melihat kode di get-started.js, Anda dapat melihat bahwa bug mungkin ada di suatu tempat dalam fungsi updateLabel(). Daripada melangkah maju setiap baris kode, Anda dapat menggunakan jenis titik henti sementara lain untuk menjeda kode lebih dekat dengan lokasi bug.

Menetapkan titik henti sementara baris kode

Titik henti sementara baris kode adalah jenis titik henti sementara yang paling umum. Ketika Anda mendapatkan garis spesifik tentang kode yang ingin Anda jeda, gunakan titik henti sementara baris kode:

1. Lihat baris terakhir kode di updateLabel():

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

2. Di sebelah kiri kode Anda bisa melihat nomor baris dari baris kode ini, yang 32. Klik 32. DevTools akan menempatkan ikon biru di atas 32. Ini berarti bahwa terdapat titik henti sementara baris kode. DevTools sekarang selalu berhenti sejenak sebelum baris kode ini telah dijalankan.

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

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

Periksa nilai variabel

Nilai addend1, addend2, dan sum terlihat mencurigakan. Mereka diletakkan dalam tanda kutip, berarti itu adalah {i>string<i}. Ini adalah hipotesis yang baik untuk menjelaskan penyebab bug. Baru saja saatnya untuk mengumpulkan lebih banyak informasi. DevTools menyediakan banyak alat untuk memeriksa variabel masing-masing.

Metode 1: Memeriksa Cakupan

Saat Anda dijeda pada baris kode, tab Cakupan akan menampilkan variabel lokal dan global ditentukan pada tahap ini dengan nilai dari setiap variabel. Ini juga menunjukkan variabel {i>closure<i}, ketika berlaku. Saat Anda tidak dijeda pada baris kode, tab Cakupan akan kosong.

Klik dua kali nilai variabel untuk mengeditnya.

Metode 2: Memantau ekspresi

Tab Tonton memungkinkan Anda memantau nilai variabel dari waktu ke waktu. Tonton tidak hanya terbatas pada variabel. Anda dapat menyimpan 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 tanda titik dua adalah hasil ekspresi Anda.

Screenshot ini menunjukkan tab Tonton (kanan bawah) setelah membuat smartwatch typeof sum ekspresi.

Seperti yang diduga, sum sedang dievaluasi sebagai string, padahal seharusnya berupa angka. Anda telah mengonfirmasi bahwa ini adalah penyebab {i>bug<i}.

Metode 3: Konsol

Selain melihat pesan console.log(), Anda juga dapat menggunakan Konsol untuk mengevaluasi pesan arbitrer Pernyataan JavaScript. Dalam hal proses debug, Anda dapat menggunakan Konsol untuk menguji kemungkinan perbaikan bagi serangga. Coba sekarang:

1. Jika Anda tidak membuka panel samping Konsol, tekan Escape untuk membukanya. Ini akan terbuka di bagian bawah jendela DevTools.
2. Di Konsol, ketik parseInt(addend1) + parseInt(addend2). Pernyataan ini efektif karena Anda dijeda di baris kode tempat addend1 dan addend2 berada dalam cakupan.
3. Tekan Enter. DevTools mengevaluasi pernyataan dan mencetak 6, yang merupakan hasil yang Anda harapkan hasil demo.

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

Terapkan perbaikan

Anda telah menemukan perbaikan untuk bug. Terakhir, Anda hanya perlu mencoba perbaikan dengan mengedit kode dan menjalankan demo lagi. 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 ia aktif. Meskipun ini disetel, DevTools akan mengabaikan setiap titik henti sementara yang telah ditentukan.
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 lain, 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.
• 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 waktu dan cara menggunakan setiap jenis.

Ada beberapa kontrol tahapan kode yang belum dijelaskan dalam tutorial ini. Lihat Step over baris kode untuk mempelajari lebih lanjut.