Cara Men-debug Kode Node.js Menggunakan Beberapa Alat

Node.js adalah runtime JavaScript berdasarkan mesin V8 yang sama yang digunakan di browser Google Chrome. Ini sering digunakan untuk membangun aplikasi sisi server dan terminal lintas platform. Node.js menjadi semakin populer selama dekade terakhir karena mudah dipasang, praktis digunakan, cepat, dan memungkinkan pengembang web sisi klien untuk meningkatkan keterampilan mereka di tempat lain.

Namun, pengembangan perangkat lunak tetap menjadi tugas yang kompleks, dan kode Node.js Anda akan gagal di beberapa titik. Tutorial ini mendemonstrasikan berbagai alat untuk membantu men-debug aplikasi dan menemukan penyebab masalah.

Mari kita selami.

Ikhtisar Debug

"Debugging" adalah nama yang diberikan untuk berbagai cara memperbaiki cacat perangkat lunak. Memperbaiki bug seringkali mudah. Menemukan penyebab bug bisa jauh lebih kompleks dan menghabiskan berjam-jam menggaruk-garuk kepala.

Bagian berikut menjelaskan tiga jenis kesalahan umum yang akan Anda temui.

Kesalahan Sintaks

Kode Anda tidak mengikuti aturan bahasa — misalnya, saat Anda menghilangkan tanda kurung tutup atau salah mengeja pernyataan seperti console.lag(x) .

Editor kode yang baik dapat membantu menemukan masalah umum dengan:

• Pernyataan valid atau tidak valid dengan kode warna
• Variabel pengecekan tipe
• Fungsi pelengkapan otomatis dan nama variabel
• Menyoroti tanda kurung yang cocok
• Blok kode indentasi otomatis
• Mendeteksi kode yang tidak terjangkau
• Memfaktorkan ulang fungsi yang berantakan

Editor gratis seperti VS Code dan Atom memiliki dukungan hebat untuk Node.js, JavaScript, dan TypeScript (yang ditranspilasikan ke JavaScript). Masalah sintaksis dasar biasanya dapat ditemukan sebelum Anda menyimpan dan menguji kode Anda.

Linter kode seperti ESLint juga akan melaporkan kesalahan sintaks, lekukan yang buruk, dan variabel yang tidak dideklarasikan. ESLint adalah alat Node.js yang dapat Anda instal secara global dengan:

 npm i eslint -g

Anda dapat memeriksa file JavaScript dari baris perintah menggunakan:

 eslint mycode.js

…tetapi lebih mudah menggunakan plugin editor seperti ESLint untuk VS Code atau linter-eslint untuk Atom, yang secara otomatis memvalidasi kode saat Anda mengetik:

Kesalahan Logika

Kode Anda berjalan tetapi tidak berfungsi seperti yang Anda harapkan. Misalnya, pengguna tidak keluar saat mereka memintanya; laporan menunjukkan angka yang salah; data tidak sepenuhnya disimpan ke database; dll.

Kesalahan logika dapat disebabkan oleh:

• Menggunakan variabel yang salah
• Kondisi salah, misalnya if (a > 5) daripada if (a < 5)
• Penghitungan yang gagal memperhitungkan prioritas operator, misalnya 1+2*3 menghasilkan 7 daripada 9.

Itu tidak bisa dihindari: kode Node.js Anda akan gagal di beberapa titik. Lihat alat apa yang dapat Anda gunakan untuk men-debug aplikasi dan temukan penyebab masalah di sini Klik untuk Tweet

Runtime (atau Eksekusi) Error

Kesalahan hanya menjadi jelas ketika aplikasi dijalankan, yang sering menyebabkan crash. Kesalahan runtime dapat disebabkan oleh:

• Membagi dengan variabel yang telah disetel ke nol
• Mencoba mengakses item array yang tidak ada
• Mencoba menulis ke file read-only

Logika dan kesalahan runtime lebih sulit dikenali, meskipun teknik pengembangan berikut dapat membantu:

1. Gunakan Pengembangan Berbasis Tes: TTD mendorong Anda untuk menulis tes sebelum suatu fungsi dikembangkan, misalnya X dikembalikan dari functionY ketika Z dilewatkan sebagai parameter. Tes ini dijalankan selama pengembangan awal dan pembaruan berikutnya untuk memastikan kode terus berfungsi seperti yang diharapkan.
2. Gunakan sistem pelacakan masalah: Tidak ada yang lebih buruk daripada email yang mengklaim "Perangkat lunak Anda tidak berfungsi" ! Sistem pelacakan masalah memungkinkan Anda untuk merekam masalah tertentu, mendokumentasikan langkah-langkah reproduksi, menentukan prioritas, menetapkan pengembang, dan melacak kemajuan perbaikan.
3. Gunakan kontrol sumber: Sistem kontrol sumber seperti Git akan membantu Anda membuat cadangan kode, mengelola revisi, dan mengidentifikasi di mana bug diperkenalkan. Repositori online, termasuk Github dan Bitbucket, menyediakan ruang dan alat gratis untuk proyek yang lebih kecil atau sumber terbuka.

