Cara menggunakan DEBUGGERS pada JavaScript

VS (atau Virtual Studio) Code adalah editor kode gratis yang mendukung semua bahasa pemrograman utama. Itu membuatnya cepat dan mudah bagi pemrogram untuk melihat pengkodean dan mengeditnya jika perlu. Ini berfungsi sebagai IDE untuk orang yang menulis kode. tapi itu tidak mencegah bug. Untungnya, VSCode memiliki alat debugging yang bagus yang dibangun ke dalam program.

Dalam artikel ini, kami akan menunjukkan cara menggunakan debugger pada kode VS.

Apa itu Debugger?

Saat Anda membuat kode, akan ada saatnya kode yang Anda tulis mengalami beberapa masalah. Masalah-masalah ini mungkin bukan kesalahan pembuat kode, tetapi hanya muncul karena sesuatu yang rusak sendiri. “Bug” ini dapat menyebabkan program berhenti bekerja. Oleh karena itu, penting bagi pembuat kode untuk menemukan dan menghilangkannya.

Baca artikel lain:

A debugger adalah program yang menemukan bug dan akan memperbaikinya secara otomatis atau menyarankan cara untuk melakukannya. VSCode memiliki satu bawaan, tetapi ada banyak metode berbeda untuk memanfaatkan debugger. Berikut adalah beberapa cara untuk menggunakan Debugger di VS Code.

Debugger memiliki JavaScript, TypeScript, dan semua bahasa lain yang menggunakan compiler Java. Bahasa lain seperti Python atau Ruby akan membutuhkan ekstensi yang diinstal.

Untuk melakukannya, ikuti langkah-langkah berikut:
Di menu atas, pilih “Instal Debugger Tambahan.” Pilih bahasa pemrograman mana yang ingin Anda gunakan. Bahasa tersebut akan diunduh dan dimasukkan ke dalam bahasa pemrograman Anda. basis data. Anda sekarang dapat menjalankan debugger menggunakan bahasa yang diinginkan.
Selanjutnya, kita akan melihat cara menggunakan Debugger di VSCode.

Membuat Node.js Database

Node.js adalah platform yang menjalankan debugger VSCode sebagai default. Anda membutuhkannya untuk melacak semua yang terjadi dengan kode Anda. Ini membuatnya lebih mudah untuk mengidentifikasi masalah. Juga, ada beberapa fitur di debugger VSCode yang hanya berfungsi dengan JavaScript. Anda harus membuat program sederhana, program “Hello, World” yang terkenal. Setelah Anda menyelesaikan langkah ini, menjalankan debugger akan lancar dan cepat.

Untuk membuat Node.js, ikuti langkah-langkah berikut:
Sebelum memulai, pastikan Anda telah mengunduh dan menginstal Node.js di komputer Anda.Untuk melihat apakah Node.js diinstal, buat terminal baru dan ketik “node—version” di terminal. Versi Node.js yang Anda instal akan muncul. Buat folder kosong di Desktop Anda dan beri nama “hello.” Buka VSCode dan di command prompt, ketik kode berikut: mkdir hellocd hellocode. Temukan toolbar File Explorer. File Anda akan muncul dengan nama “Halo.” Klik tombol “File Baru” di sebelah kanan nama file. Beri nama file baru “app.js” Pada perintah konsol, ketik kode berikut:var msg = ‘Hello World’;console.log(msg); Simpan file dengan menekan “Ctrl + S” pada keyboard. Di terminal, ketik node app.js. Outputnya akan mengatakan “Halo, Dunia.”
Selamat, Anda telah menulis program pertama Anda dan sekarang siap untuk menjalankan debugger.

Run View

VSCode Dari sini, Anda akan dapat menggunakan semua fitur debug VSCode. Saat pertama kali memulai, Anda harus membiasakan diri dengan semua informasi yang dimiliki debugger untuk Anda. Ini juga termasuk bilah tugas tempat Anda dapat mengonfigurasi pengaturan dan perintah debugging.

Untuk mengakses Tampilan Jalankan, lakukan hal berikut:
Di bilah sisi VSCode, pilih ikon “Jalankan”. Anda juga dapat mengaksesnya dengan cepat dengan menekan “Ctrl+Shift+D” pada keyboard Anda. Sebuah menu akan muncul dengan tiga opsi. Untuk tujuan panduan ini, pilih opsi “buat peluncuran.js”.
Buat Program Launch.js

Program launch.js disebut program konfigurasi peluncuran. Ini akan secara otomatis menyimpan pengaturan baru dan perubahan konfigurasi yang Anda buat saat debugging. Ini akan menghemat waktu Anda jika Anda mengalami bug yang sama yang sebelumnya terjadi. Anggap saja sebagai pencatat untuk coding Anda.

