Sebelum kita menambahkan beberapa library untuk keperluan logger, state management dll kita perlu membahas tentang proses Debugging.

Debugging adalah proses untuk menemukan dan mengatasi bug yang ada pada suatu aplikasi.

Dalam proses development sebuah aplikasi, debugging menjadi proses yang dilakukan secara terus menerus.

Pada bagian ini kita akan menjelaskan proses debugging pada aplikasi DinoTes menggunakan fitur debugging yang sudah ada di Visual Studio Code.

Debugger Extension

Visual Studio Code memiliki ratusan extension atau ekstensi yang dapat kita manfaatkan untuk menambahkan fitur, themes dll.

Keberadaan ekstensi yang sangat banyak inilah yang membuat VS Code memiliki kemampuan yang tidak kalah dengan IDE (Integrated Development Environment).

VS code memiliki fitur bawaan untuk debugging aplikasi JavaScript menggunakan Node.js.

Sedangkan untuk debugging selain JavaScript kita bisa tambahkan ekstensi debugger dari VS Code Marketplace.

Memulai Debugging

Untuk memulai debugging kita bisa gunakan Run view pada Activity Bar.

Run view ini akan menampilkan semua informasi yang berkaitan dengan Running & Debugging.

Sebelum itu kita perlu membuat sebuah launch configuration.

Launch Configurations

Launch Configurations adalah sebuah file berbentuk json yang menyimpan informasi konfigurasi dan pengaturan debugging.

File ini bernama launch.json dan disimpan dalam folder .vscode.

Untuk membuatnya klik Run View kemudian klik create a launch.json file.

Klik button Run and Debug maka VS Code secara otomatis mencoba mendeteksi environment yang digunakan untuk proses debug.

Jika tidak berhasil kita harus memilihnya secara manual.

Kita akan gunakan Node.js.

Isi dari launch.json:

Copy
1{
2    // Use IntelliSense to learn about possible attributes.
3    // Hover to view descriptions of existing attributes.
4    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5    "version": "0.2.0",
6    "configurations": [
7        {
8            "type": "node",
9            "request": "launch",
10            "name": "Launch Program",
11            "skipFiles": [
12                "<node_internals>/**"
13            ],
14            "program": "${workspaceFolder}/bin/www"
15        }
16    ]
17}

Ada 3 attribute wajib yang harus ada di setiap konfigurasi, yaitu:

• type
  jenis dari debugger yang digunakan, node untuk Node.js, php untuk PHP dst.

• request
  jenis dari request, apakah launch atau attach.

• name
  nama dari konfigurasi

Pada satu project kita bisa menambahkan lebih dari satu konfigurasi.

Contoh dibawah ini untuk debug aplikasi menggunakan Node.js dan Google Chrome.

Copy
1{
2    // Use IntelliSense to learn about possible attributes.
3    // Hover to view descriptions of existing attributes.
4    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5    "version": "0.2.0",
6    "configurations": [
7        {
8            "name": "Launch Chrome",
9            "request": "launch",
10            "type": "pwa-chrome",
11            "url": "http://localhost:8080",
12            "webRoot": "${workspaceFolder}"
13        },
14        {
15            "type": "node",
16            "request": "launch",
17            "name": "Launch Program",
18            "skipFiles": [
19                "<node_internals>/**"
20            ],
21            "program": "${workspaceFolder}/bin/www"
22        },
23    ]
24}

Setelah membuat launch.json kita bisa memulai proses debug dengan klik button Run atau menggunakan tombol keyboard F5.

Debug Actions

Debug Actions adalah sekumpulan perintah yang biasa digunakan dalam navigasi proses debugging.

• Continue / Pause untuk menghentikan atau melanjutkan proses debug.

• Step Into
  Eksekusi statement saat ini kemudian berhenti di statement selanjutnya.
  Jika statement adalah sebuah function maka debugger akan masuk (step into) dan berhenti pada statement di dalam function tersebut.

• Step Over
  Eksekusi statement saat ini kemudian berhenti di statement selanjutnya.
  Jika statement adalah sebuah function maka debugger akan mengeksekusi function tersebut dan berhenti di statement setelah function tersebut.

• Step Out
  Keluar dari suatu function dan lanjutkan eksekusi sampai breakpoints selanjutnya.

• Restart
  Memulai ulang proses debug

• Stop
  Menghentikan proses debug

Debug actions akan muncul di debug toolbar di sebelah atas editor saat proses debug sudah dijalankan.

Breakpoints

Breakpoints adalah sebuah posisi dimana aplikasi atau program akan berhenti.