Anda masih akan menemukan bug Node.js, tetapi bagian berikut menjelaskan cara untuk menemukan kesalahan yang sulit dipahami itu.

Tetapkan Variabel Lingkungan Node.js yang Sesuai

Variabel lingkungan yang diatur dalam sistem operasi host dapat mengontrol aplikasi Node.js dan pengaturan modul. Yang paling umum adalah NODE_ENV , yang biasanya disetel ke pengembangan saat debugging atau produksi saat dijalankan di server langsung. Setel variabel lingkungan di macOS atau Linux dengan perintah:

 NODE_ENV=development

atau pada prompt perintah Windows (klasik):

 set NODE_ENV=development

atau Windows Powershell:

 $env:NODE_ENV="development"

Dalam kerangka kerja Express.js yang populer, menyetel NODE_ENV ke pengembangan akan menonaktifkan caching file template dan mengeluarkan pesan kesalahan verbose, yang dapat membantu saat debugging. Modul lain mungkin menawarkan fitur serupa, dan Anda dapat menambahkan kondisi NODE_ENV ke aplikasi Anda, mis

 // running in development mode? const devMode = (process.env.NODE_ENV !== 'production'); if (devMode) { console.log('application is running in development mode'); }

Anda juga dapat menggunakan metode util.debuglog Node untuk menampilkan pesan kesalahan secara kondisional, mis

 import { debuglog } from 'util'; const myappDebug = debuglog('myapp'); myappDebug('log something');

Aplikasi ini hanya akan menampilkan pesan log ketika NODE_DEBUG disetel ke myapp atau wildcard seperti * atau my*.

Gunakan Opsi Baris Perintah Node.js

Skrip node biasanya diluncurkan dengan node diikuti dengan nama skrip entri:

 node app.js

Anda juga dapat mengatur opsi baris perintah untuk mengontrol berbagai aspek runtime. Tanda yang berguna untuk debugging meliputi:

• --check
  sintaks memeriksa skrip tanpa mengeksekusi
• --trace-warnings
  hasilkan jejak tumpukan saat Janji JavaScript tidak diselesaikan atau ditolak
• --enable-source-maps
  tampilkan peta sumber saat menggunakan transpiler seperti TypeScript
• --throw-deprecation
  peringatkan saat fitur Node.js yang tidak digunakan lagi
• --redirect-warnings=file
  mengeluarkan peringatan ke file daripada stderr
• --trace-exit
  mengeluarkan jejak tumpukan saat process.exit() dipanggil.

Keluarkan Pesan ke Konsol

Mengeluarkan pesan konsol adalah salah satu cara paling sederhana untuk men-debug aplikasi Node.js:

 console.log(`someVariable: ${ someVariable }`);

Beberapa pengembang menyadari ada banyak metode konsol lainnya:

console.log() juga menerima daftar nilai yang dipisahkan koma:

 let x = 123; console.log('x:', x); // x: 123

…walaupun destrukturisasi ES6 menawarkan keluaran serupa dengan sedikit usaha:

 console.log({ x }); // { x: 123 }

Perintah console.dir() perintah pretty-prints properti objek dengan cara yang sama seperti util.inspect():

 console.dir(myObject, { depth: null, color: true });

Kontroversi Konsol

Beberapa pengembang mengklaim Anda tidak boleh menggunakan console.log() karena:

• Anda mengubah kode dan mungkin mengubah sesuatu atau lupa menghapusnya, dan
• Tidak perlu ketika ada opsi debugging yang lebih baik.

Jangan percaya siapa pun yang mengklaim bahwa mereka tidak pernah menggunakan console.log() ! Logging cepat dan kotor, tetapi semua orang menggunakannya di beberapa titik. Gunakan alat atau teknik apa pun yang Anda inginkan. Memperbaiki bug lebih penting daripada metode yang Anda gunakan untuk menemukannya.

Gunakan Sistem Pencatatan Pihak Ketiga

Sistem logging pihak ketiga menyediakan fitur yang lebih canggih seperti tingkat pengiriman pesan, verbositas, penyortiran, keluaran file, pembuatan profil, pelaporan, dan banyak lagi. Solusi populer termasuk kabin, loglevel, morgan, pino, signale, storyboard, pelacak, dan winston.