Perhatikan bahwa Anda harus memiliki program ini sebelum akhirnya dapat menjalankan debugger.

Berikut cara melakukannya:
Dalam menu “Run view”, pilih “create a launch.js .”VSCode akan secara otomatis memilih lingkungan debug, tetapi jika tidak mendeteksi apa pun, pilih “Node.js.” Kembali ke File Explorer dengan menekan “Ctrl+Shift+E.” Periksa di bawah folder “hello.” Seharusnya ada tab bernama “.vscode” dan launch.json seharusnya ada di tab itu. Untuk memeriksa atribut debugger, tekan “Ctrl+Space”.
Menjalankan Debugger

Sekarang setelah semua persiapan selesai, kita dapat memulai debugging kita sidang. Untuk menjalankan debugger, pertama-tama kita harus memilih konfigurasi peluncuran kita.
Dalam tampilan Jalankan VSCode, temukan “Dropdown konfigurasi.” Pilih “Luncurkan Program.” Setelah Anda memilihnya, tekan F5 untuk memulai debugger. Anda juga dapat mengakses menu debugger dengan mengakses Command Palette terlebih dahulu dengan menekan “Ctrl+Shift+P” Ketik “.debug” dan pilih konfigurasi Anda.
Menambahkan yang Baru Configuration

Dengan bug yang sangat sulit, ada kemungkinan database yang Anda miliki di VSCode tidak memiliki konfigurasi yang Anda butuhkan. Untungnya, Anda dapat menambahkan konfigurasi baru ke debugger.
Dalam menu “Jalankan”, pilih “Tambahkan konfigurasi.” Buka IntelliSense (Shift+Spasi) untuk membuka menu, lalu pilih “Tambahkan konfigurasi.” Di dalam larik konfigurasi IntelliSense , pilih untuk menambahkan konfigurasi lain.
Launch vs. Attach Configurations

VSCode memiliki dua mode debugging – “launch” dan “attach.” Setiap mode memiliki pro dan kontra sendiri dan masing-masing cocok untuk jenis pembuat kode tertentu. Berikut ini uraian singkat metodologi untuk setiap mode.

Pertama, mari kita bahas konfigurasi “peluncuran”. Konfigurasi peluncuran berarti bahwa Anda, pembuat kode, sedang menulis kode atau “resep” untuk sesi debugging Anda.

Konfigurasi “Lampirkan”, di sisi lain, melibatkan Anda melampirkan konfigurasi dari luar VSCode saat program di VSCode sedang berjalan. Anda tidak membangun apa pun dari awal, tetapi menggunakan kode yang dibuat sebelumnya untuk debug.

Auto Attach

Lampirkan otomatis adalah fitur yang secara otomatis akan melampirkan debugger Node ke proses Node.js tertentu di terminal VSCode. Untuk mengaktifkan Lampirkan Otomatis, ikuti langkah berikut:
Untuk mengakses palet perintah, tekan “Ctrl+Shift+P” pada keyboard Anda. Saat menu muncul, pilih “Toggle Auto Attach.” Bilah Lampirkan Otomatis akan muncul di bagian atas.Setelah Anda mengaktifkan Lampirkan otomatis, Anda harus memulai ulang perangkat Anda.Anda juga dapat membuat terminal baru dan Lampirkan otomatis akan tetap diaktifkan.
Lampirkan otomatis hadir dengan tiga mode berbeda untuk dipilih . Masing-masing memiliki fungsinya sendiri, jadi pastikan untuk memilih yang tepat. Berikut adalah tiga mode:
“Smart” – Ini adalah opsi default. Saat Anda menjalankan skrip yang tidak ada di folder “node_modules” Anda, skrip akan otomatis di-debug.“Always” – Setiap proses yang menggunakan Node.js yang diluncurkan di terminal terintegrasi akan di-debug.“OnlyWithFlag” – Ini opsi hanya akan men-debug proses yang ditandai dengan tanda “- -inspect” atau “- -inspect-brk” pada proses tersebut.
Lampirkan ke Proses Node

Anda juga dapat melampirkan debugger Node.js ke proses secara manual. Ini membutuhkan sedikit lebih banyak pekerjaan tetapi akan menghemat waktu Anda jika Anda tahu persis proses mana yang menyebabkan masalah. Untuk melampirkan debugger ke proses Node.js, lakukan hal berikut:
Buka palet perintah dengan menekan “Ctrl+Shift+P” pada keyboard Anda. Pilih “Lampirkan ke Proses Node” dari menu. Dari sini, Anda akan melihat semua dari proses yang dapat di-debug oleh debugger Node.js. Pilih proses mana yang ingin Anda lampirkan debuggernya.
JavaScript Debug Terminal

