Sebelumnya

Berikutnya

Latihan - Debug dengan Visual Studio Code

Selesai

Saatnya untuk mempraktikkan pengetahuan penelusuran kesalahan yang baru Anda peroleh. Ternyata kita memiliki kesempatan yang sempurna. Di aplikasi Tailwind Traders kami, kami mengembangkan fitur baru untuk memungkinkan harga produk ditampilkan dalam beberapa mata uang. Rekan kerja menulis beberapa kode untuk aplikasi Tailwind Traders, tetapi mereka kesulitan mencari tahu apa yang salah. Ayo bantu.

Membuat file JavaScript di ruang kerja Visual Studio

Untuk latihan ini, Anda memerlukan file JavaScript untuk berlatih menelusuri kesalahan. Untuk menggunakan kontrol peluncuran debugger, file JavaScript harus berada di ruang kerja Visual Studio.

Tujuan dari aplikasi ini adalah untuk menetapkan nilai tukar antara tiga mata uang, USD, EUR, dan JPY. Kemudian, kita perlu menampilkan berapa nilai 10 EUR dalam mata uang lain dengan menggunakan dua digit setelah titik desimal. Untuk setiap mata uang yang ditambahkan, nilai tukar untuk semua mata uang lainnya harus dihitung.

1. Di Visual Studio Code, buat file bernama mycurrency.js di ./nodejs-debug/ subfolder.

2. Tempel kode berikut ke penyunting file baru:

   const rates = {};
   
   function setExchangeRate(rate, sourceCurrency, targetCurrency) {
     if (rates[sourceCurrency] === undefined) {
       rates[sourceCurrency] = {};
     }
   
     if (rates[targetCurrency] === undefined) {
       rates[targetCurrency] = {};
     }
   
     rates[sourceCurrency][targetCurrency] = rate;
     rates[targetCurrency][sourceCurrency] = 1 / rate;
   }
   
   function convertToCurrency(value, sourceCurrency, targetCurrency) {
     const exchangeRate = rates[sourceCurrency][targetCurrency];
     return exchangeRate && value * exchangeRate;
   }
   
   function formatValueForDisplay(value) {
     return value.toFixed(2);
   }
   
   function printForeignValues(value, sourceCurrency) {
     console.info(`The value of ${value} ${sourceCurrency} is:`);
   
     for (const targetCurrency in rates) {
       if (targetCurrency !== sourceCurrency) {
         const convertedValue = convertToCurrency(value, sourceCurrency, targetCurrency);
         const displayValue = formatValueForDisplay(convertedValue);
         console.info(`- ${convertedValue} ${targetCurrency}`);
       }
     }
   }
   
   setExchangeRate(0.88, 'USD', 'EUR');
   setExchangeRate(107.4, 'USD', 'JPY');
   printForeignValues(10, 'EUR');
   

3. Untuk menyimpan file, tekan Ctrl+S (Windows, Linux) atau Cmd+S (Mac).

Membuat konfigurasi peluncuran

Kita akan menggunakan debugger banyak, jadi mari kita buat konfigurasi peluncuran untuk aplikasi Anda.

1. Pada tab Jalankan di Visual Studio Code, pilih Buat file launch.json dan pilih debugger Node.js.

   Visual Studio Code membuat .vscode/launch.json file konfigurasi di akar ruang kerja dan membuka file peluncuran untuk pengeditan.

   

   Secara default, konfigurasi peluncuran dibuat untuk menjalankan file yang saat ini dibuka. Dalam contoh ini, file yang terbuka adalah mycurrency.js. Anda dapat mengubah konfigurasi peluncuran untuk menyesuaikan bagaimana program Anda harus dimulai saat Anda menelusuri kesalahan.

