Tutorial Debugging di Browser Pelengkap console.log()

Tutorial Debugging di Browser Pelengkap console.log()

WarungKomputer.com-Untuk melakukan debugging kode-kode JavaScript, sudah sering kita menggunakan console.log(). Tapi, pernahkah pembaca benar-benar memanfaatkan fitur console lain untuk membantu melakukan debugging kode JavaScript? Artikel kali ini akan membahas Tutorial Debugging di Browser Pelengkap console.log()

Tutorial Debugging di Browser Pelengkap console.log()

Langkah 1: Ulangi kemunculan bug

Mengulangi kemunculan bug selalu menjadi langkah pertama untuk men-debug. Untuk “mengulangi kemunculan bug” berarti menemukan serangkaian tindakan yang secara konsisten menyebabkan munculnya bug. Anda mungkin perlu mengulangi kemunculan bug beberapa kali, jadi cobalah menghilangkan langkah-langkah yang tidak penting.

Ikuti petunjuk di bawah ini untuk mengulangi kemunculan bug yang akan Anda perbaiki dalam tutorial ini.

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

2. Pada demo, masukkan 5 untuk Number 1.
3. Masukkan 1 untuk Number 2.
4. Klik Add Number 1 and Number 2.
5. Lihat label di bawah masukan dan tombol. Tertulis 5 + 1 = 51.

Ups. Hasilnya salah. Hasil seharusnya 6. Inilah bug yang akan Anda perbaiki.

Langkah 2: Hentikan kode sementara dengan breakpoint

DevTools memungkinkan Anda menghentikan kode sementara di tengah eksekusi, dan periksa nilai-nilai semua variabel pada saat itu. Alat (bantu) untuk menghentikan sementara kode Anda disebut breakpoint. Cobalah sekarang:

1. Buka DevTools di demo dengan menekan Command+Option+I (Mac) atau Control+Shift+I (Windows, Linux).
2. Klik tab Sources.

1. Klik Event Listener Breakpoints untuk meluaskan bagian. DevTools akan menampilkan daftar kategori kejadian yang bisa diluaskan, misalnya Animation dan Clipboard.

1. Di sebelah kategori kejadian Mouse, klik Expand . DevTools menampilkan daftar kejadian mouse, misalnya click, bersama kotak centang di sebelahnya.
2. Pilih kotak centang click.
   

   Gambar 1: DevTools dibuka pada demo, dengan panel Sources difokus dan event listener breakpoint untuk klik diaktifkan. Jika jendela DevTools Anda besar, lokasi panel Event Listener Breakpoints berada di sebelah kanan, bukan di bagian kiri bawah, seperti dalam tangkapan layar.

