lifelong learner — urip iku urup, currently working on accenture.

Cara Melakukan Debug Kode pada Visual Studio Code

0
Degananda.com -

debugging-bugs-visual-studio-code

Pada dunia software engineering, debuging adalah aktivitas yang dilakukan oleh developer untuk mencari dan menyelesaikan problamatika suatu bugs kode. Bugs adalah kode yang tidak seharusnya ditulis dikarenakan kode tersebut mengubah fungsionalitas kode menjadi tidak sesuai dengan tujuan utamannya.

tools yang digunakan untuk melakukan proses debugging (pencarian dan penyelesaikan terhadap bug) disebut dengan debuggers.

Terdapat beberapa teknik debugging yang dapat dilakukan agar dapat mencari dan memecahkan bugs tersebut. Salah satu teknik yang biasa dilakukan adalah dengan control flow analysis. Sesuai dengan namannya, control flow analisis berarti melakukan proses cek dan ricek pada setiap flow yang ada dikode. Mulai dari for loop, branching, switch, fungsi dan lain sebagainnya.

Cara Melakukan Debug Kode pada Visual Studio Code

IDE besutan microsoft ini (visual studio code) telah memiliki built in tools untuk melakukan proses debugging yang dapat mensupport berbagai bahasa pemrograman mulai dari javascript, C#, java dan lain sebagainya. Hal ini akan tergantung pada extension yang di install pada visual studio code.

Sebagai contoh, pada kasus javascript melalui potongan kode dibawah ini

let panjang = 5;
let lebar =  5;
for(var i = 1; < = panjang; i++){
    let paragraph = "";
    for(var b = 1; b kurang dari lebar; b++){
        paragraph += "A";
    }
    console.log(paragraph);
}
// end of <code> 

kode diatas secara umum, akan membuat motif segi empat yang di susun dari huruf “A” dengan ukuran 5×5 (panjang = 5 dan lebar = 5).

contoh-bugs.JPG
motif kotak yang dihasilkan tidak sesuai dengan tujuan awal (5×5)

Namun, kode diatas memiliki bugs. Apabila kode tersebut dijalankan akan menghasilkan motif kotak dengan ukuran 5×4.

Melakukan teknik control flow analysis dengan menggunakan debuggers pada visual studio code.

Salah satu cara untuk menemukan bugs pada kode diatas adalah dengan melakukan debugging melalui teknik control flow analysis. Metode ini berarti akan memperhatikan setiap nilai variabel disetiap flow  yang dikode. Pada kasus ini, terdapat dua buah loop. Loop kedua berada didalam loop pertama.

visual studio kode memilki tools untuk melihat setiap nilai variabel saat kode tersebut dieksekusi.

langkah pertama sebelum dapat menggunakan debuggers pada visual studio code adalah membuat file launch.json.

create-launch.json.JPG

Pilih menu “run” atau gunakan shortcut (Ctrl + Shift + D) untuk membuat menginisiasi file launch.json. Kemudian klik “create a launch.json file”.

nodejs-environment-vsc-debuggers.jpg

Lalu, pilih environment yang sesuai dengan jenis bahasa pemrograman yang digunakan. Pada contoh kali ini, kode yang ditulsikan adalah untuk Node JS. Maka, secara otomatis file launch.json akan terbuat pada workspace.

{
"version": "0.2.0",
"configurations": [
  {
   "type": "node",
   "request": "launch",
   "name": "Launch Program",
   "skipFiles": [
     "/**"
    ],
"program": "${workspaceFolder}\\index.js"
  }
]
}

add-configuration-launch-json.JPGlaunch json tersebut belum final karean auto generated tanpa memahami bagaimana program kita harus dijalankan. disarankan untuk menghapus nilai konfigurasi dan tambahkan script launch program secara manual.

dengan cara -> Pilih Nodejs : Launch program

vsc-debuggers-launch-program.jpg

dibawah ini adalah hasil ahir dari launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Program",
            "program": "${workspaceFolder}/index.js",
            "request": "launch",
            "skipFiles": [
                "/**"
            ],
            "type": "pwa-node"
        }
    ]
}

selanjutnya, cukup jalankan lunch program pada menu debuggers tersebut lalu pilih environment yang telah buat sebelumnya (launch.json).

launch-debuggers-program.JPG

kemudian pilih menu run dan pilih start debugging.

breakpoint-debuggers-vsc.JPG

lalu, tambahkan breakpoint pada kode tersebut. Pada langkah ini, tujuan utamannya adalah melakukan monitoring terhadap variabel paragraph di line 5. Tambahkan breakpoint tersebut pada editor visual studio code.

debug-vsc-full-nodejs.JPG

dan pada ahirnya di tab debug console (berada dibawah kode editor) akan muncul nilai varible paragraph, yang akan diprint disetiap prosesesi for loop.

debug-next-step-play.JPG

Klik ikon conitnue (yang dihighlight dengan warna biru dalam lingkaran), untuk menjalankan debugging ke step selanjutnya.

dari proses debugging diatas kita tahu bahwa pada setiap proses loop ternyata hanya empat buah huruf “A” yang di tampilkan di konsol. Ini berarti ada masalah pada loop yang kedua terutama di sisi proses pendifinisian loop condition

for(var b = 1; b < lebar; b++){
// end of <code> 

seharusnya menjadi seperti dibawah ini

for(var b = 1; b <=lebar; b++){
// end of <code> 

done. bug fixed. jalankan debugger sekali lagi, maka nilai A akan diprint sebanyak 5 kali disetiap proses loop.

fixed-setelah-debug-bug-fixing.JPG

opsin lainnya adalah dengan menggunakan menu watch. Tambahkan nama variabel yang ingin dilakukan “watch”. contoh jika ingin melakukan watch pada variabel “paragraph” maka tambahkan variabel “paragraph” dimenu watch.

watch-debugggers-vsc.JPG

(Visited 82 times, 1 visits today)

Leave a Reply