2. Dalam konfigurasi peluncuran, lihat nilai program properti .

   {
       // Use IntelliSense to learn about possible attributes.
       // Hover to view descriptions of existing attributes.
       // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
       "version": "0.2.0",
       "configurations": [
           {
               "type": "node",
               "request": "launch",
               "name": "Launch Program",
               "skipFiles": [
                   "<node_internals>/**"
               ],
               "program": "${workspaceFolder}/nodejs-debug/mycurrency.js"
           }
       ]
   }
   

   • ${workspaceFolder} menunjukkan akar ruang kerja.

3. Tutup file .vscode/launch.json.

Catatan

Anda dapat membuat konfigurasi peluncuran yang berbeda untuk proyek Anda dengan memilih Tambahkan Konfigurasi di kanan bawah.

Analisis data

Pastikan lingkungan Visual Studio Code Anda siap untuk memantau proses penelusuran kesalahan:

• Panel debugger harus terbuka di sebelah kiri. Gunakan ikon tab Jalankan di sebelah kiri untuk menghidupkan/mematikan visibilitas panel.
• Konsol debug harus terbuka di bagian bawah. Anda dapat membuka konsol dengan memilih Lihat>Konsol Debug, atau dengan menekan Ctrl+Shift+Y (Windows, Linux) atau Cmd+Shift+Y (Mac).

Sekarang, Anda siap untuk memulai penelusuran kesalahan.

Di kontrol peluncuran debugger, mulai program dengan penelusuran kesalahan diaktifkan (panah hijau).

Anda akan melihat program selesai dengan cepat. Itu normal karena Anda belum menambahkan titik henti apa pun.

Anda akan melihat teks ini di konsol debug, diikuti dengan pengecualian.

The value of 10 EUR is:
11.363636363636365
- 11.363636363636365 USD
/app/node-101/currency.js:23
  return value.toFixed(2);
               ^
TypeError: Cannot read property 'toFixed' of undefined
    at formatValueForDisplay (/app/node-101/currency.js:23:16)
    at printForeignValues (/app/node-101/currency.js:32:28)
    at Object.<anonymous> (/app/node-101/currency.js:40:1)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11

Apa yang ingin dilakukan program ini adalah menetapkan nilai tukar antara tiga mata uang (USD, EUR, JPY), dan menampilkan nilai untuk 10 EUR semua mata uang lainnya, dengan dua digit setelah titik desimal.

Kita dapat melihat dua bug di sini:

• Ada lebih dari dua digit setelah titik desimal.
• Program mengalami crash dengan pengecualian dan gagal menampilkan JPY nilai.

Tip

• Atur "outputCapture": "std", ke file konfigurasi peluncuran Anda untuk meningkatkan output pengelogan.
• Atur titik log alih-alih titik henti untuk menghindari penghentian eksekusi program. Titik log tidak "memecah" ke debugger tetapi sebaliknya mencatat pesan ke konsol. Titik log sangat berguna untuk menyuntikkan pengelogan saat men-debug server produksi yang tidak dapat dijeda atau dihentikan.

Perbaiki tampilan digit

Kita akan mulai dengan memperbaiki bug pertama. Karena Anda tidak menulis kode ini dan ada berbagai fungsi yang disebut, mari kita pertama-tama pahami alur eksekusi dengan menggunakan eksekusi langkah demi langkah.

Menggunakan titik henti dan eksekusi langkah demi langkah

Untuk menambahkan titik henti, pilih di margin kiri di baris 39, pada printForeignValues(10, 'EUR');.

Mulai menelusuri kesalahan lagi, dan masuk ke fungsi printForeignValues() dengan kontrol debug Masuk ke:

Memeriksa status variabel

Sekarang, luangkan waktu untuk memeriksa nilai variabel yang berbeda di panel Variabel.

• Berapa nilai untuk variabel value dan sourceCurrency?
• Untuk variabel rates, apakah Anda melihat tiga kunci yang diharapkan, USD, EUR, dan JPY?

Untuk maju selangkah demi selangkah hingga variabel convertedValue diatur, gunakan kontrol debug Melewati:

