Debug dengan Visual Studio Code

  • 8 menit

Dalam latihan sebelumnya, Anda mempelajari pentingnya dapat menjalankan kode Anda langkah demi langkah dengan debugger yang disediakan di Node.js. Untuk pekerjaan Anda pada aplikasi Tailwind Traders, Anda memerlukan lingkungan debugging yang lebih komprehensif di dalam IDE Anda (Lingkungan Pengembangan Terintegrasi).

Mari kita temukan bagaimana Anda dapat mengonfigurasi debug Visual Studio Code untuk menggunakannya dengan Node.js.

Cara menggunakan Visual Studio Code untuk penelusuran kesalahan Node.js

Di Visual Studio Code, debugger diakses dari tab Jalankan .

Screenshot of Visual Studio Code debug tab.

  • Jika Anda membuka .js file di jendela editor, Anda dapat memilih Jalankan dan Debug lalu pilih Node.js untuk langsung men-debug file JavaScript yang terbuka.

    Screenshot of Node.js environment selection drop-down list in Visual Studio Code.

Ada beberapa cara lain untuk memulai penelusuran kesalahan di Visual Studio Code. Untuk latihan berikutnya, kita akan menggunakan file launch.json. Tim pengembangan sering menggunakan file launch.json untuk menyesuaikan konfigurasi eksekusi. Dengan konfigurasi yang ditentukan dalam file .json, Anda dapat memeriksanya ke kontrol sumber. Dari kontrol sumber, Anda dapat berbagi konfigurasi di seluruh tim Anda.

Mengontrol alur dengan menambahkan titik henti

Tidak seperti debugger baris perintah Node.js bawaan, debugger Visual Studio Code segera mulai mengeksekusi kode Anda. Jika program Anda berakhir dengan cepat, Anda mungkin tidak memiliki kesempatan untuk berinteraksi dengan debugger. Itu sebabnya Anda mungkin perlu menambahkan titik henti sebelum menjalankan kode. Kami akan menambahkan dan menghapus beberapa titik henti di latihan berikutnya.

Untuk menambahkan titik henti dalam kode Anda, temukan baris kode di file JavaScript (.js) tempat Anda ingin menambahkan titik henti. Di samping nomor baris untuk pernyataan kode, pilih di margin kiri. Saat titik henti ditambahkan, Anda akan melihat lingkaran merah di sebelah nomor baris. Untuk menghapus titik henti, pilih lingkaran merah.

Screenshot of a breakpoint added in the Visual Studio Code editor window.

Anda juga dapat menggunakan menu konteks klik kanan untuk menambahkan titik henti. Menu konten menyertakan opsi Tambahkan Titik Henti Kondisional, tempat Anda memasukkan kondisi untuk menghentikan eksekusi kode. Titik henti kondisional hanya aktif ketika kondisi yang ditentukan terpenuhi.

Screenshot of setting a conditional breakpoint in Visual Studio Code.

Titik henti ini menghentikan eksekusi hanya ketika nilai convertedValue tidak terdefinisi.

Visual Studio Code gambaran umum debug

Setelah Anda menyiapkan titik henti dan memulai aplikasi, panel informasi dan kontrol baru akan muncul di layar.

Screenshot of Visual Studio Code debugger overview.

Angka Nama Deskripsi
1. Kontrol peluncuran debugger Di bagian atas bar samping, Anda dapat menemukan kontrol peluncuran.
2. Status variabel Panel Variabel menunjukkan status variabel Anda saat ini.
3. Status variabel yang dipantau Panel Watch menampilkan status variabel yang Anda tonton saat ini.
4. Tumpukan panggilan saat ini Panel Tumpukan panggilan memperlihatkan tumpukan panggilan saat ini.
5. File skrip yang dimuat Panel File skrip yang dimuat menunjukkan file JavaScript yang telah dimuat sejauh ini.
6. Titik henti Panel Breakpoints menampilkan semua titik henti yang Anda tempatkan dalam kode Anda.
7. Kontrol eksekusi Anda dapat mengontrol alur eksekusi program Anda menggunakan kontrol ini.
8. Langkah eksekusi saat ini Langkah eksekusi saat ini disorot di jendela editor.
9. Konsol debug Konsol Debug dapat digunakan untuk memvisualisasikan log konsol aplikasi Anda, dan untuk mengevaluasi ekspresi atau menjalankan kode dalam konteks eksekusi saat ini.

