Cara Debug Aplikasi Node.js di Visual Studio Code

Men-debug aplikasi Node.js Anda dalam Visual Studio Code itu sendiri dimungkinkan dan mudah. Editor VS Code hadir dengan debugger bawaan yang mampu men-debug aplikasi apa pun yang menargetkan runtime Node.js. Ini berarti Anda dapat men-debug JavaScript atau bahasa lain apa pun yang dikompilasi (mis. TypeScript).

Artikel ini akan memandu Anda melalui langkah-langkah untuk men-debug aplikasi Node.js Anda di VS Code. Anda akan mempelajari cara memulai sesi debug, menyisipkan breakpoint, melampirkan proses eksternal, dan men-debug kode TypeScript menggunakan peta sumber.

Apa yang Anda Butuhkan untuk Memulai

Sebelum memulai, instal Node.js dan VS Code di mesin lokal Anda. Versi terbaru Node.js tersedia di Node.js situs web resmi. Demikian pula, untuk Visual Studio Code, unduh versi terbaru dari Kode VS situs web. Untuk petunjuk tentang cara setting VS Code di Windows, baca panduan penyiapan kami.

Anda juga memerlukan proyek Node.js. Anda dapat membuat aplikasi Node.js sederhana dari awal atau menggunakan aplikasi yang sudah ada.

Proses Debugging dalam Kode VS

Memulai sesi debug di editor VS Code cukup mudah. Buka file dengan Kode VS dan klik Jalankan dan Debug ikon di sidebar (atau tekan Ctrl + Shift + D pada keyboard Anda). Selanjutnya, klik Jalankan dan Debug tombol untuk memulai proses.

Secara default, Node.js akan mencoba mencari tahu lingkungan debug proyek Anda. Tetapi jika deteksi otomatis tidak berhasil, Anda akan diminta untuk memilih lingkungan yang tepat. Untuk tutorial ini, lingkungan tersebut adalah Node.js.

Setelah Anda memilih lingkungan, VS Code mengaktifkan debugger dan melampirkannya ke proses. Anda dapat melihat output Anda di KONSOL DEBUG. Menggunakan bilah alat debug di bagian atas, Anda dapat mengulangi kode, menjeda eksekusi, atau mengakhiri sesi.

Anda juga memiliki opsi untuk membuat file konfigurasi. Itu launch.json file memungkinkan Anda mengonfigurasi dan menyiapkan detail debug. Jika skrip Anda memerlukan argumen, berikan argumen ini di launch.json mengajukan. Beberapa opsi dapat diatur pada setiap konfigurasi:

{ 
"Versi: kapan": "0.2.0", 
"konfigurasi": [ 
 { "jenis": "simpul", 
"meminta": "meluncurkan", 
"nama": "Luncurkan Program", 
"lewati File": [ "/**" ], 
"program": "${workspaceFolder}\\index.js"
 } 
 ]
}

Anda juga akan melihat lima panel di sisi kiri editor. Panel ini VARIABEL, JAM TANGAN, PANGGILAN Tumpukan, Script TERMASUK, Dan BREAKPOIN:

Setelah selesai mengatur konfigurasi, pilih dan jalankan program melalui menu konfigurasi.

Lampirkan Proses Eksternal

Metode lain untuk menyiapkan sesi debug Node.js adalah dengan melampirkan proses eksternal. Mulai program dengan perintah berikut:

simpul --periksa index.js

Masukkan -brk bendera setelah --memeriksa jika Anda ingin memasangnya sebelum program mulai dijalankan.

Selanjutnya, buka pemilih proses di VS Code. Ini mencantumkan semua proses yang tersedia di lingkungan Node.js. Untuk membuka pemilih, tekan Ctrl + Shift + P dan menemukan Debug: Lampirkan ke perintah Node.js.

Klik pada perintah dan pilih opsi yang tepat untuk memulai proses debug.

Membuat Breakpoint

Jika Anda ingin menjeda pada titik tertentu dalam program Anda untuk memeriksa kode, atur breakpoint di sana. Anda dapat menyetel breakpoint hampir di mana saja dalam kode Anda. Ini termasuk deklarasi variabel, ekspresi, dan komentar. Tapi Anda tidak bisa menyetel breakpoint dalam deklarasi fungsi.

