Debugging JavaScript Projects dengan VS Code & Chrome Debugger

Debugging Master JavaScript dengan Vs Code dan Chrome Debugger: Panduan Komprehensif

Bosan bergantung pada console.log() untuk debugging JavaScript? Artikel ini memperkenalkan teknik debugging yang kuat menggunakan Visual Studio Code (VS Code) dan Extension Debugger Chrome, mengubah aliran kerja debugging anda.

Bayangkan dunia tanpa

. Debugging akan menjadi mimpi ngeri! Walaupun console.log() menawarkan pembetulan cepat, ia menjadi rumit untuk isu -isu yang kompleks. Alat debugging menyediakan alternatif yang unggul. Panduan ini menggunakan debugger bersepadu vs kod dan debugger untuk sambungan Chrome untuk integrasi lancar dengan devtools Chrome. console.log()

Kelebihan utama:

debugging yang diperkemas, menghapuskan
• Reliance. console.log()
titik putus yang tepat untuk berhenti pelaksanaan pada titik tertentu.
Pemeriksaan terperinci mengenai keadaan berubah-ubah dan pelaksanaan kod langkah demi langkah.
Konfigurasi disesuaikan untuk debugging yang disasarkan.
• launch.json Pengurusan Breakpoint yang Berkesan dan Menonton Ekspresi dalam Panel Debugging Vs Kod.
• debugging ujian mocha lancar untuk mengasingkan dan menyelesaikan kegagalan ujian.
• debugging JavaScript sisi pelanggan dengan debugger Chrome.

Prasyarat:

pemahaman JavaScript moden.

• node.js
• Visual Studio Code
• Penyemak imbas Chrome
Projek (klon projek ini untuk amalan tangan).
• debug-example

Menyediakan projek

: debug-example

klon repositori

.
1. debug-example Buka projek dalam kod vs.
2. Pasang kebergantungan:

npm install
npm install -g mocha

Debugging dalam kod vs: Panduan langkah demi langkah

mari debug

:

src/places.js

const places = [];

module.exports = {
  places,

  addPlace: (city, country) => {
    const id = ++places.length; // Bug: Modifies places.length prematurely
    let numType = 'odd';
    if (id % 2) { // Bug: Incorrect modulus condition
      numType = 'even';
    }
    places.push({ id, city, country, numType });
  },
};

module.exports.addPlace('Mombasa', 'Kenya');
module.exports.addPlace('Kingston', 'Jamaica');
module.exports.addPlace('Cape Town', 'South Africa');

Tetapkan titik putus:
1. klik di longkang di sebelah nombor baris untuk menetapkan titik putus (titik merah).

pelancaran debugger:

Klik ikon debug (ikon bug) dalam bar aktiviti kod VS.
3. Konfigurasi launch.json: Klik ikon gear untuk membuat launch.json. Konfigurasikannya ke debug places.js:

npm install
npm install -g mocha

4. Mula Debugging: Pilih "Pelancaran Tempat" dan tekan F5 (atau klik butang Play).



5. Kawalan Debug: Gunakan kawalan bar alat debug: Teruskan, langkah ke atas, melangkah masuk, melangkah keluar, mulakan, berhenti.

6. Memeriksa pembolehubah: Bergegas ke atas pembolehubah untuk melihat nilai mereka, atau gunakan bahagian "pembolehubah" dan "menonton" panel debug.

7. Mengenal pasti dan memperbaiki pepijat: melalui langkah dan pemeriksaan, mengenal pasti pepijat dalam (kenaikan panjang pramatang dan keadaan modulus yang salah). Betulkan kod dengan sewajarnya. places.js

Debugging Mocha Tests:

1. Tambah konfigurasi mocha: Dalam panel debug, klik dropdown dan pilih "Tambah Konfigurasi". Pilih "Mocha Tests".



2. Tetapkan titik putus dalam

   : Tambahkan titik putus dalam fail ujian anda. placesTest.js

3. Mula Debugging:

   pilih "Mocha Tests" dan mula debugging. Melangkah melalui ujian, memeriksa pembolehubah untuk mengenal pasti dan membetulkan sebarang isu yang tinggal. Ingatlah untuk menambah cangkuk untuk menetapkan semula array antara ujian. beforeEach places

debugging kod sisi klien dengan debugger krom:
Pasang pelanjutan:
1. Pasang pelanjutan "Debugger for Chrome" dari pasaran VS Code.



Konfigurasi
:
2. Tambahkan konfigurasi krom: launch.json

const places = [];

module.exports = {
  places,

  addPlace: (city, country) => {
    const id = ++places.length; // Bug: Modifies places.length prematurely
    let numType = 'odd';
    if (id % 2) { // Bug: Incorrect modulus condition
      numType = 'even';
    }
    places.push({ id, city, country, numType });
  },
};

module.exports.addPlace('Mombasa', 'Kenya');
module.exports.addPlace('Kingston', 'Jamaica');
module.exports.addPlace('Cape Town', 'South Africa');

Mulakan pelayan:
3. Jalankan pelayan ekspres anda ().

   npm start

   Mula Debugging:
Pilih "Pelancaran Chrome" dan mula debugging. Debugger akan melekat pada contoh Chrome anda.

4. kod debug klien:
Tetapkan titik putus di JavaScript sisi klien anda (
5. ), langkah melalui kod, dan periksa pembolehubah untuk mengenal pasti dan menetapkan sebarang pepijat sisi klien (mis., pemilih, ID yang hilang).

   app.js

   Ringkasan:

Panduan ini menunjukkan kuasa kod VS dan debugger Chrome untuk debugging JavaScript yang berkesan. Dengan menguasai teknik-teknik ini, anda dapat meningkatkan kecekapan debugging anda dengan ketara dan menulis kod berkualiti tinggi. Terokai dokumentasi debugging kod VS untuk ciri -ciri canggih seperti titik putus bersyarat. 告别 console.log(), 拥抱高效调试！

Atas ialah kandungan terperinci Debugging JavaScript Projects dengan VS Code & Chrome Debugger. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!