3. Kembali ke demo, klik lagi Add Number 1 and Number 2. DevTools menghentikan demo sementara dan menyorot baris kode di panel Sources. DevTools menyorot baris kode ini:

   function onClick() {

Bila memilih kotak centang click, siapkan breakpoint berbasis kejadian pada semua kejadian click. Bila ada simpul yang diklik, dan simpul itu memiliki penangan click, DevTools secara otomatis akan berhenti sementara pada baris pertama penangan click simpul itu.

Langkah 3: Penyusuran kode

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

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

   if (inputsAreEmpty()) {

2. Klik Step over next function call . DevTools akan mengeksekusi inputsAreEmpty() tanpa memasukinya. Perhatikan cara DevTools melangkahi 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 bisa melihat bahwa bug tersebut mungkin ada di suatu tempat di fungsi updateLabel(). Daripada menyusuri setiap baris kode, Anda bisa menggunakan tipe breakpoint lain untuk menghentikan sementara kode tersebut lebih dekat dengan lokasi bug.

Langkah 4: Setel breakpoint lain

Breakpoint baris kode adalah tipe breakpoint yang paling umum. Bila Anda ingin berhenti sementara di baris kode tertentu, gunakan breakpoint baris kode. Cobalah sekarang:

1. Perhatikan baris kode terakhir di updateLabel(), yang terlihat seperti ini:

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

2. Di sebelah kiri kode ini, Anda bisa melihat nomor baris kode ini: 32. Klik di 32. DevTools akan menempatkan ikon biru di atas 32. Ini berarti ada breakpoint pada baris ini. DevTools sekarang selalu berhenti sementara sebelum baris kode ini dieksekusi.
3. Klik Resume script execution . Skrip melanjutkan eksekusi hingga mencapai baris kode yang Anda pasangi breakpoint.
4. Perhatikan baris kode di updateLabel() yang sudah dieksekusi. DevTools akan menampilkan nilai-nilai addend1, addend2, dan sum.

Nilai sum terlihat mencurigakan. Sepertinya nilai ini dievaluasi sebagai string, padahal seharusnya sebagai angka. Inilah yang mungkin menyebabkan bug.

Langkah 5: Periksa nilai-nilai variabel

Penyebab bug yang umum lainnya adalah bila variabel atau fungsi menghasilkan nilai yang berbeda dari yang diharapkan. Banyak developer menggunakan console.log() untuk melihat bagaimana nilai-nilai berubah dari waktu ke waktu, namun console.log() bisa membosankan dan tidak efektif karena dua alasan. Pertama, Anda mungkin perlu mengedit kode yang memiliki banyak panggilan ke console.log() secara manual. Kedua, Anda mungkin tidak tahu secara persis variabel mana yang berkaitan dengan bug tersebut, jadi Anda mungkin perlu mengeluarkan banyak variabel.

Satu alternatif DevTools untuk console.log() adalah Watch Expressions. Gunakan Watch Expressions untuk memantau nilai variabel dari waktu ke waktu. Sebagaimana namanya, Watch Expressions tidak cuma dibatasi pada variabel. Anda bisa menyimpan ekspresi JavaScript yang valid di Watch Expression. Cobalah sekarang:

1. Di panel Sources di DevTools, klik Watch. Bagian ini akan diluaskan.
2. Klik Add Expression .
3. Ketikkan typeof sum.
4. Tekan Enter. DevTools menampilkan typeof sum: "string". Nilai di sebelah kanan tanda titik dua adalah hasil Watch Expression.
   

   Gambar 1: Panel Watch Expression (kanan bawah), setelah membuat typeof sum Watch Expression. Jika jendela DevTools Anda besar, panel Watch Expression berada di kanan, di atas panel Event Listener Breakpoints.

Seperti diduga, sum dievaluasi sebagai string, padahal seharusnya sebagai angka. Inilah penyebab bug di demo tersebut.

Alternatif DevTools kedua untuk console.log() adalah Console. Gunakan Console untuk mengevaluasi pernyataan JavaScript arbitrer. Developer umumnya menggunakan Console untuk menimpa nilai-nilai variabel saat melakukan debug. Jika begitu halnya, Console bisa membantu Anda menguji perbaikan yang memungkinkan untuk bug yang baru saja ditemukan. Cobalah sekarang:

1. Jika Anda tidak ada panel samping Console yang terbuka, tekan Escape untuk membukanya. Panel samping akan terbuka di bagian bawah jendela DevTools.
2. Di Console, ketikkan parseInt(addend1) + parseInt(addend2).
3. Tekan Enter. DevTools akan mengevaluasi pernyataan dan menampilkan 6, yang merupakan hasil yang diharapkan dari demo tersebut.
   

   Gambar 1: Panel samping Console, setelah mengevaluasi parseInt(addend1) + parseInt(addend2).

Langkah 6: Terapkan perbaikan

Anda telah mengidentifikasi perbaikan yang memungkinkan untuk bug tersebut. Sekarang tinggal mencoba perbaikan dengan mengedit kode dan menjalankan kembali demo tersebut. Anda tidak perlu membiarkan DevTools menerapkan perbaikan. Anda bisa mengedit kode JavaScript secara langsung dalam UI DevTools. Cobalah sekarang:

1. Di editor kode pada panel Sources di DevTools, ganti var sum = addend1 + addend2 dengan var sum = parseInt(addend1) + parseInt(addend2);. Lokasinya satu baris di atas tempat Anda saat ini berhenti.
2. Tekan Command+S (Mac) atau Control+S (Windows, Linux) untuk menyimpan perubahan. Latar belakang kode berubah menjadi merah untuk menunjukkan bahwa skrip telah berubah dalam DevTools.
3. Klik Deactivate breakpoints . Warnanya berubah jadi biru untuk menunjukkan bahwa ia aktif. Walaupun telah disetel, DevTools akan mengabaikan breakpoint yang telah Anda setel.
4. Klik Resume script execution .
5. Cobalah demo dengan nilai-nilai yang berbeda. Kini demo seharusnya akan menghitung jumlahnya dengan benar.

Ingatlah bahwa alur kerja ini hanya menerapkan perbaikan ke kode yang sedang dijalankan di browser Anda. Ini tidak akan memperbaiki kode untuk semua pengguna yang menjalankan laman Anda. Untuk melakukan hal itu, Anda perlu memperbaiki kode yang dijalankan di server yang menyediakan laman Anda.

Langkah berikutnya

Selamat! Sekarang Anda mengetahui dasar-dasar men-debug JavaScript di DevTools.

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

• Breakpoint bersyarat yang hanya dipicu bila ketentuan yang Anda sediakan adalah true.
• Breakpoint pada pengecualian yang tertangkap atau yang tidak tertangkap.
• XHR breakpoints yang dipicu bila URL yang diminta cocok dengan substring yang Anda sediakan.

Sumber :

www.developers.goggle.com