Cara Debug Aplikasi Node.js di Visual Studio Code
Table of content:
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 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 instruksi tentang cara menyiapkan Kode VS di Windows, baca panduan penyiapan kami.
Baca Juga:
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:
{
"version": "0.2.0",
"configurations": [
{ "type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [ "<node_internals>/**" ],
"program": "${workspaceFolder}\\index.js"
}
]
}
Anda juga akan melihat lima panel di sisi kiri editor. Panel ini VARIABEL, JAM TANGAN, PANGGILAN Tumpukan, Script TERMASUKDan 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:
node --inspect index.js
Masukkan -brk bendera setelah –memeriksa jika Anda ingin memasangnya sebelum program mulai berjalan.
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:
{ "compilerOptions": { "sourceMaps": true }}
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:
{
"version": "0.2.0",
"configurations": [ {
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [ "<node_internals>/**" ],
"program": "${workspaceFolder}\\index.js",
"outFiles": "${workspaceFolder}\\index.js",
}
]
}
Jika Anda menggunakan ts-node untuk menjalankan proyek Anda tanpa langkah build, gunakan ini alih-alih konfigurasi di atas:
{
"version": "0.2.0",
"configurations": [ {
"type": "pwa-node",
"request": "launch",
"name": "Launch Server",
"skipFiles": [ "<node_internals>/**" ],
"runtimeArgs": [ "-r", "ts-node/register" ],
"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 dapat men-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.
Artikel Terkait