Menambah breakpoint dapat dilakukan dengn cara klik di area sebelah kiri editor atau menggunakan tombol F9 tepat di baris code dimana breakpoint ingin dipasang.

Logpoints

Logpoints adalah variasi dari breakpoint namun aplikasi tidak berhenti di Logpoints, Logpoints hanya akan menampilkan apa yang terjadi pada satu baris code dimana Logpoints dipasang.

Sumber

Inspeksi Data

Ketika proses debug berjalan kita bisa melihat value dari sebuah variable dengan melakukan hover pada variable tersebut atau melihatnya di Run view pada bagian VARIABLES.

Debug Dinotes App

Setelah mengetahui istilah-istilah yang digunakan dalam debugging kita akan mulai debug aplikasi DinoTes.

Clone repository yang kita gunakan disini.

Step by step

• Pasang breakpoint di file server.js pada bagian informasi koneksi MongoDB

• Kemudian kita klik Run view -> Run and Debug -> Pilih Node.js Environment

• Aplikasi akan berhenti di breakpoint yang sudah dipasang

Dari sini kita bisa melihat apa yang terjadi pada aplikasi secara terperinci. Bisa dilihat di console atau dengan cara hover pada variable.

Kita bisa ketahui bahwa nilai dari variable url yang menyimpan informasi koneksi database MongoDB ternyata bernilai undefined.

Hal ini terjadi karena info tersebut didapat dari environment variable yang ada di heroku. (Detailnya ada disini).

Oleh karena itu kita harus melakukan update pada baris code ini sebelum melanjutkan ke langkah selanjutnya.

Agar kita bisa develop aplikasi DinoTes di komputer lokal (tidak di heroku) kita lakukan langkah berikut:

1. Tambahkan package dotenv

Copy
1$ yarn add dotenv

2. Buat sebuah file bernama .env di root folder (di dalam folder api) kemudian tambahkan informasi koneksi MongoDB server yang terinstall di komputer

Copy
1MONGODB_URL=mongodb://localhost:27017

3. Update server.js dengan menambahkan baris code berikut ini

Copy
1const express = require('express');
2const { MongoClient } = require('mongodb');
3const bodyParser = require('body-parser');
4const cors = require('cors');
5
6const dotenv = require('dotenv').config();
7
8const routes = require('./routes');
9const handleErrors = require('./middlewares/errorHandler');
10
11const app = express();
12const port = process.env.PORT || 3001;
13
14// Connection URL
15const url = process.env.MONGODB_URL;
16
17// Database Name
18const dbName = 'dinotesDB';
19
20...

Sekarang aplikasi DinoTes dapat dijalankan di development dan production.

Jangan lupa untuk menambahkan .env ke file .gitignore

Debug di sisi client

Kita juga bisa melakukan proses debug di sisi client tepatnya debug code JavaScript yang ada di browser Google Chrome.

Ekstensi yang kita gunakan bernama Debugger for Chrome.

Install Debugger for Chrome.

Pasang breakpoint pada sisi client.

Kita bisa buat file launch.json lewat Run view -> Run and Debug -> Pilih Chrome Environment

Sebuah file launch.json akan secara otomatis ditambahkan.

Copy
1{
2    "version": "0.2.0",
3    "configurations": [
4        {
5            "type": "chrome",
6            "request": "launch",
7            "name": "Launch Chrome against localhost",
8            "url": "http://localhost:8080",
9            "webRoot": "${workspaceFolder}"
10        }
11    ]
12}

Jalankan aplikasi DinoTes menggunakan perintah yarn start.

Mulai proses debug dengan klik button Run.

Akan muncul sebuah instance browser baru kemudian navigasi ke alamat http://localhost:3000.

Aplikasi akan terhenti di breakpoints.

Advanced Breakpoints

Yang dimaksud Advanced Breakpoints disini adalah beberapa variasi dari breakpoints yang bisa kita gunakan dalam kasus atau skenario tertentu.

Pada VS Code terdapat paling tidak ada 4 variasi breakpoint:

Conditional breakpoints

Kita bisa menambahkan kondisi pada breakpoints berdasarkan expression, hit count atau keduanya.

Inline Breakpoints

Breakpoints dapat dipasang pada bagian tertentu di satu baris code.

Function Breakpoints

Kita bisa membuat function untuk memasang breakpoints.

Data Breakpoints

Aplikasi akan berhenti pada breakpoint saat data pada suatu variable berubah.

Pembahasan selanjutnya adalah Menambahkan Logger ke aplikasi DinoTes.