Kontrol peluncuran debugger

Di bagian atas bilah sisi, Anda dapat menemukan kontrol peluncuran:

Screenshot of Visual Studio Code debug sidebar controls.

Angka Nama Deskripsi
1. Mulai penelusuran kesalahan Mulai debug aplikasi Anda.
2. Pilih konfigurasi peluncuran aktif Pilih konfigurasi peluncuran aktif.
3. Mengedit file launch.json Edit file launch.json. Buat file json jika perlu.
4. Buka Konsol Debug Buka Konsol Debug, dan alihkan visibilitas panel Variabel, Watch, Call Stack, dan Breakpoints..

Melihat dan mengedit status variabel Anda

Saat Anda menganalisis penyebab cacat program, pantau status variabel Anda untuk mencari perubahan yang tidak terduga. Anda dapat menggunakan panel Variabel untuk melakukannya.

Variabel Anda ditampilkan menurut cakupan:

Cakupan Deskripsi
Lokal Variabel lokal dapat diakses dalam cakupan saat ini, biasanya fungsi saat ini.
Global Variabel global dapat diakses dari mana saja di program Anda. Objek sistem dari runtime bahasa umum JavaScript juga disertakan, jadi jangan heran jika Anda melihat banyak benda di sana.
Penutupan Variabel penutupan dapat diakses dari penutupan saat ini, jika ada. Penutupan menggabungkan cakupan lokal fungsi dengan cakupan dari fungsi luar miliknya.

Kemungkinan tindakan meliputi:

  • Buka lingkup: Anda dapat membuka lingkup dan variabel dengan memilih panah. Saat Anda membuka objek, Anda dapat melihat semua properti yang ditentukan dalam objek ini.

  • Ubah nilai variabel: Dimungkinkan untuk mengubah nilai variabel dengan cepat dengan mengklik dua kali variabel.

  • Mengintip variabel: Dengan mengarahkan mouse ke atas parameter fungsi atau variabel langsung di jendela editor, Anda juga dapat mengintip nilainya.

    Screenshot of variable hover during debugging.

Tonton Variabel

Jika Anda ingin melacak status variabel di seluruh waktu atau fungsi yang berbeda, mencarinya setiap saat adalah tugas yang mungkin melelahkan. Pada situasi inilah panel Pantau berguna.

Screenshot of watched variables.

Anda dapat memilih tombol tambah untuk memasukkan nama variabel atau ekspresi untuk ditonton. Sebagai alternatif, Anda dapat mengklik kanan variabel di panel Variabel, dan pilih Tambahkan untuk menonton.

Semua ekspresi di dalam panel pengawasan akan diperbarui secara otomatis saat kode Anda berjalan.

Tumpukan panggilan

Setiap kali program Anda memasukkan fungsi, entri ditambahkan ke tumpukan panggilan. Ketika aplikasi Anda menjadi kompleks, dan Anda memiliki fungsi yang dipanggil dalam fungsi berkali-kali, tumpukan panggilan mewakili jejak panggilan fungsi.

Sangat berguna untuk menemukan sumber pengecualian. Jika mengalami crash tak terduga dalam program, Anda akan sering melihat hal seperti ini di konsol:

/Users/learn/nodejs/index.js:22
  return value.toFixed(2);
               ^
TypeError: Cannot read property 'toFixed' of undefined
    at formatValueForDisplay (/Users/learn/nodejs/index.js:22:16)
    at printForeignValues (/Users/learn/nodejs/index.js:31:28)
    at Object.<anonymous> (/Users/learn/nodejs/index.js:39:1)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

Grup at [...] baris di bawah pesan kesalahan disebut pelacakan tumpukan. Pelacakan tumpukan memberikan nama dan asal setiap fungsi yang dipanggil sebelum berakhir dengan pengecualian. Namun, mungkin sedikit sulit untuk menguraikan, karena juga mencakup fungsi internal dari runtime bahasa umum Node.js.