Gunakan Inspektur V8

Mesin JavaScript V8 menyediakan klien debugging yang dapat Anda gunakan di Node.js. Mulai aplikasi menggunakan inspeksi simpul, mis

 node inspect app.js

Debugger berhenti pada baris pertama dan menampilkan prompt debug>:

 $ node inspect .\mycode.js < Debugger listening on ws://127.0.0.1:9229/143e23fb < For help, see: https://nodejs.org/en/docs/inspector < ok < Debugger attached. < Break on start in mycode.js:1 > 1 const count = 10; 2 3 for (i = 0; i < counter; i++) { debug>

Masukkan bantuan untuk melihat daftar perintah. Anda dapat melangkah melalui aplikasi dengan memasukkan:

• cont atau c : melanjutkan eksekusi
• berikutnya atau n : jalankan perintah berikutnya
• step atau s : masuk ke fungsi yang dipanggil
• out or o : keluar dari fungsi dan kembali ke pernyataan panggilan
• jeda : jeda kode yang sedang berjalan
• watch('myvar') : menonton variabel
• setBreakPoint() atau sb() : mengatur breakpoint
• restart : mulai ulang skrip
• .exit atau Ctrl | Cmd + D : keluar dari debugger

Diakui, opsi debugging ini memakan waktu dan berat. Gunakan hanya ketika tidak ada pilihan lain, seperti ketika Anda menjalankan kode di server jauh dan tidak dapat terhubung dari tempat lain atau menginstal perangkat lunak tambahan.

Gunakan Browser Chrome untuk Men-debug Kode Node.js

Opsi inspeksi Node.js yang digunakan di atas memulai server Web Socket yang mendengarkan port localhost 9229. Opsi ini juga memulai klien debug berbasis teks, tetapi dimungkinkan untuk menggunakan klien grafis — seperti yang ada di Google Chrome dan berbasis Chrome browser seperti Chromium, Edge, Opera, Vivaldi, dan Brave.

Untuk men-debug aplikasi web biasa, mulai dengan opsi –inspect untuk mengaktifkan server Soket Web debugger V8:

 node --inspect index.js

Catatan:

• index.js dianggap sebagai skrip entri aplikasi.
• Pastikan Anda menggunakan --inspect dengan tanda hubung ganda untuk memastikan Anda tidak memulai klien debugger berbasis teks.
• Anda dapat menggunakan nodemon alih-alih node jika Anda ingin memulai ulang aplikasi secara otomatis saat file diubah.

Secara default, debugger hanya akan menerima koneksi masuk dari mesin lokal. Jika Anda menjalankan aplikasi di perangkat lain, mesin virtual, atau wadah Docker, gunakan:

 node --inspect=0.0.0.0:9229 index.js

Anda juga dapat menggunakan --inspect-brk alih-alih --inspect untuk menghentikan pemrosesan (mengatur breakpoint) pada baris pertama sehingga Anda dapat menelusuri kode dari awal.

Buka browser berbasis Chrome dan masukkan chrome://inspect di bilah alamat untuk melihat perangkat lokal dan jaringan:

Jika aplikasi Node.js Anda tidak muncul sebagai Remote Target , baik:

• Klik Buka DevTools khusus untuk Node dan pilih alamat dan port, atau
• Centang Temukan target jaringan , klik Konfigurasi , lalu tambahkan alamat IP dan port perangkat tempat perangkat dijalankan.

Klik tautan inspeksi Target untuk meluncurkan klien debugger DevTools. Ini harus familier bagi siapa saja yang menggunakan DevTools untuk debugging kode sisi klien:

Beralih ke panel Sumber . Anda dapat membuka file apa pun dengan menekan Cmd | Ctrl + P dan masukkan nama filenya (seperti index.js).

Namun, lebih mudah untuk menambahkan folder proyek Anda ke ruang kerja. Ini memungkinkan Anda memuat, mengedit, dan menyimpan file langsung dari DevTools (apakah menurut Anda itu ide yang bagus adalah masalah lain!)

1. Klik + Tambahkan folder ke ruang kerja
2. Pilih lokasi proyek Node.js Anda
3. Tekan Setuju untuk mengizinkan perubahan file

Anda sekarang dapat memuat file dari pohon direktori sebelah kiri:

Klik nomor baris mana pun untuk menyetel titik henti sementara yang dilambangkan dengan penanda biru.

Debugging didasarkan pada breakpoints . Ini menentukan di mana debugger harus menjeda eksekusi program dan menunjukkan status program saat ini (variabel, tumpukan panggilan, dll.)