Menambahkan terminal debug JavaScript cepat dan mudah dan merupakan opsi yang bagus jika Anda ingin melakukan perbaikan bug umum atau umum. Pertama, Anda harus membuat terminal.
Buka palet perintah dengan menekan “Ctrl+Shift+P” pada keyboard Anda. Pilih “Debug: Create JavaScript Debug Terminal” dari menu. Anda juga dapat mengakses opsi ini dengan memilihnya di menu tarik-turun terminal. Debugger akan dilampirkan ke proses Anda saat ini. Ini akan berjalan secara otomatis dan memperbaiki bug apa pun dalam kode yang dideteksi.
Menyiapkan Konfigurasi “Lampirkan”

Opsi ini lebih banyak bekerja daripada yang diuraikan di atas, tetapi memungkinkan Anda mengonfigurasi konfigurasi debug secara detail.
Konfigurasi “lampirkan” sederhana biasanya akan terlihat seperti kumpulan kode ini{ “name”: “Attach to Process”, “type”: “node”, “request”: “attach”, “port”: 9229}9229 adalah nomor port default untuk “- -inspeksi” dan opsi “- – periksa-brk”. Untuk mengubah nomor port, ketikkan berikut ini: “- – inspect =95430”Catatan: angka-angka ini hanyalah contoh. Gunakan nomor port mana saja yang sesuai untuk Anda. Setelah Anda mengubah nomor port, ubahlah dalam konfigurasi lampiran yang Anda tulis.
Untuk melampirkan debugger ke proses yang saat ini tidak ada dalam debugger, lakukan hal berikut:
Anda akan perlu menentukan proses mana dengan memasukkan ID dalam string kode yang terlihat seperti berikut:{ “name”: “Attach to Process”, “type”: “node”, “request”: “attach”, “processId” : “53426”}Cukup membosankan untuk memasukkan setiap ID proses secara manual. Untungnya, Anda dapat menampilkan seluruh daftar dengan memasukkan “${command:PickProcess}” di bagian “processId” dari string.
Multi-Target Debugging

Akan ada saat-saat di mana ada bencana pengkodean dan kode Anda penuh dengan bug dan tidak ada apa-apa bekerja. Penyadapan multi-target didukung oleh VSCode dan memungkinkan Anda menjalankan beberapa debugger pada banyak proses. Untuk memulai debugging multi-target, yang perlu Anda lakukan adalah memulai sesi debugging lain tanpa menutup yang pertama.

Setelah Anda memulai debugging multi-target, setiap sesi akan muncul sebagai elemen individual di bagian atas dalam menu “CALL Stacks” . Anda dapat memilih sesi mana yang ingin Anda aktifkan.

Bilah alat debug dan tindakan debug apa pun yang dilakukan akan dilakukan pada proses aktif, jadi pastikan yang Anda ingin kerjakan aktif.

Stop Debugging

Anda akhirnya berhasil mencapai akhir dan semua bug sial itu telah dihilangkan. Sekarang Anda harus mematikan operasi debugging Anda. Penting untuk melakukan ini untuk memastikan bahwa pekerjaan Anda disimpan.

Konfigurasi “Lampirkan”
Pilih “Debug: Stop” pada bilah alat debug atau setelah membuka palet perintah dengan menekan “Ctrl+Shift+P.” Setelah mengklik berhenti, tombol Debugger Node.js akan terlepas dan dimatikan. Namun, proses yang Anda masukkan akan tetap berjalan. Untuk menghentikan proses yang sedang berjalan, buka bilah tugas dan pilih “Stop.”
“Luncurkan” Konfigurasi
Setelah memilih “Stop,” VSCode akan meminta Anda untuk mematikan dengan mengirim sinyal SIGINT.Sebelum mencegat sinyal, bersihkan apa pun dan kemudian matikan.Jika tidak ada breakpoints (atau masalah) dalam kode shutdown itu, sesi akan berakhir.
Debuggers Demystified

Alat Debugger VSCode sangat berguna untuk Anda miliki. Namun, ada banyak pilihan dan mungkin sulit untuk memutuskan metode mana yang ingin Anda gunakan. Kami telah mencantumkan metode tingkat pemula dan lanjutan untuk menggunakan debugger, jadi Anda memiliki opsi untuk melakukan debug sesuai keinginan.

Apakah Anda menggunakan debugger VSCode? Metode mana yang menurut Anda paling baik? Beri tahu kami di bagian komentar di bawah.