Remote Debugging — Debugging

Remote Debugging Remote debugging memungkinkan kamu men-debug kode yang berjalan di perangkat atau environment lain — misalnya aplikasi yang berjalan di…

Remote debugging artinya DevTools di laptopmu tersambung ke kode yang jalan di tempat lain: Chrome di HP Android, server Node.js di VPS, atau aplikasi di dalam container. Mirip montir yang mencolokkan alat diagnosa ke port di mobil. Mobilnya tetap jalan di tempatnya, tapi semua angkanya terbaca di alat si montir. Kabelnya bisa USB, bisa juga "terowongan" SSH.

🧪 Tebakan cepat: kamu menjalankan node --inspect app.js di server, lalu dari laptop menambahkan IP-server:9229 di chrome://inspect. Servernya muncul atau gak? Jawabannya ada di bagian "Server jauh: lewat SSH tunnel".

HP Android: chrome://inspect lewat USB

Bug yang cuma muncul di HP (layar sempit, keyboard virtual, Chrome Android) paling cepat dicari dengan DevTools laptop yang tersambung ke HP-nya.

  1. Di HP: Settings, About phone, ketuk Build number 7 kali sampai muncul Developer options. Di situ, nyalakan USB debugging.
  2. Sambungkan HP ke laptop dengan kabel USB.
  3. Di Chrome laptop, buka chrome://inspect/#devices dan pastikan Discover USB devices dicentang.
  4. Di HP muncul pertanyaan Allow USB debugging? Ketuk Allow.
  5. HP-mu muncul beserta daftar tab yang terbuka. Klik inspect di tab yang mau di-debug, dan DevTools lengkap (Console, Elements, Network) terbuka untuk tab itu.

HP-nya gak muncul? Kalau kamu punya adb (Android Debug Bridge, dari Android SDK), cek dengan adb devices:

$ adb devices
List of devices attached
R58M41ABCDE	unauthorized

unauthorized artinya kamu belum mengetuk Allow di HP. Setelah diizinkan, statusnya berubah jadi device.

Port forwarding: dev server-mu jalan di localhost:3000 di laptop, tapi localhost di HP adalah HP itu sendiri. Di chrome://inspect, klik Port forwarding, isi 3000 dan localhost:3000, lalu centang Enable port forwarding. Sekarang localhost:3000 di Chrome HP membuka server di laptop.

Node.js: --inspect dan --inspect-brk

Server Node.js gak punya tab browser, jadi debugger-nya dinyalakan dengan flag:

$ node --inspect app.js
Debugger listening on ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e
For help, see: https://nodejs.org/en/docs/inspector

Server jauh: lewat SSH tunnel

Perhatikan alamatnya: 127.0.0.1:9229. Debugger Node sengaja cuma mendengarkan di mesinnya sendiri. Jadi menambahkan IP-server:9229 dari laptop gak akan pernah tersambung, dan servernya gak muncul. Itu jawaban tebakannya.

Jangan "membereskannya" dengan node --inspect=0.0.0.0:9229. Itu membuka debugger ke semua orang, dan siapa pun yang bisa mencapai port itu bisa menjalankan kode apa saja di servermu. Pakai SSH tunnel: koneksi SSH yang meneruskan satu port di laptop ke satu port di server.

# di laptop
$ ssh -L 9229:localhost:9229 [email protected]

Kebalikannya: ngrok untuk webhook

Kadang yang perlu menjangkau adalah layanan luar. Payment gateway hanya mau mengirim webhook ke URL publik, padahal servermu jalan di localhost:3000. ngrok membuat terowongan dari internet ke laptopmu:

$ ngrok http 3000

ngrok memberi URL publik HTTPS sementara yang meneruskan setiap request ke http://localhost:3000. Daftarkan URL itu sebagai alamat webhook, dan request-nya mendarat di server lokalmu, lengkap dengan breakpoint-mu. Matikan ngrok setelah selesai.

Stack trace dari HP: source map

Kode yang jalan di HP sudah di-bundle dan di-minify: semua file digabung jadi bundle.js yang barisnya sangat panjang. Error yang dilaporkan dari HP menunjuk ke bundle.js:1:0, yang gak bisa kamu baca. Source map adalah tabel yang memetakan posisi di bundle (baris, kolom) ke posisi di file aslinya. Ini tabel di latihan dan di Lab:

Di bundle.js (baris:kolom) Di file asli
1:0 auth.ts:45:2
1:52 utils.ts:12:0
2:0 login.ts:103:4 
function createSourceMap(mappings) {
  return {
    resolve(minLine, minCol) {
      const cocok = mappings.find((m) => m.minLine === minLine && m.minCol === minCol);
      if (!cocok) return null; // posisi yang gak terdaftar
      return { file: cocok.origFile, line: cocok.origLine, col: cocok.origCol };
    },
  };
}

function formatStackTrace(frames, sourceMap) {
  return frames.map((frame) => {
    const asli = sourceMap.resolve(frame.line, frame.col);
    const file = asli ? asli.file : frame.file; // gak ada peta: pakai posisi bundle
    const line = asli ? asli.line : frame.line;
    const col = asli ? asli.col : frame.col;
    return frame.fn + " (" + file + ":" + line + ":" + col + ")";
  });
}
Frame dari HP Tanpa source map Dengan source map
validateUser, bundle.js 1:0 validateUser (bundle.js:1:0) validateUser (auth.ts:45:2)
handleLogin, bundle.js 2:0 handleLogin (bundle.js:2:0) handleLogin (login.ts:103:4)

Source map sungguhan lebih rumit (posisinya dikodekan dalam string mappings), dan DevTools memakainya otomatis selama file .map-nya bisa diunduh. Latihan ini versi sederhananya.

💡 iPhone: Safari Web Inspector

Chrome di iPhone memakai mesin Safari, jadi DevTools Chrome gak bisa tersambung ke sana. Nyalakan Web Inspector di pengaturan Safari (bagian Advanced) di iPhone, sambungkan ke Mac dengan kabel, lalu buka menu Develop di Safari Mac dan pilih iPhone-mu. Tanpa Mac, alternatifnya layanan cloud device seperti BrowserStack.

⚠️ Jebakan yang sering ketemu

TL;DR: Remote debugging menyambungkan DevTools di laptop ke kode yang jalan di tempat lain. HP Android: nyalakan USB debugging, sambungkan kabel, buka chrome://inspect/#devices, ketuk Allow di HP, lalu klik inspect (Port forwarding membuka localhost:3000 laptop dari HP). Node.js: node --inspect membuka debugger di 127.0.0.1:9229, --inspect-brk berhenti di baris pertama. Server jauh: ssh -L 9229:localhost:9229 user@server, jangan pernah 0.0.0.0. Webhook ke localhost: ngrok http 3000. Stack trace dari bundle diterjemahkan dengan source map: di latihan, resolve mencari yang cocok persis atau mengembalikan null, dan tiap frame ditulis fn (file:baris:kolom).

Yang akan kamu pelajari