Anda dapat menentukan sejumlah breakpoint di antarmuka pengguna. Pilihan lain adalah menempatkan debugger; pernyataan ke dalam kode Anda, yang berhenti ketika debugger terpasang.

Muat dan gunakan aplikasi web Anda untuk mencapai pernyataan di mana breakpoint diatur. Dalam contoh di sini, http://localhost:3000/ dibuka di browser apa pun, dan DevTools akan menghentikan eksekusi pada baris 44:

Panel sebelah kanan menunjukkan:

• Deretan ikon aksi (lihat di bawah).
• Panel Watch memungkinkan Anda memantau variabel dengan mengklik ikon + dan memasukkan namanya.
• Panel Breakpoints menampilkan daftar semua breakpoints dan memungkinkan mereka untuk diaktifkan atau dinonaktifkan.
• Panel Cakupan menunjukkan status semua variabel lokal, modul, dan global. Anda akan paling sering memeriksa panel ini.
• Panel Call Stack menunjukkan hierarki fungsi yang dipanggil untuk mencapai titik ini.

Deretan ikon tindakan ditampilkan di atas Dijeda saat breakpoint :

Dari kiri ke kanan, ini melakukan tindakan berikut:

• melanjutkan eksekusi : Lanjutkan pemrosesan hingga breakpoint berikutnya
• step over : Jalankan perintah berikutnya tetapi tetap dalam blok kode saat ini — jangan melompat ke fungsi apa pun yang dipanggilnya
• masuk ke : Jalankan perintah berikutnya dan lompat ke fungsi apa pun seperlunya
• step out : Lanjutkan pemrosesan hingga akhir fungsi dan kembali ke perintah panggilan
• langkah : Mirip dengan langkah ke kecuali itu tidak akan melompat ke fungsi async
• nonaktifkan semua breakpoint
• jeda pada pengecualian : Menghentikan pemrosesan saat terjadi kesalahan.

Breakpoint Bersyarat

