Hadapi debug javascript di chrome

Question

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 terus menerus

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

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 men-debug aplikasi JavaScript menggunakan Node. js

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

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 konfigurasi launch

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. file json

Klik tombol 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 menggunakan Node. js

isi dari peluncuran. json


Copy10            "name": "Launch Program",
14            "program": "${workspaceFolder}/bin/www"
Ada 3 atribut wajib yang harus ada di setiap konfigurasi, yaitu
Tipe
jenis dari debugger yang digunakan, node untuk Node. js, php untuk PHP dst
meminta
jenis dari request, apakah launch atau attach
ubi
nama dari konfigurasi
Pada satu proyek kita bisa menambahkan lebih dari satu konfigurasi
Contoh dibawah ini untuk men-debug aplikasi menggunakan Node. js berikan google chrome
________satu_______Setelah membuat peluncuran. json kita bisa memulai proses debug dengan klik button Run atau menggunakan tombol keyboard F5
Debug Actions adalah sekumpulan perintah yang biasa digunakan dalam navigasi proses debugging
Lanjutkan / Jeda untuk menghentikan atau melanjutkan proses debug
Melangkah ke
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
Langkah selesai
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



Melangkah keluar
Keluar dari suatu fungsi dan lanjutkan eksekusi sampai breakpoint selanjutnya
mengatur ulang
Memulai ulang proses debug
berhenti
Menghentikan proses debug
Aksi debug akan muncul di debug toolbar di sebelah atas editor saat proses debug sudah dijalankan
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 kode dimana breakpoint ingin dipasang
Logpoints adalah variasi dari breakpoint namun aplikasi tidak berhenti di Logpoints, Logpoints hanya akan menampilkan apa yang terjadi pada satu baris kode dimana Logpoints dipasang
musim panas
Ketika proses debug berjalan kita bisa melihat value dari sebuah variabel dengan melakukan hover pada variabel tersebut atau melihatnya di Run view pada bagian VARIABLES
Setelah mengetahui istilah-istilah yang digunakan dalam debugging kita akan mulai men-debug aplikasi DinoTes
Clone repository yang kita gunakan disini
Selangkah demi selangkah
Pasang breakpoint dari file server. js pada bagian informasi koneksi MongoDB
Kemudian kita klik Run view -> Run and Debug -> Pilih Node. js Lingkungan
Aplikasi akan berhenti di breakpoint yang sudah terpasang
Dari sini kita bisa melihat apa yang terjadi pada aplikasi secara terperinci. Bisa dilihat di console atau dengan cara hover pada variable



Kita bisa mengetahui 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 mengembangkan aplikasi DinoTes di komputer lokal (tidak di heroku) kita lakukan langkah berikut
Buat sebuah file bernama. env di folder root (di dalam folder api) kemudian tambahkan informasi koneksi server MongoDB yang terinstall di komputer
Copy1MONGODB_URL=mongodb://localhost:27017
memperbarui server. js dengan menambahkan kode baris berikut ini
Copy1const express = require('express');
2const { MongoClient } = require('mongodb');
3const bodyParser = require('body-parser');
4const cors = require('cors');
6const dotenv = require('dotenv').config();
8const routes = require('./routes');
9const handleErrors = require('./middlewares/errorHandler');
12const port = process.env.PORT || 3001;
15const url = process.env.MONGODB_URL;
18const dbName = 'dinotesDB';
Sekarang aplikasi DinoTes dapat dijalankan di development dan production
Jangan lupa untuk menambahkan. kirim ke file. gitignore



Debug klien sisi
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
Instal Debugger untuk Chrome
Pasang breakpoint pada sisi client
Kita bisa buat peluncuran file. json lewat Run view -> Run and Debug -> Pilih Chrome Environment
peluncuran file. json akan ditambahkan secara otomatis
Copy7            "name": "Launch Chrome against localhost",
8            "url": "http://localhost:8080",
9            "webRoot": "${workspaceFolder}"
_Jalankan aplikasi DinoTes menggunakan perintah yarn start
Mulai proses debug dengan klik tombol Run
Akan muncul sebuah instance browser baru kemudian navigasi ke alamat http. // localhost. 3000
Aplikasi akan terhenti di breakpoints
Yang dimaksud Advanced Breakpoints disini adalah beberapa variasi dari breakpoints yang bisa kita gunakan dalam kasus atau skenario tertentu