Setelah Anda menggunakan kontrol Melewati lima kali, Anda akan melihat nilai variabel convertedValue diatur seperti yang diharapkan 11.363636363636365.

Jika kita melewati sekali lagi, kita akan melihat nilai variabel displayValue. Nilainya harus berupa string berformat untuk tampilan dengan dua digit 11.36.

Kita kemudian dapat menyimpulkan bahwa hingga titik ini dalam program, fungsi convertToCurrency() dan formatValueForDisplay() terlihat benar, dan fungsi memberikan hasil yang diharapkan.

Perbaiki kesalahan

Gunakan kontrol Masuk ke sekali untuk mencapai panggilan ke fungsi console.info(). Periksa baris kode ini dengan teliti. Apakah Anda melihat kesalahan di sini?

Kita perlu memperbaiki bug program ini dengan menggunakan variabel displayValue sebagai ganti variabel convertedValue untuk mencetak nilainya.

1. Perbarui file currency.js Anda agar menggunakan nama variabel yang benar. Ubah panggilan ke fungsi console.info() pada baris 32 untuk menggunakan variabel displayValue sebagai ganti variabel convertedValue:

   console.info(`- ${displayValue} ${targetCurrency}`);
   

2. Simpan perubahan ke file Anda.

3. Hidupkan ulang program.

Periksa apakah program menampilkan nilai USD sebagai 11.36 dengan benar. Bug pertama - diselesaikan.

Menemukan penyebab crash

Sekarang mari kita cari tahu mengapa program mengalami crash.

1. Di file currency.js Anda, hapus titik henti yang Anda atur pada baris 39.

2. Untuk memaksa program berhenti setelah pengecualian dimunculkan, di panel Titik henti, centang kotak Pengecualian Tidak Terdeteksi.

3. Jalankan program di debugger lagi.

Program akan dijeda pada pengecualian dan menampilkan laporan kesalahan besar di tengah jendela penyunting.

Lihat baris tempat eksekusi berhenti, dan perhatikan pesan pengecualian TypeError: Cannot read property 'toFixed' of undefined. Dari pesan tersebut, Anda dapat menyimpulkan bahwa fungsi parameter value memiliki nilai undefined, bukan berupa angka. Kesalahan inilah yang menyebabkan pengecualian.

Memutar balik tumpukan panggilan

Jejak tumpukan yang Anda lihat di bawah pesan kesalahan bisa agak sulit untuk didefinisikan. Kabar baiknya adalah bahwa Visual Studio Code memproses tumpukan panggilan fungsi untuk Anda. Secara default, ini hanya memperlihatkan informasi yang bermakna di panel Tumpukan panggilan. Mari kita gunakan informasi tumpukan panggilan untuk menemukan kode yang mengarah ke pengecualian ini.

Kita mengetahui bahwa pengecualian dimunculkan ke dalam panggilan ke fungsi formatValueForDisplay().

1. Di panel debugger, buka panel Tumpukan panggilan.

2. Untuk melihat tempat fungsi formatValueForDisplay() dipanggil, klik ganda fungsi di bawahnya - fungsi printForeignValues.

   Visual Studio Code mengarah ke baris dalam fungsi printForeignValues di file currency.js Anda, tempat fungsi formatValueForDisplay() dipanggil:

   const displayValue = formatValueForDisplay(convertedValue);
   

Perhatikan baik-baik baris kode ini. Parameter yang menyebabkan pengecualian berasal dari variabel convertedValue. Anda perlu mencari tahu di titik mana nilai parameter ini menjadi undefined.

Salah satu opsi adalah menambahkan titik henti pada baris ini, lalu memeriksa variabel setiap kali titik henti berhenti pada baris ini. Tetapi, kita tidak tahu kapan nilai yang salah muncul, dan dalam program yang kompleks, pendekatan penelusuran kesalahan ini dapat menjadi rumit. Mari kita lihat metode alternatif.

Tambahkan titik henti bersyarat

