Menguasai Penyahpepijatan JavaScript: Teknik ini untuk Newbie

Penyahpepijatan dalam JavaScript melibatkan mengenal pasti dan membetulkan ralat dengan menganalisis gelagat masa jalan, menjejak aliran program dan menggunakan alatan seperti konsol penyemak imbas, penyahpepijat dan teknik pengelogan. Di bawah ialah pelbagai kaedah untuk nyahpepijat dalam JavaScript.
1. Menggunakan Kata Kunci penyahpepijat
Kata kunci penyahpepijat memaksa enjin JavaScript untuk menghentikan pelaksanaan pada titik tertentu. Apabila ditemui, ia menjeda pelaksanaan kod dan membuka alat nyahpepijat penyemak imbas.
Sintaks:
penyahpepijat;
Contoh:

function sum(a, b) { 
   debugger; // Execution stops here 
   return a + b; 
} 

let result = sum(5, 10); 
// When run, code will pause at the debugger line

Ini membolehkan anda memeriksa pembolehubah dan keadaan program pada titik yang tepat menggunakan Alat Pembangun penyemak imbas.
2. Menggunakan console.log()
console.log() mengeluarkan data ke konsol penyemak imbas, membantu anda mengesan nilai dan aliran program semasa masa jalan.
Sintaks:

console.log(value)
Example:
let name = "John"; 
let age = 30; 

console.log("Name: " + name); 
// Output: Name: John 
console.log("Age: ", age); 
// Output: Age: 30

Dengan meletakkan pernyataan console.log() di seluruh kod anda, anda boleh mengesahkan sama ada pembolehubah memegang nilai yang dijangkakan.
3. Menggunakan Titik Putus
Titik putus boleh ditetapkan terus dalam Alat Pembangun penyemak imbas. Mereka menghentikan pelaksanaan kod pada baris tertentu, membolehkan anda memeriksa keadaan program pada masa itu.
Langkah-langkah untuk Tetapkan Titik Putus:

1. Buka Alat Pembangun (tekan F12 atau klik kanan dan pilih Inspect).
2. Pergi ke tab Sumber.
3. Pilih fail JavaScript, kemudian klik nombor baris untuk menetapkan titik putus.
4. Pelaksanaan kod akan dijeda pada baris itu dan semua pembolehubah serta keadaan boleh diperiksa. Contoh:

function multiply(a, b) { 
   return a * b; 
} 

biar hasil = darab(2, 5);
// Tetapkan titik putus di sini dan periksa nilai
Dalam contoh ini, selepas menetapkan titik putus pada fungsi multiply(), anda boleh memeriksa nilai a dan b dalam Alat Pembangun.
4. Menggunakan console.warn() dan console.error()
Kaedah ini berfungsi seperti console.log(), tetapi outputnya berbeza secara visual dalam konsol, membantu membezakan amaran atau ralat.
Sintaks:

console.warn(message); 
console.error(message);

Contoh:

let age = 17; 

if (age < 18) { 
   console.warn("Warning: User is underage."); 
} else { 
   console.log("User is an adult."); 
} 

if (age < 0) { 
   console.error("Error: Age cannot be negative."); 
}

Dalam kes ini, console.warn() akan menunjukkan mesej amaran kuning, manakala console.error() akan memaparkan ralat dalam warna merah.
5. Menggunakan cuba…tangkap Penyata
cuba…catch digunakan untuk mengendalikan ralat masa jalan dengan anggun, membolehkan anda mencatat ralat dan menghalang aplikasi daripada ranap.
Sintaks:

try { 
   // Code that may throw an error 
} catch (error) { 
   console.error(error.message); 
} 

Contoh:

function sum(a, b) { 
   debugger; // Execution stops here 
   return a + b; 
} 

let result = sum(5, 10); 
// When run, code will pause at the debugger line

Blok cuba…catch akan menangkap ralat penghuraian JSON dan logkannya ke konsol tanpa merosakkan aplikasi.
6. Menggunakan Alat Pemantauan Prestasi
Untuk penyahpepijatan prestasi, tab Prestasi dalam Alat Pembangun membantu memantau masa pelaksanaan fungsi, penggunaan memori dan kesesakan prestasi.
Langkah:

1. Buka Alat Pembangun (tekan F12).
2. Pergi ke tab Prestasi.
3. Klik Rekod untuk mula memantau pelaksanaan kod.
4. Lakukan tindakan dalam aplikasi anda untuk mengumpul data.
5. Hentikan rakaman untuk menganalisis garis masa prestasi. Contoh:

console.log(value)
Example:
let name = "John"; 
let age = 30; 

console.log("Name: " + name); 
// Output: Name: John 
console.log("Age: ", age); 
// Output: Age: 30

Contoh ini menggunakan console.time() dan console.timeEnd() untuk mengukur berapa lama blok kod diambil untuk dilaksanakan.
Dengan menggunakan kaedah ini dan teknik yang lebih maju seperti pemantauan prestasi, anda boleh nyahpepijat dan menyelesaikan isu dalam kod JavaScript anda dengan berkesan.

Jika anda belajar JavaScript, pastikan anda mengikuti tutorial langkah demi langkah saya di Medium: https://medium.com/@CodingAdventure

Atas ialah kandungan terperinci Menguasai Penyahpepijatan JavaScript: Teknik ini untuk Newbie. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!