Remote Debugging

Remote debugging memungkinkan kamu men-debug kode yang berjalan di perangkat atau environment lain — misalnya aplikasi yang berjalan di smartphone, atau di server.

Remote Debugging Android dengan Chrome

Proses menghubungkan DevTools di laptop ke browser Chrome di Android:

Langkah 1 — Aktifkan Developer Options di Android

1. Buka Settings → About Phone
2. Ketuk Build Number 7 kali
3. Kembali ke Settings → Developer Options muncul
4. Aktifkan USB Debugging

Langkah 2 — Hubungkan via USB

# Pastikan adb (Android Debug Bridge) terinstall
adb devices
# Output: List of devices attached
# XXXXXXXXXX  device

Langkah 3 — Buka Remote Targets di Chrome

1. Di Chrome laptop, buka: chrome://inspect/#devices
2. Centang Discover USB devices
3. Perangkat Android akan muncul beserta tab yang terbuka
4. Klik inspect → DevTools terbuka untuk tab di Android!

Port Forwarding

Jika aplikasi berjalan di localhost laptop tapi ingin diakses dari Android:

chrome://inspect → Port forwarding
Tambahkan: 3000 → localhost:3000

Sekarang di Android bisa buka localhost:3000 dan mengarah ke server di laptop.

Remote Debugging Node.js

# Jalankan Node.js dengan flag inspect
node --inspect app.js
# Output: Debugger listening on ws://127.0.0.1:9229/...

# Atau attach ke proses yang sudah berjalan
node --inspect-brk app.js  # Pause di baris pertama

Lalu buka chrome://inspect di Chrome → klik Open dedicated DevTools for Node.

Remote Debugging dengan VS Code

// .vscode/launch.json
{
  "type": "node",
  "request": "attach",
  "name": "Attach to Remote",
  "address": "remote-server.com",
  "port": 9229,
  "remoteRoot": "/app",
  "localRoot": "${workspaceFolder}"
}

# Di remote server — ekspos port debugging
node --inspect=0.0.0.0:9229 app.js

# SSH tunnel untuk keamanan (direkomendasikan!)
ssh -L 9229:localhost:9229 [email protected]

Remote Debugging React Native

# Metro bundler sudah include debugger
npx react-native start

# Di device: shake → Debug → Chrome Debugger terbuka
# Atau gunakan React Native Debugger (standalone app)

Debugging Docker Container

# Expose port debugger dari container
docker run -p 9229:9229 myapp node --inspect=0.0.0.0:9229 app.js

# Lalu connect dari host
# chrome://inspect → Configure → localhost:9229

Tips Remote Debugging

1. Selalu gunakan SSH tunnel untuk debugging production — jangan ekspos port debugger langsung
2. Source maps harus tersedia agar bisa debug kode asli (bukan minified)
3. --inspect-brk berguna saat ingin debug dari awal sebelum kode jalan
4. Wireless ADB tersedia untuk debugging tanpa kabel USB:

adb tcpip 5555
adb connect 192.168.1.xxx:5555
adb devices  # Pastikan terhubung

Source Maps

Agar bisa debug kode TypeScript/JSX yang sudah di-compile:

// vite.config.ts
export default {
  build: {
    sourcemap: true, // ✅ Generate source maps
  }
}

Dengan source maps, DevTools menampilkan kode TypeScript asli — bukan JavaScript hasil compile.