Latihan - Menggunakan debugger bawaan Node.js

6 menit

Untuk mempraktikkan konsep debugging yang baru saja Anda lihat, Anda akan membuat aplikasi Node.js singkat untuk menghitung nomor N urutan Fibonacci.

Deret Fibonacci adalah rangkaian angka yang dimulai dengan angka 0 dan 1, dengan setiap angka berikutnya adalah jumlah dari dua angka sebelumnya. Deretannya berlanjut seperti ini:

0, 1, 1, 2, 3, 5, 8, 13, 21...

Mari kita buat aplikasi Node.js baru untuk mengilustrasikan konsepnya.

Buka proyek dalam kontainer pengembangan

Modul pelatihan ini menawarkan kontainer pengembangan, baik di browser atau untuk komputer lokal Anda. Kontainer ini menyediakan semua lingkungan yang diperlukan sehingga Anda dapat menggunakan modul pelatihan ini tanpa harus menginstal IDE atau Node.js. Anda tidak perlu tahu apa pun tentang kontainer untuk menyelesaikan modul pelatihan ini.

Pengembangan jarak jauh (browser)
Pengembangan lokal (Docker)

Mulai proses untuk membuat GitHub Codespace baru di main cabang MicrosoftDocs/node-essentials repositori GitHub.

Buka proyek ini di GitHub Codespaces
Pada halaman Buat codespace , tinjau pengaturan konfigurasi codespace, lalu pilih Buat codespace
Tunggu hingga codespace dimulai. Proses startup ini dapat memakan waktu beberapa menit.
Buka terminal baru di codespace.

Tip

Anda dapat menggunakan menu utama untuk menavigasi ke opsi menu Terminal lalu pilih opsi Terminal Baru.
Validasi bahwa Node.js diinstal di lingkungan Anda:
```
node --version
```
Kontainer dev menggunakan versi Node.js LTS. Versi yang tepat mungkin berbeda.
Latihan yang tersisa dalam proyek ini berlangsung dalam konteks kontainer pengembangan ini.

Buka Visual Studio Code dalam konteks direktori kosong.
Pastikan Anda memiliki ekstensi Kontainer Dev yang terinstal di Visual Studio Code.
Buka terminal baru di editor.

Tip

Anda dapat menggunakan menu utama untuk menavigasi ke opsi menu Terminal lalu pilih opsi Terminal Baru.
MicrosoftDocs/node-essentials Kloning repositori GitHub ke direktori saat ini.
```
git clone https://github.com/MicrosoftDocs/node-essentials.git
```
Buka repositori dalam kode dengan perintah berikut di terminal.
```
cd node-essentials
code .
```
Buka Palet Perintah, cari perintah Kontainer Dev, lalu pilih Kontainer Dev: Buka Kembali di Kontainer.

Tip

Visual Studio Code mungkin secara otomatis meminta Anda untuk membuka kembali folder yang ada dalam kontainer pengembangan. Ini secara fungsional setara dengan menggunakan palet perintah untuk membuka kembali ruang kerja saat ini dalam kontainer.
Validasi bahwa Node.js diinstal di lingkungan Anda:
```
node --version
```
Kontainer dev menggunakan versi Node.js LTS seperti v20.5.1. Versi yang tepat mungkin berbeda.
Latihan yang tersisa dalam proyek ini berlangsung dalam konteks kontainer pengembangan ini.

Menyiapkan lingkungan

Sebelum kita memulai latihan, pertama-tama kita harus menyiapkan kode dan lingkungan.

./nodejs-debug Buka subfolder, lalu buat file JavaScript baru bernama myfibonacci.js. File yang sudah ada di folder adalah solusi untuk latihan, dengan perbaikan yang diperlukan untuk bug yang ditemukan selama penelusuran kesalahan.

Tempelkan kode ini ke dalam file:

function fibonacci(n) {
  let n1 = 0;
  let n2 = 1;
  let sum = 0;

  for (let i = 2; i < n; i++) {
    sum = n1 + n2;
    n1 = n2;
    n2 = sum;
  }

  return n === 0 ? n1 : n2;
}

const result = fibonacci(5);
console.log(result);

Simpan file, CTRL + S.
./nodejs-debug Klik kanan subfolder dan pilih Open in integrated terminal dan jalankan program dengan menggunakan perintah berikut:
```
node fibonacci.js
```

Aplikasi harus menampilkan hasil 3 (tiga) di konsol. Ups, sepertinya ada bug di sana karena kita berharap untuk melihat 5 (lima) sebagai hasilnya. Mari kita pahami masalah saat menggunakan debugger bawaan Node.js.

Contekan perintah debugger

Debugger bawaan Node.js dilengkapi dengan sekumpulan perintah yang dapat Anda gunakan untuk mengontrol eksekusi program Anda. Berikut adalah contekan cepat dari perintah yang paling umum:

Perintah	Deskripsi
`c`	Lanjutkan. Melanjutkan eksekusi hingga titik henti berikutnya atau akhir program Anda.
`next`	Lewati. Perintah ini mirip `step` dengan perintah, kecuali bahwa jika baris kode berikutnya adalah panggilan fungsi, perintah ini menjalankan fungsi tanpa melangkah ke dalamnya.
`s`	Masuk. Perintah ini mirip`next` dengan perintah, kecuali bahwa jika baris kode berikutnya adalah panggilan fungsi, buka baris pertama kode fungsi ini.
`sb()`	Tambahkan titik henti pada baris saat ini.
`exec <EXPR>`	Mengevaluasi ekspresi dalam konteks eksekusi saat ini. Perintah ini berguna untuk membantu Anda mendapatkan informasi tentang status saat ini. Misalnya, Anda bisa mendapatkan nilai variabel bernama `i` dengan menggunakan `exec i`.
`Ctrl` + `D`	Hentikan debugger.

