Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Mulailah dengan Men-debug JavaScript di Chrome DevTools

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

Langkah 1: Ulangi kemunculan bug

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

  1. Klik Open Demo. Demo akan dibuka di tab baru.

  2. Masukkan 5 di kotak teks Nomor 1.

  3. Masukkan 1 di kotak teks Nomor 2.

  4. Klik Add Number 1 and Number 2. Label di bawah tombol bertuliskan 5 + 1 = 51. Hasil seharusnya 6. Inilah bug yang akan Anda perbaiki.

    Hasil 5 + 1 adalah 51. Seharusnya 6.
    Gambar 1. Hasil 5 + 1 adalah 51. Seharusnya 6.

Langkah 2: Pahami UI panel Sumber

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

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

    Panel Konsol.
    Gambar 2. Panel Konsol

  2. Klik tab Sources.

    Panel Sumber.
    Gambar 3. Panel Sumber

UI panel Sources memiliki 3 bagian:

Tiga bagian UI panel Sumber.
Gambar 4. Tiga bagian UI panel Sumber
  1. Panel File Navigator. Setiap file yang diminta oleh halaman tercantum di sini.
  2. Panel Code Editor. Setelah memilih file di panel File Navigator, konten file tersebut ditampilkan di sini.
  3. Panel JavaScript Debugging. Beragam fitur untuk memeriksa JavaScript halaman. Jika jendela DevTools lebar, panel ini ditampilkan di sebelah kanan panel Code Editor.

Langkah 3: Jeda kode dengan breakpoint

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

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, namun breakpoint dapat menyelesaikannya lebih cepat. Breakpoint memungkinkan Anda menjeda kode di tengah eksekusi, dan memeriksa nilai pada saat itu. Breakpoint memiliki beberapa keunggulan dibanding 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 breakpoint, Anda dapat menjeda kode yang relevan tanpa perlu mengetahui cara kode terstruktur.
  • Pada pernyataan console.log() Anda perlu secara eksplisit menentukan tiap nilai yang ingin Anda periksa. Dengan breakpoint, DevTools menunjukkan nilai semua variable pada saat itu. Kadang ada variabel yang memengaruhi kode bahkan tanpa Anda sadari.

Singkatnya, breakpoint 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 event listener click yang terkait dengan tombol Tambahkan Nomor 1 dan Nomor 2. Oleh karena itu, Anda dapat menjeda kode di sekitar waktu listener click dieksekusi. Breakpoint Event Listener memungkinkan Anda melakukan secara persis tindakan tersebut:

  1. Di panel JavaScript Debugging, klik Event Listener Breakpoints untuk meluaskan bagian . DevTools menampilkan daftar kategori peristiwa yang dapat diluaskan, misalnya Animasi dan Papan Klip.
  2. Di samping kategori peristiwa Mouse, klik Expand ikon Luaskan