Membuat breakpoint cukup mudah. Saat Anda menggerakkan mouse ke sisi kiri nomor baris, lingkaran merah muncul di setiap baris. Identifikasi nomor baris dalam kode tempat Anda ingin menyisipkan breakpoint. Kemudian klik pada baris itu untuk menambahkan breakpoint:

Dalam BREAKPOIN panel, Anda akan menemukan semua breakpoint yang diaktifkan di proyek Anda. Di sinilah Anda akan mengelola, mengedit, dan menonaktifkan breakpoint. Anda juga dapat menghentikan kode saat pengecualian muncul atau dalam kasus pengecualian yang tidak tertangkap. Ini memungkinkan Anda untuk memeriksa masalah sebelum proses keluar.

Mari kita lihat breakpoint beraksi. Klik Meluncurkan ikon untuk memulai sesi debug. Program akan dijeda pada breakpoint pertama dan menghasilkan nilai untuk pemeriksaan:

Anda dapat mengklik Melanjutkan ikon (atau tekan F5) untuk memindahkan program ke breakpoint berikutnya. Ini akan berlanjut sampai Anda tiba di akhir program.

Debugging TypeScript Dengan Source Maps

Karena TypeScript terus menjadi lebih populer, jumlah proyek Node.js yang ditulis dalam TypeScript pasti akan meningkat. Untungnya, Anda juga dapat men-debug proyek berbasis TypeScript dengan VS Code.

Pertama, buat a tsconfig.json file di direktori root proyek Anda (jika belum dibuat) dan aktifkan peta sumber:

{ "Pilihan penyusun": { "peta sumber": BENAR }}

Selanjutnya, lampirkan proses yang sedang berjalan dan atur breakpoint di file TypeScript Anda. Visual Studio Code akan menemukan peta sumber dan menggunakannya.

Anda dapat secara eksplisit memberi tahu VS Code di mana menemukan peta sumber. Untuk melakukan ini, tambahkan sebuah outFiles dalam file konfigurasi peluncuran Anda dan arahkan ke lokasi yang tepat dari peta sumber Anda:

{ 
"Versi: kapan": "0.2.0", 
"konfigurasi": [ { 
"jenis": "simpul", 
"meminta": "meluncurkan", 
"nama": "Luncurkan Program", 
"lewati File": [ "/**" ], 
"program": "${workspaceFolder}\\index.js", 
"berkas keluar": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Jika Anda menggunakan ts-node untuk menjalankan proyek Anda tanpa langkah build, gunakan ini alih-alih konfigurasi di atas:

{ 
"Versi: kapan": "0.2.0", 
"konfigurasi": [ { 
"jenis": "pwa-simpul", 
"meminta": "meluncurkan", 
"nama": "Luncurkan Server", 
"lewati File": [ "/**" ], 
"runtimeArgs": [ "-R", "ts-simpul/daftar" ], 
"args": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Karena tidak ada atribut program, runtime argumen register ts-node sebagai penangan untuk file TypeScript. Argumen pertama untuk argumen adalah file entri untuk program. Sekarang Anda dapat memulai sesi debugging Anda. Jika Anda mengembangkan dengan vanilla JavaScript atau framework front-end, Anda juga bisa debug kode JavaScript di browser.

Fitur Lain dalam Visual Studio Code

Visual Studio Code adalah editor kode sumber yang kuat yang dikemas dengan fitur luar biasa. Kami membahas alat debugger bawaan VS Code. Kami juga mendemonstrasikan bagaimana Anda dapat menggunakannya untuk men-debug aplikasi Node.js Anda.

Tetapi ada banyak fitur berguna lainnya di VS Code. Meskipun Anda mungkin akrab dengan beberapa di antaranya, beberapa di antaranya mungkin benar-benar baru bagi Anda. Dalam hal ini, Anda mungkin tertarik untuk mempelajari fitur-fitur ini dan cara menggunakannya.