Apa yang akan membantu dalam kasus kita adalah untuk dapat membuat debugger berhenti di titik henti ini hanya ketika nilai variabel convertedValue adalah undefined. Untungnya, Visual Studio Code dapat melakukan tindakan ini dengan opsi klik kanan mouse.

1. Dalam file currency.js Anda, di margin kiri pada baris 31, klik kanan dan pilih Tambahkan Titik Henti Kondisional.

   

2. Setelah Anda mengklik kanan, masukkan kondisi berikut untuk memicu titik henti, lalu tekan Enter:

   `convertedValue === undefined`
   

3. Hidupkan ulang program.

Program sekarang seharusnya berhenti pada baris 31, dan kita dapat memeriksa nilai tumpukan panggilan.

Perhatikan keadaan saat ini

Mari luangkan waktu untuk menganalisis status program saat ini.

• Nilai variabel convertedValue berasal dari panggilan ke fungsi convertToCurrency(value, sourceCurrency, targetCurrency). Kita perlu memeriksa nilai parameter dalam panggilan fungsi ini dan memastikan nilai parameter benar.

• Secara khusus, kita perlu memeriksa variabel value dan memastikan variabel tersebut memiliki nilai yang diharapkan 10.

Lihat kode convertToCurrency() fungsi.

function convertToCurrency(value, sourceCurrency, targetCurrency) {
  const exchangeRate = rates[sourceCurrency][targetCurrency];
  return exchangeRate && value * exchangeRate;
}

Anda tahu bahwa hasil dari kode ini adalah undefined. Anda juga mengetahui bahwa variabel value diatur ke 10. Informasi ini membantu kita melihat bahwa masalahnya pasti ada pada nilai variabel exchangeRate.

Di file currency.js Anda, arahkan kursor ke variabel rates untuk mengintip:

Anda mencoba untuk mendapatkan nilai tukar dari EUR ke JPY, tetapi jika Anda membuka EUR nilainya, Anda dapat melihat bahwa hanya ada tingkat konversi untuk USD. Tingkat konversi untuk JPY hilang.

Memperbaiki tingkat konversi yang hilang

Sekarang setelah Anda tahu beberapa tingkat konversi hilang, mari kita pahami alasannya. Untuk menghapus semua titik henti yang ada, di panel Titik Henti, pilih ikon Hapus semua titik henti.

Perhatikan variabel tarif

Mari kita atur titik henti untuk menonton variabel rates.

1. Dalam file currency.js Anda, tambahkan titik henti pada baris 37 dalam fungsi setExchangeRate(0.88, 'USD', 'EUR');.

2. Di panel Tonton, pilih Plus, dan masukkan rates.

   Setiap kali nilai variabel rates diubah, nilai yang diperbarui ditampilkan di panel Tonton.

3. Hidupkan ulang program.

4. Saat titik henti berhenti pada panggilan pertama ke fungsi setExchangeRate(), gunakan kontrol Melewati.

5. Di panel Tonton, lihat nilai variabel rates.

   Pada titik ini, USD dan EUR memiliki tingkat konversi berlawanan yang cocok, seperti yang kita harapkan.

6. Lewati lagi pada panggilan kedua ke fungsi setExchangeRate().

   Anda melihat bahwa USD dan JPY memiliki tingkat konversi berlawanan yang cocok, tetapi tidak ada apa pun antara EUR dan JPY.

Saatnya melihat kode untuk fungsi setExchangeRate().

function setExchangeRate(rate, sourceCurrency, targetCurrency) {
  if (rates[sourceCurrency] === undefined) {
    rates[sourceCurrency] = {};
  }

  if (rates[targetCurrency] === undefined) {
    rates[targetCurrency] = {};
  }

  rates[sourceCurrency][targetCurrency] = rate;
  rates[targetCurrency][sourceCurrency] = 1 / rate;
}

