Apa cara terbaik untuk men-debug javascript?

Namun, sebelum kita masuk ke teknik debugging dan berbagai alat debugging, mari kita pahami apa itu bug.  

Bug

Bug adalah kesalahan dalam program komputer yang membuatnya berperilaku tidak terduga atau memberikan hasil yang tidak diharapkan. Ini sebagian besar terjadi ketika beberapa bagian dari persyaratan sistem dilanggar. Setiap program komputer tunduk pada serangkaian persyaratan, kegagalan untuk mencapai persyaratan menyebabkan hasil yang tidak diharapkan. Itu juga terjadi ketika ada pelanggaran dalam bahasa program, ini bisa berupa kesalahan sintaksis atau kesalahan logis

Misalnya, saat menulis bahasa JavaScript, kurung kurawal buka harus memiliki kurung kurawal tutup untuk menunjukkan bagian akhir kode. Kegagalan untuk melakukannya akan menyebabkan kesalahan sintaksis dan keluaran program akan terpengaruh. Berikut adalah contoh yang didemonstrasikan. Program ini mengeluarkan pesan kesalahan di konsol karena kurung kurawal penutup dihilangkan

function books() {
console.log("Here are the books");
 
books();

Melihat ini di bawah, Anda akan melihat bahwa pesan kesalahan tidak lagi ada di konsol karena sudah diperbaiki. Kode yang diperlukan telah ditempatkan pada posisi yang tepat, jadi kami memiliki keluaran yang diharapkan tercetak di konsol

function books() {
console.log("Here are the books");
}
books();

Men-debug

Ini adalah proses menemukan bug dan menyelesaikan bug yang ada di program komputer. Ini adalah tindakan mencari tahu alasan di balik kegagalan program dan memperbaiki masalah yang bertanggung jawab atas kegagalan program untuk meningkatkan efisiensi jalannya program.

Kadang-kadang, sebuah program yang ditulis dengan baik tanpa kesalahan sintaksis dan logis dapat memberikan hasil yang tidak diharapkan. Ini mungkin bukan karena baris kode yang ditulis tetapi cara dependensi, konfigurasi, atau pengaturan diatur dengan tidak benar. Keterampilan debugging diperlukan untuk mengidentifikasi dan memecahkan masalah tersebut. Masalah lain bisa berupa kesalahan sintaksis, kesalahan logis, dan kegagalan untuk mencapai persyaratan sistem

Ini adalah contoh cepat. Kode di bawah ini ditulis dengan baik dan tidak memiliki kesalahan. Sayangnya, itu tidak memberikan hasil yang dibutuhkan. Ini karena kami tidak menautkan file untuk kode JavaScript dengan benar ke file yang diperlukan untuk mendapatkan hasil di browser

function output() {
console.log("oops...there will be no output");
}
output();

Di bawah ini adalah file HTML yang belum kami tautkan ke file JavaScript

Menautkannya dengan benar akan memberi kita hasil yang diharapkan

Javascript telah ditautkan ke file html, sehingga keluaran yang diharapkan akan dicetak di konsol

function output() {
console.log("THE BUG HAS BEEN FOUND AND FIXED!");
}
output();

Sebagai pengembang, debugging tidak bisa dihindari. Ini bisa melelahkan, membuat stres dan memakan waktu, terutama ketika mencoba untuk men-debug sebagian besar kode untuk perangkat lunak atau aplikasi mungkin tanpa memiliki pengetahuan tentang teknik atau alat debugging untuk digunakan

Proses Debug

1. Jeda dan amati keluaran yang salah saat membuat kode pada interval yang berbeda untuk memeriksa kesalahan kecil. Ini membantu meminimalkan jumlah waktu yang dihabiskan untuk menelusuri sebagian besar kode
2. Saat dihadapkan dengan keluaran yang tidak terduga, cobalah untuk memahami masalahnya, penyebab kesalahan dan kode-kode di sekitarnya yang bisa menjadi penyebab kesalahan
3. Temukan masalahnya. Lebih mudah menemukan kesalahan dalam kode yang ditulis dengan baik, jadi Anda harus menerapkan praktik pengembangan yang baik. Konsol dan beberapa IDE seperti kode studio visual membantu mencari di mana letak kesalahan paling sering
4. Setelah dapat menemukan kesalahan, klasifikasikan kesalahan tersebut. Ini membantu kita memahami masalah dan hubungannya dengan kode lainnya dan juga membantu menentukan strategi perbaikan yang perlu kita gunakan
5. Sedang dikerjakan. Manfaatkan sumber daya yang tersedia saat bingung. Cobalah untuk tidak mengganggu baris kode lainnya

Tantangan Debug

1.   Laporan masalah dari konsol mungkin tidak memadai dan menyesatkan.
2.   Memperbaiki satu bug dapat menimbulkan bug baru.
3.   Proses penyelesaian satu kesalahan dapat berkembang menjadi beberapa kesalahan.

Teknik dan Alat Debugging JavaScript

1. Breakpoint. Menandai beberapa baris kode di berbagai titik program dapat membuat breakpoint. Saat program mencapai titik yang ditandai selama eksekusi, program akan berhenti. Ini membantu pengembang untuk memeriksa kesalahan yang tersedia dan menyelesaikannya. Anda dapat menandai breakpoint dalam kode JavaScript Anda dari konsol. Cukup buka alat pengembang chrome, dapatkan file sumber dan klik nomor baris tertentu yang ingin Anda tandai
2. Menggunakan Kata Kunci Debugger. Anda juga dapat menggunakan kata kunci debugger JavaScript. Ini menghentikan eksekusi di mana Anda menempatkan kata kunci debug. Ini sebuah contoh

function doSomething() {
console.log("Halt!");
debugger;
console.log('continue')
}
doSomething();

Baca lebih lanjut tentang kata kunci debugger di sini.  

1. Mundur. Backtracking menggunakan solusi yang berbeda sampai Anda menemukan solusi yang tepat untuk kesalahan tersebut. Ini efektif untuk debugging. Dalam backtracking, Anda menerapkan kemungkinan solusi untuk memecahkan masalah dalam program JavaScript. Jika tidak berhasil, Anda mundur dan memilih langkah lain. Anda harus melanjutkan ini sampai Anda berhasil menghilangkan kesalahan dan mendapatkan hasil yang diharapkan
2. Modus Ketat. Menggunakan mode ketat dalam JavaScript membuatnya lebih mudah untuk menulis program JavaScript yang dikembangkan dengan baik dan tepat. Mode ketat melarang beberapa operasi dalam JavaScript, yang membantu mengurangi bug dan menjaga kode tetap bersih. Anda dapat mengaktifkan mode ketat dengan pernyataan "gunakan ketat". Baca lebih lanjut tentang mode ketat di sini.  

   Apakah ada cara untuk men-debug JavaScript?

   Tapi untungnya, semua browser modern memiliki debugger JavaScript bawaan . Debugger bawaan dapat dihidupkan dan dimatikan, memaksa kesalahan dilaporkan ke pengguna. Dengan debugger, Anda juga dapat menyetel breakpoint (tempat eksekusi kode dapat dihentikan), dan memeriksa variabel saat kode dieksekusi.

   Mengapa JavaScript sangat sulit untuk di-debug?

   JavaScript terkenal sulit untuk di-debug, tidak hanya karena sifatnya asinkron tetapi juga karena JavaScript perlu didukung di berbagai platform dan lingkungan runtime. The inconsistencies between different hardware and runtime environments make it impossible to reproduce any issue in the same way.

   Browser mana yang terbaik untuk debugging?

   Google Chrome adalah salah satu browser web paling populer di seluruh dunia. Alat Pengembang Google Chrome, juga dikenal sebagai Chrome DevTools, adalah alat pembuatan web dan debug yang terpasang di browser.

   Bagaimana cara men-debug a. berkas JS?

   Debug skrip sisi server .

   Dengan proyek Anda terbuka di Visual Studio, buka file JavaScript sisi server (seperti server. .

   Untuk menjalankan aplikasi Anda, tekan F5 (Debug > Start Debugging). .

   Tekan F5 untuk melanjutkan aplikasi

   Jika Anda ingin menggunakan Alat Pengembang Chrome, tekan F12 di browser Chrome