Gunakan konsol.log () untuk pemeriksaan cepat, sebaik -baiknya dengan label atau konsol.table () untuk objek; 2. Menggunakan penyemak imbas untuk menetapkan titik putus, langkah melalui kod, dan periksa pembolehubah; 3. Melaksanakan cuba ... menangkap untuk menyegerakkan dan async/menunggu kesilapan, dan memantau tab konsol; 4. Memohon eslint dan lebih cantik untuk menangkap kesilapan dan mengekalkan konsistensi kod; 5. Masukkan debugger; pernyataan untuk menjeda pelaksanaan jika diperlukan; 6. Menyiasat permintaan rangkaian dan isu DOM menggunakan tab Rangkaian dan Elemen -Memperbaiki kaedah ini memastikan debugging JavaScript yang berkesan.

Debugging JavaScript Code adalah kemahiran setiap pemaju menggunakan setiap hari. Berikut adalah cara anda dapat mencari dan menyelesaikan masalah dengan berkesan dalam JavaScript anda:

1. Gunakan console.log() untuk pemeriksaan cepat

Cara yang paling mudah dan paling biasa untuk debug menggunakan console.log() . Masukkannya pada titik utama dalam kod anda untuk memeriksa nilai berubah, aliran pelaksanaan, atau sama ada fungsi dipanggil.

 Console.log ("Data Pengguna:", UserData);
console.log ("aktif?", isactive);

Ia pantas dan berfungsi hampir di mana -mana -Browser, Node.js, dan lain -lain tetapi jangan tinggalkan console.log() pernyataan dalam kod pengeluaran.

Petua Pro : Gunakan log berlabel untuk mengelakkan kekeliruan:

 Console.log ("Pada Langkah 3:", Step3Value);

Dan gunakan console.table() untuk tatasusunan atau objek -ia format data dengan baik dalam jadual.

2. Gunakan alat pemaju penyemak imbas

Pelayar moden (Chrome, Firefox, Edge) mempunyai devtools terbina dalam yang kuat. Inilah cara menggunakannya dengan berkesan:

• Buka DevTools dengan F12 atau Ctrl Shift I ( Cmd Option I pada Mac).
• Pergi ke tab Sumber (atau Debugger ).
• Cari fail JavaScript anda dan tetapkan titik putus dengan mengklik nombor baris.
• Apabila kod berjalan, ia berhenti di titik putus.
• Gunakan kawalan untuk melangkah melalui kod:
  • Melangkah ke atas
  • Melangkah ke
  • Teruskan pelaksanaan
• Periksa pembolehubah dan timbunan panggilan dalam masa nyata.

Anda juga boleh:

• Tambah titik putus bersyarat (hanya mencetuskan apabila keadaan dipenuhi).
• Gunakan debugger; Dalam kod anda untuk memaksa jeda:

   jika (ralat) {
    debugger; // Pelaksanaan berhenti di sini jika devtools dibuka
  }

3. Mengendalikan kesilapan dengan anggun

Gunakan try...catch blok untuk kod segerak untuk menangkap ralat runtime:

 Cuba {
  Riskyoperation ();
} menangkap (ralat) {
  Console.error ("Sesuatu yang salah:", error.message);
}

Untuk kod asynchronous (janji), gunakan .catch() atau try...catch dengan async/await :

 fungsi async fetchData () {
  Cuba {
    const res = menunggu pengambilan ('/api/data');
    const data = menunggu res.json ();
  } menangkap (ralat) {
    Console.error ("Fetch gagal:", ralat);
  }
}

Juga periksa tab Konsol dalam kesilapan dan peringatan Devtools -JavaScript muncul di sana dalam masa nyata.

4. Lint dan format kod anda

Gunakan alat seperti eslint untuk menangkap kesilapan biasa awal (misalnya, pembolehubah yang tidak ditentukan, isu sintaks):

 npx eslint your-file.js

Dan gunakan Prettier untuk memastikan pemformatan kod konsisten -kadang -kadang bug bersembunyi dalam kod yang tidak berstruktur.

5. Gunakan debugger; Secara strategik

Masukkan debugger; di mana anda mahu pelaksanaan berhenti sejenak (jika devtools dibuka):

 fungsi ProcessUser (pengguna) {
  debugger;
  kembali user.name.touppercase ();
}

Ia seperti titik putus yang boleh anda bertukar dengan cepat.

6. Periksa isu rangkaian dan DOM

Kadang -kadang pepijat tidak dalam logik JavaScript tetapi dalam:

• Panggilan API yang gagal (semak tab Rangkaian ).
• Unsur -unsur tidak dijumpai ( document.getElementById pulangan null ).
• Pendengar acara tidak dilampirkan dengan betul.

Gunakan tab Elements untuk memeriksa jika DOM sepadan dengan jangkaan.

Pada asasnya, debugging adalah tentang memerhatikan apa yang sebenarnya kod anda berbanding apa yang anda harapkan untuk dilakukan. Campurkan console.log , devtools, dan pengendalian ralat berstruktur -dan anda akan menangkap kebanyakan pepijat dengan cepat.

Atas ialah kandungan terperinci Bagaimana anda debug kod JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!