Terkadang perlu untuk menggunakan sedikit lebih banyak kontrol atas breakpoints. Bayangkan Anda memiliki loop yang menyelesaikan 1.000 iterasi, tetapi Anda hanya tertarik pada status yang terakhir:

 for (let i = 0; i < 1000; i++) { // set breakpoint here }

Daripada mengklik lanjutkan eksekusi 999 kali, Anda dapat mengklik kanan baris, memilih Add conditional breakpoint , dan memasukkan kondisi seperti i = 999 :

Chrome menunjukkan breakpoint bersyarat dalam warna kuning, bukan biru. Dalam hal ini, breakpoint hanya dipicu pada iterasi terakhir dari loop.

Poin Log

Poin log secara efektif mengimplementasikan console.log() tanpa kode apa pun! Ekspresi dapat menjadi output ketika kode mengeksekusi baris apa pun, tetapi tidak menghentikan pemrosesan, tidak seperti breakpoint.

Untuk menambahkan titik log, klik kanan baris mana saja, pilih Tambahkan titik log , dan masukkan ekspresi, misalnya 'loop counter i', i :

Konsol DevTools mengeluarkan loop counter i: 0 ke loop counter i: 999 pada contoh di atas.

Gunakan Kode VS untuk Men-debug Aplikasi Node.js

VS Code, atau Visual Studio Code, adalah editor kode gratis dari Microsoft yang menjadi populer di kalangan pengembang web. Aplikasi ini tersedia untuk Windows, macOS, dan Linux dan dikembangkan menggunakan teknologi web dalam kerangka Electron.

VS Code mendukung Node.js dan memiliki klien debugging bawaan. Sebagian besar aplikasi dapat di-debug tanpa konfigurasi apa pun; editor akan secara otomatis memulai debugging server dan klien.

Buka file awal (seperti index.js), aktifkan panel Run and Debug , klik tombol Run and Debug , dan pilih lingkungan Node.js. Klik garis mana saja untuk mengaktifkan breakpoint yang ditampilkan sebagai ikon lingkaran merah. Kemudian, buka aplikasi di browser seperti sebelumnya — VS Code menghentikan eksekusi saat breakpoint tercapai:

Panel Variables , Watch , Call Stack , dan Breakpoints mirip dengan yang ditampilkan di Chrome DevTools. Panel Skrip yang Dimuat menunjukkan skrip mana yang telah dimuat, meskipun banyak yang bersifat internal ke Node.js.

Bilah alat ikon tindakan memungkinkan Anda untuk:

• melanjutkan eksekusi : Lanjutkan pemrosesan hingga breakpoint berikutnya
• step over : Jalankan perintah berikutnya tetapi tetap dalam fungsi saat ini — jangan melompat ke fungsi apa pun yang dipanggilnya
• masuk ke : Jalankan perintah berikutnya dan lompat ke fungsi apa pun yang dipanggilnya
• step out : Lanjutkan pemrosesan hingga akhir fungsi dan kembali ke perintah panggilan
• restart aplikasi dan debugger
• hentikan aplikasi dan debugger

Seperti Chrome DevTools, Anda dapat mengeklik kanan baris mana pun untuk menambahkan Breakpoint bersyarat dan Titik log .

Untuk informasi selengkapnya, lihat Debugging di Visual Studio Code.

Konfigurasi Debug Lanjutan Kode VS

Konfigurasi VS Code lebih lanjut mungkin diperlukan jika Anda ingin men-debug kode di perangkat lain, mesin virtual, atau perlu menggunakan opsi peluncuran alternatif seperti nodemon.

VS Code menyimpan konfigurasi debug dalam file launch.json di dalam direktori .vscode di proyek Anda. Buka panel Jalankan dan Debug , klik buat file launch.json , dan pilih lingkungan Node.js untuk membuat file ini. Contoh konfigurasi disediakan:

Sejumlah pengaturan konfigurasi dapat didefinisikan sebagai objek dalam larik "configurations" . Klik Tambah Konfigurasi… dan pilih opsi yang sesuai.

Konfigurasi Node.js individual dapat:

1. Luncurkan proses itu sendiri, atau
2. Lampirkan ke server Web Socket debugging, mungkin berjalan di mesin jarak jauh atau wadah Docker.

Misalnya, untuk menentukan konfigurasi nodemon, pilih Node.js: Nodemon Setup dan ubah skrip entri “program” jika perlu:

 { // custom configuration "version": "0.2.0", "configurations": [ { "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "name": "nodemon", "program": "${workspaceFolder}/index.js", "request": "launch", "restart": true, "runtimeExecutable": "nodemon", "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" } ] }

Simpan file launch.json dan nodemon ("nama" konfigurasi) muncul di daftar drop-down di bagian atas panel Run and Debug . Klik ikon run hijau untuk mulai menggunakan konfigurasi itu dan meluncurkan aplikasi menggunakan nodemon:

Seperti sebelumnya, Anda dapat menambahkan breakpoint, breakpoint bersyarat, dan titik log. Perbedaan utamanya adalah nodemon akan secara otomatis me-restart server Anda ketika sebuah file dimodifikasi.

Untuk informasi lebih lanjut, lihat konfigurasi Peluncuran Kode VS.

Ekstensi Kode VS berikut juga dapat membantu Anda men-debug kode yang dihosting di lingkungan server jarak jauh atau terisolasi:

• Jarak Jauh — Kontainer: Hubungkan ke aplikasi yang berjalan di kontainer Docker
• Jarak Jauh — SSH: Sambungkan ke aplikasi yang berjalan di server jauh
• Jarak Jauh — WSL: Sambungkan ke aplikasi yang berjalan di Subsistem Windows untuk Linux (WSL).

Opsi Debug Node.js Lainnya

Panduan Debugging Node.js memberikan saran untuk berbagai editor teks dan IDE, termasuk Visual Studio, JetBrains WebStorm, Gitpod, dan Eclipse. Atom menawarkan ekstensi node-debug, yang mengintegrasikan debugger Chrome DevTools ke dalam editor.

Setelah aplikasi Anda aktif, Anda dapat mempertimbangkan untuk menggunakan layanan debugging komersial seperti LogRocket dan Sentry.io, yang dapat merekam dan memutar kesalahan klien dan server yang dihadapi oleh pengguna nyata.

Butuh bantuan untuk men-debug aplikasi? Mulai di sini Klik untuk Tweet

Ringkasan

Secara historis, debugging JavaScript sulit dilakukan, tetapi ada peningkatan besar selama dekade terakhir. Pilihannya sama baiknya — jika tidak lebih baik — daripada yang disediakan untuk bahasa lain.

Gunakan alat apa pun yang praktis untuk menemukan masalah. Tidak ada yang salah dengan console.log() untuk berburu bug cepat, tetapi Chrome DevTools atau VS Code mungkin lebih disukai untuk masalah yang lebih kompleks. Alat tersebut dapat membantu Anda membuat kode yang lebih kuat, dan Anda akan menghabiskan lebih sedikit waktu untuk memperbaiki bug.

Praktik debug Node.js apa yang Anda yakini? Bagikan di bagian komentar di bawah!