Baris yang paling penting dalam fungsi ini adalah dua baris yang terakhir. Sepertinya Anda telah menemukan bug kedua! tingkat konversi hanya ditetapkan antara variabel sourceCurrency dan targetCurrency. Program juga perlu menghitung tingkat konversi untuk mata uang lain yang ditambahkan.

Perbaiki kode

Mari kita perbaiki kode untuk masalah tingkat konversi.

1. Perbarui file currency.js Anda guna menghitung tingkat konversi untuk mata uang lainnya.

   Ganti kode pada baris 12 dan 13:

   rates[sourceCurrency][targetCurrency] = rate;
   rates[targetCurrency][sourceCurrency] = 1 / rate;
   

   dengan kode yang diperbarui ini:

   for (const currency in rates) {
     if (currency !== targetCurrency) {
       // Use a pivot rate for currencies that don't have the direct conversion rate
       const pivotRate = currency === sourceCurrency ? 1 : rates[currency][sourceCurrency];
       rates[currency][targetCurrency] = rate * pivotRate;
       rates[targetCurrency][currency] = 1 / (rate * pivotRate);
     }
   }
   

2. Simpan perubahan ke file Anda.

Kode yang diperbarui menetapkan tingkat konversi untuk mata uang apa pun selain sourceCurrency dan targetCurrency. Program menggunakan tingkat konversi sourceCurrency untuk menyimpulkan tingkat antara mata uang lain dan targetCurrency. Kode kemudian menetapkan tingkat konversi untuk mata uang lain yang sesuai.

Catatan

Perbaikan ini hanya berfungsi jika tingkat antara sourceCurrency dan mata uang lainnya sudah ada, yang merupakan batasan yang dapat diterima dalam kasus ini.

Menguji koreksi

Mari kita uji perubahan kita.

1. Hapus semua titik henti dan tonton variabel.

2. Hidupkan ulang program.

Anda sekarang akan melihat hasil yang diharapkan di konsol tanpa crash.

The value of 10 EUR is:
- 11.36 USD
- 1220.45 JPY

Itu saja. Anda memperbaiki kode. Anda sekarang dapat secara efisien men-debug kode yang bahkan tidak Anda ketahui sebelumnya dengan menggunakan Visual Studio Code. Kerja Bagus !

Membersihkan kontainer pengembangan

Setelah menyelesaikan proyek, Anda mungkin ingin membersihkan lingkungan pengembangan Anda atau mengembalikannya ke keadaan khasnya.

Pengembangan jarak jauh (browser)

Menghapus lingkungan GitHub Codespaces memastikan bahwa Anda dapat memaksimalkan jumlah pemberian izin per jam inti gratis yang Anda dapatkan untuk akun Anda.

Penting

Untuk informasi selengkapnya tentang penetapan akun GitHub Anda, lihat GitHub Codespaces bulanan yang disertakan penyimpanan dan jam inti.

1. Masuk ke dasbor GitHub Codespaces (https://github.com/codespaces).

2. Temukan Codespace Yang sedang berjalan yang bersumber dari MicrosoftDocs/node-essentials repositori GitHub.

   

3. Buka menu konteks untuk codespace dan pilih Hapus.

   

Pengembangan lokal (Docker)

Anda tidak perlu membersihkan lingkungan lokal, tetapi Anda dapat menghentikan kontainer pengembangan yang sedang berjalan dan kembali menjalankan Visual Studio Code dalam konteks ruang kerja lokal.

1. Buka Palet Perintah, cari perintah Kontainer Dev, lalu pilih Kontainer Dev: Buka Kembali Folder Secara Lokal.

   

Tip

Visual Studio Code akan menghentikan kontainer pengembangan yang sedang berjalan, tetapi kontainer masih ada di Docker dalam status berhenti. Anda selalu memiliki opsi untuk menghapus instans kontainer, gambar kontainer, dan volume dari Docker untuk mengosongkan lebih banyak ruang di komputer lokal Anda.

Lanjutkan