Memulai debugger bawaan

Mulai program lagi, kali ini dengan debugger bawaan diaktifkan. Masukkan perintah ini di terminal:

node inspect fibonacci.js

Di terminal, Anda akan melihat perintah debugger ditampilkan. Sekarang, masuk ke kode dengan menjalankan s + <Enter> hingga titik eksekusi terletak di awal fibonacci fungsi, seperti ini:

break in fibonacci.js:2
  1 function fibonacci(n) {
> 2   let n1 = 0;
  3   let n2 = 1;
  4   let sum = 0;
debug>

Pada titik ini, kita dapat memeriksa nilai parameter n yang diteruskan dalam fungsi dengan menjalankan perintah berikut:

exec n

Anda akan melihat 5 (lima) ditampilkan sebagai hasil di konsol. Lanjutkan masuk ke kode dengan menjalankan perintah s hingga titik eksekusi berada di dalam awal loop. Dibutuhkan lima langkah dengan perintah s untuk mencapai titik ini:

break in fibonacci.js:7
  5
  6   for (let i = 2; i < n; i++) {
> 7     sum = n1 + n2;
  8     n1 = n2;
  9     n2 = sum;
debug>

Catatan

Anda mungkin telah memperhatikan bahwa untuk berpindah melalui baris for(...) {} memerlukan beberapa langkah dengan perintah debug. Situasi ini terjadi karena ada beberapa pernyataan pada baris ini. Saat Anda melangkah, Anda melanjutkan ke pernyataan berikutnya dalam kode. Biasanya, ada satu pernyataan per baris. Jika tidak demikian, Anda memerlukan beberapa langkah untuk melanjutkan ke baris berikutnya.

Menemukan bug dengan titik henti

Sekarang mari kita tambahkan titik henti pada baris ini, sehingga kita dapat dengan cepat bergerak melalui perulangan loop. Masukkan perintah berikut di terminal:

sb()

Anda akan melihat baris yang sama ditampilkan lagi di konsol, yang menunjukkan bahwa titik henti telah ditetapkan pada baris ini. Saat titik eksekusi saat ini bergerak, Anda akan melihat tanda bintang * pada baris tempat Anda menetapkan titik henti.

Lanjutkan ke perulangan loop berikutnya dengan menjalankan perintah c di terminal:

Kita dapat memeriksa status perulangan saat ini dengan perintah exec dan melihat nilai beberapa variabel dengan menggunakan larik sebagai parameter perintah. Untuk melihat nilai iterator i dan total sum, kita menggunakan sintaks [i, sum]. Masukkan perintah ini di terminal:

exec [i, sum]

Anda akan melihat hasil [ 3, 1 ] di konsol.

Kode belum memperbarui nilai variabel sum untuk perulangan saat ini, yaitu 3 (tiga). Nilai variabel sum masih menunjukkan angka Fibonacci untuk perulangan sebelumnya. Berikut perhitungan yang kita gunakan dalam kode untuk mendapatkan nilai sum saat ini:

fibonacci(2) = fibonacci(0) + fibonacci(1)
             = 0 + 1
             = 1

Berdasarkan perhitungan kita, tampaknya program berjalan dengan benar hingga saat ini.

Lanjutkan ke perulangan loop berikutnya dengan menjalankan perintah c di terminal, lalu periksa kembali statusnya:

c
exec [i, sum]

Anda akan melihat hasil [ 4, 2 ] di konsol.

Sekarang kita berada di titik tepat sebelum nomor perulangan yang kita inginkan, yaitu 5 (lima). Untuk berjaga-jaga, mari kita lanjutkan langkah demi langkah melalui perulangan ini dengan menggunakan perintah s. Coba untuk mencapai titik henti kita sebelumnya, tetapi lakukan selangkah demi selangkah. Jangan melampaui titik henti!

Apa yang terjadi?

Memperbaiki bug

Setelah memeriksa kondisi loop i < n, eksekusi tiba-tiba melompat ke baris yang memiliki perintah return. Inilah yang akan Anda lihat di terminal:

break in fibonacci.js:12
 10   }
 11
>12   return n === 0 ? n1 : n2;
 13 }
 14

Selesai, kita baru saja menemukan bug! Kode melompat keluar dari loop, bukan memperbarui jumlah untuk perulangan 5 (lima). Hal ini yang menyebabkan kita mendapatkan hasil dari perulangan sebelumnya 3 (tiga) dalam eksekusi awal kita.

Kita perlu memperbaiki kondisi loop pada kode fibonacci.js. Di penyunting kode, ubah nilai pernyataan pengujian dari kurang dari < menjadi kurang dari atau sama dengan <=:

for (let i = 2; i <= n; i++) {
  sum = n1 + n2;
  n1 = n2;
  n2 = sum;
}

Simpan perubahan Anda di penyunting kode, lalu keluar dari debugger dengan memilih Ctrl+D.

Sekarang jalankan program Anda lagi di terminal:

node fibonacci.js

Anda akan melihat hasil yang diharapkan ditampilkan di konsol sekarang, yaitu 5 (lima).

Anda dapat menggunakan debugger bawaan di Node.js untuk mempelajari prinsip penelusuran kesalahan dasar dan untuk sesi penelusuran kesalahan cepat. Merupakan hal yang menyusahkan untuk memasukkan perintah dan mungkin terlalu terbatas serta sulit untuk digunakan dengan program yang kompleks.

Kita akan melihat di bagian selanjutnya cara menggunakan debugger Visual Studio Code sebagai gantinya.

Lanjutkan