Debugging Node.js dengan Chrome DevTools

2 min read

Disclaimer
Saya bekerja di AWS, semua opini adalah dari saya pribadi. (I work for AWS, my opinions are my own.)
Debugging Node.js dengan Chrome DevTools
Debugging Node.js dengan Chrome DevTools (Logo: Hak cipta masing-masing)

TeknoCerdas.com – Salam cerdas untuk kita semua. Node.js adalah sebuah runtime untuk Javascript. Jika aplikasi yang dikembangkan sudah kompleks maka tools debugging komplit harus dimiliki. Salah satunya adalah fitur breakpoints dan watch expression. Karena Node.js adalah runtime Javascript maka kita dapat melakukan debugging Node.js dengan Chrome DevTools.

Salah satu cara untuk membuat aplikasi yang minim bug adalah unit testing yang ekstensif dan debugging tools yang komplit. Namun jika harus memilih maka tools debugging yang komplit adalah preferensi pribadi saya. Dengan tools debugging yang mumpuni kita bisa melakukan breakpoints dan menganalisa hasil eksekusi pada fungsi atau scope tertentu bahkan mengubah nilai dari variabel on-the-fly pada RAM tanpa perlu mengubah file.

Baca Juga
Kirim WhatsApp dengan API KirimWA.id dan Node.js

Daftar Isi

0. Persiapan

Pastikan pada komputer anda sudah terinstall Node.js dan browser Chrome. Pada tulisan ini saya menggunakan Node.js versi 14 LTS. Untuk Chrome saya menggunakan versi 92. Minimal versi Chrome yang dibutuhkan adalah Chrome 55+.

1. Install Express

Kita akan menggunakan framework Express untuk contoh kode yang akan kita debug nantinya. Buat sebuah direktori dengan struktur seperti dibawah ini.

- nodejs-chrome/
  - src/

Untuk membuat direktori tersebut gunakan perintah berikut.

$ mkdir -p nodejs-chrome/src

Kemudian install framework express dengan perintah berikut.

$ npm install express --save

2. Contoh Kode untuk Debugging

Buat sebuah file index.js pada direktori src/ yang isinya seperti dibawah ini. File ini yang akan kita debug pada Chrome DevTools.

const app = require('express')();
const port = process.env.APP_PORT || 3000;

app.get('/', function(req, res) {
    req.send('Hello World');
});

app.get('/reverse/:words', function(req, res) {
    const reversed = req.params.words.split('').reverse().join('');

    res.send(reversed);
});

app.listen(port, function() {
    console.log(`Server running at http://localhost:${port}`)
});

Endpoint /reverse/:words bertujuan untuk membalik teks yang dikirimkan. Misal /reverse/hello-world maka yang dikembalikan nantinya adalah dlrow-olleh.

3. Jalankan Node.js dengan Mode Inspector

Agar Chrome dapat berinteraksi dengan Node.js maka kita perlu menjalankan dengan mode Inspector yaitu dengan menambahkan argumen --inspect.

$ node --inspect src/index.php
Debugger listening on ws://127.0.0.1:9229/97e758ee-2ed7-47b6-9142-8071cc239627
For help, see: https://nodejs.org/en/docs/inspector
Server running at http://localhost:3000

Dapat terlihat Node.js mengaktifkan websocket pada port 9229. Port inilah yang akan dihubungi oleh Chrome untuk melakukan debugging script Node.js.

Keterangan lengkap tentang Node.js inspector dapat dilihat pada tautan dibawah ini.

https://nodejs.org/en/docs/guides/debugging-getting-started/

4. Mulai Debugging pada Chrome

Jalankan browser Chrome kemudian pada URL address bar ketikkan alamat chrome://inspect. Jika Node.js sudah dijalankan dengan mode inspector maka pada bagian bawah Remote Target akan muncul script index.js dengan link inspect.

Node.js Debug Chrome DevTools Target
Node.js Target Script pada Chrome DevTools

Klik link inspect tersebut untuk membuka Chrome DevTools. Langkah berikutnya adalah menambahkan direktori nodejs-chrome/src/ yang berisi source code yang ingin kita debug.

Pada tab “Sources” yaitu tab kedua setelah “Profiler”. Pada pojok kanan atas klik “Add folder to workspace” dan pilih direktori nodejs-chrome/src/.

Add Node.js Script pada Chrome DevTools Workspace
Menambahkan Node.js Script pada Chrome DevTools Workspace

5. Memasang Breakpoint

Breakpoint secara sederhana adalah melakukan “pause” atau memberhentikan eksekusi kode pada baris yang telah ditentukan. Kemudian developer akan melakukan analisa sesuai dengan kebutuhan.

Pada bagian sisi kiri dari Worspaces klik file src/index.js. Pada contoh ini kita akan memasang breakpoint pada baris 9 dan 11.

9.  const reversed = req.params.words.split('').reverse().join('');
...
11. res.send(reversed);

Klik nomor baris 9 dan 11 sehingga berubah warna background biru seperti yang ditunjukkan gambar dibawah.

Memasang Breakpoint pada Node.js script
Memasang Breakpoint pada Node.js script di Chrome DevTools

Untuk memulai debugging kunjungi alamat URL dari aplikasi express yang dibuat yaitu http://localhost:3000/reverse/hello-world.

Kunjungi URL tersebut dengan Chrome atau cURL.

$ curl http://localhost:3000/reverse/hello-world

Ketika dijalankan hasilnya tidak keluar. Kenapa? Karena kita melakukan breakpoint sehingga Node.js berhenti atau “pause” saat melakukan eksekusi pada baris 9.

Sekarang kembali pada Chrome DevTools untuk maka baris 9 akan di-highlight yang menunjukkan bahwa itu adalah posisi breakpoint yang sekarang.

Kondisi Variabel Saat Breakpoint
Kondisi Variabel Saat Breakpoint

Nilai dari konstanta reversed belum ada sehingga undefined karena breakpoint maka baris 9 belum selesai dieksekusi.

Disini banyak hal menarik yang bisa dilakukan misal anda dapat melihat nilai dari berbagi variabel misal nilai dari object req.params dapat dilihat pada bagian “Scope” yang ada disebelah kanan. Dimana nilainya adalah hello-world.

Anda juga dapat mengubah nilai dari variable menggunakan window “Watch expression” atau langsung mengetik ekspresi kode melalui Console window.

Untuk melanjutkan ke breakpoint selanjutnya gunakan tombol “Play” berwarna biru. Maka kode akan berhenti pada baris 11. Disana nilai dari variabel reversed sudah dievaluasi dan harusnya bernilai dlrow-olleh. Tekan tombol “Play” sekali lagi untuk meneruskan eksekusi program dan output akan ditampilkan pada cURL.