. DevTools menampilkan daftar peristiwa mouse, seperti click dan mousedown. Tiap peristiwa memiliki kotak centang di sampingnya.
  3. Centang kotak click. DevTools sekarang disiapkan untuk dijeda otomatis jika salah satu event listener click dieksekusi.

    Kotak centang klik diaktifkan.
    Gambar 5. Kotak centang klik diaktifkan

  4. Kembali pada demo, klik Add Number 1 and Number 2 lagi. DevTools menjeda demo dan menandai baris kode di panel Sources. DevTools harus dijeda pada baris kode ini:

    function onClick() {

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

Breakpoint Event Listener hanyalah salah satu dari banyak jenis breakpoint yang tersedia di DevTools. Semua jenis yang berbeda tersebut layak untuk diingat, karena tiap jenis pada akhirnya membantu Anda melakukan debug pada skenario yang berbeda secepatnya. Lihat Menjeda Kode Dengan Breakpoint untuk mempelajari kapan dan cara menggunakan tiap jenis.

Langkah 4: Menyusuri kode

Satu penyebab umum bug adalah jika skrip dieksekusi dalam urutan yang salah. Penyusuran kode memungkinkan Anda mengikuti proses eksekusi kode, baris demi baris, dan mengetahui secara persis jika baris dieksekusi dalam urutan yang berbeda dengan yang Anda harapkan. Coba sekarang:

  1. Di panel Sources pada DevTools, klik pengaktifan Step into next function call Pengaktifan Melangkah ke fungsi berikutnya untuk menyusuri eksekusi fungsi onClick(), baris demi baris. DevTools menandai baris kode berikut:

    if (inputsAreEmpty()) {

  2. Klik Step over next function call Pengaktifkan Melangkah ke fungsi berikutnya
. DevTools mengeksekusi inputsAreEmpty() tanpa melangkah ke dalamnya. Perhatikan cara DevTools melewati beberapa baris kode. Karena inputsAreEmpty() dievaluasi sebagai false, maka blok kode pernyataan if tidak dieksekusi.

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

Langkah 5: Setel breakpoint baris kode

Breakpoint baris kode adalah tipe breakpoint yang paling umum. Jika Anda ingin menjeda di baris kode tertentu, gunakan breakpoint 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 dieksekusi.

  3. Klik Resume script execution Lanjutkan eksekusi
skrip. Skrip terus dieksekusi hingga mencapai baris 32. Pada baris 29, 30, dan 31, DevTools mencetak nilai addend1, addend2, dan sum ke sebelah kanan titik koma tiap baris.

    DevTools dijeda pada breakpoint baris kode pada baris 32.
    Gambar 6. DevTools dijeda pada breakpoint baris kode pada baris 32

Langkah 6: Periksa 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 fitur untuk memeriksa nilai variabel.

Metode 1: Panel Cakupan

Jika Anda dijeda pada baris kode, panel Cakupan menampilkan variabel lokal dan global yang saat ini ditentukan, beserta nilai tiap variabel. Panel ini juga menampilkan variabel penutupan, jika berlaku. Klik dua kali nilai variabel untuk mengeditnya. Jika Anda tidak dijeda pada baris kode, panel Cakupan kosong.

Panel Cakupan.
Gambar 7. Panel Cakupan

Metode 2: Watch Expressions

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

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

    Panel Pantau Ekspresi.
    Gambar 8. Panel Pantau Ekspresi (kanan bawah), setelah membuat typeof sum Pantau Ekspresi. Jika jendela DevTools besar, panel Pantau Ekspresi berada di kanan, di atas panel Breakpoint Event Listener.

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 . 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.

    Panel samping Konsol, setelah mengevaluasi parseInt(addend1) + parseInt(addend2).
    Gambar 9. Panel samping Konsol, setelah mengevaluasi parseInt(addend1) + parseInt(addend2).

Langkah 7: Terapkan perbaikan

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

  1. Klik Resume script execution Lanjutkan eksekusi
skrip.
  2. Pada 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 Deactivate breakpoints Nonaktifkan
breakpoint. Akan berubah menjadi warna biru untuk menandakan sudah aktif. Meski ini disetel, DevTools mengabaikan breakpoint yang telah Anda setel.
  5. Coba demo dengan nilai yang berbeda. Demo sekarang menghitung dengan benar.

Perhatian: Alur kerja ini hanya berlaku untuk perbaikan kode yang sedang berjalan di browser. Alur kerja ini tidak akan memperbaiki kode untuk semua pengguna yang membuka halaman. Untuk melakukannya, Anda perlu memperbaiki kode yang ada di server.

Langkah berikutnya

Selamat! Anda sekarang tahu cara mengoptimalkan Chrome DevTools saat melakukan debug JavaScript. Fitur dan metode yang Anda pelajari di tutorial ini dapat menghemat banyak waktu.

Tutorial ini hanya menunjukkan dua cara untuk menyetel breakpoint. DevTools menawarkan banyak cara lainnya, antara lain:

  • Breakpoint kondisional yang hanya dipicu jika kondisi yang Anda sediakan adalah true.
  • Breakpoint pada pengecualian yang terekam atau tidak terekam.
  • Breakpoint XHR yang dipicu jika URL yang diminta cocok dengan substring yang Anda sediakan.

Lihat Menjeda Kode Dengan Breakpoint untuk mempelajari kapan dan cara menggunakan tiap jenis.

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

Masukan

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.