Di situasi inilah panel Tumpukan panggilan Visual Studio Code berguna. Ini memfilter informasi yang tidak diinginkan untuk menunjukkan hanya fungsi yang relevan dari kode Anda sendiri secara default. Anda kemudian dapat melepas tumpukan panggilan ini untuk mengetahui dari mana pengecualian berasal.

Untuk membantu Anda lebih banyak lagi, Anda dapat memilih tombol Hidupkan ulang bingkai yang muncul saat Anda mengarahkan nama fungsi di tumpukan. Ini akan menggulung balik eksekusi kembali ke awal fungsi tersebut dengan benar-benar memulai ulang program Anda hingga saat itu.

Screenshot of the Restart frame button in the Visual Studio Code call stack panel.

Tampilan file skrip yang dimuat

Panel ini menampilkan semua file JavaScript yang telah dimuat sejauh ini. Dalam proyek besar, terkadang dapat berguna untuk memeriksa file mana yang dijalankan kode saat ini.

Titik henti

Di panel Titik henti, Anda dapat melihat dan mengalihkan semua titik henti yang Anda tempatkan dalam kode Anda. Anda juga dapat mengalihkan opsi untuk memutuskan pengecualian yang tertangkap atau tidak tertangkap. Anda bisa menggunakan panel Titik Henti untuk memeriksa status program Anda dan melacak kembali sumber pengecualian dengan menggunakan Tumpukan Panggilan saat terjadi.

Mengontrol eksekusi

Anda dapat mengontrol alur eksekusi program Anda menggunakan kontrol ini.

Screenshot of Visual Studio Code debugger execution controls.

Dari kiri ke kanan, kontrolnya adalah:

  • Lanjutkan atau jeda eksekusi. Jika dijeda, eksekusi akan berlanjut hingga titik henti berikutnya tercapai. Jika program Anda berjalan, tombol beralih ke tombol jeda yang dapat Anda gunakan untuk menjeda eksekusi.
  • Lewati. Menjalankan pernyataan kode berikutnya dalam konteks saat ini (sama dengan next perintah dalam debug bawaan).
  • Melangkah ke. Seperti Lewati, tetapi jika pernyataan berikutnya adalah panggilan fungsi, maka akan pindah ke pernyataan kode pertama fungsi ini (sama dengan perintah step).
  • Melangkah keluar. Jika Anda berada di dalam fungsi, jalankan kode yang tersisa dari fungsi ini dan lompat kembali ke pernyataan setelah panggilan fungsi awal (sama dengan perintahout).
  • Hidupkan Ulang. Menghidupkan ulang program Anda dari awal.
  • Hentikan. Akhiri eksekusi dan biarkan debug.

Menggunakan konsol debug

Konsol debug dapat ditampilkan atau disembunyikan dengan menekan Ctrl+Shift+Y (Windows, Linux) atau Cmd+Shift+Y (Mac). Ini dapat digunakan untuk memvisualisasikan log konsol aplikasi Anda, dan untuk mengevaluasi ekspresi atau menjalankan kode dalam konten eksekusi saat ini, seperti exec perintah dalam debug Node.js bawaan.

Anda dapat memasukkan ekspresi JavaScript di bidang input di bagian bawah konsol debug. Kemudian, tekan Enter untuk mengevaluasinya. Hasilnya akan ditampilkan langsung di konsol.

Screenshot of Debug console.

Dengan cara ini, Anda dapat dengan cepat memeriksa nilai variabel, menguji fungsi dengan nilai yang berbeda, atau mengubah status saat ini.

Menambahkan titik log alih-alih console.log

Linter akan menandai console.log pernyataan sebagai kesalahan. Untuk mendapatkan efek yang sama dengan console.log pernyataan, gunakan titik log Visual Studio Code sebagai gantinya, yang dicetak ke konsol Debug.

Tambahkan titik log dengan mengklik kanan di area yang sama dengan yang Anda gunakan untuk menambahkan titik henti, lalu pilih Tambahkan titik log. Masukkan pesan untuk ditampilkan pada saat itu dalam kode Anda.

Screenshot of adding a logpoint in Visual Studio Code.

Seperti titik henti, titik log tidak mengubah kode Anda dengan cara apa pun, dan hanya digunakan selama penelusuran kesalahan. Anda tidak punya alasan lagi untuk membiarkan yang terlupakan console.log('here') tergelincir ke produksi.