Debugging React Native 2026: Panduan React Native DevTools Pengganti Flipper

Diperbarui: 10 Agustus 2026

Debugging React Native di 2026 dilakukan dengan React Native DevTools, sebuah debugger built-in berbasis Chrome DevTools Protocol yang menggantikan Flipper sejak rilis 0.76 (Oktober 2024). Panduan ini menunjukkan cara mengaktifkannya di Expo maupun bare React Native, perbedaannya dengan Chrome DevTools klasik yang sudah dihapus, plus cara menginspeksi network, state React, dan performa. Saya sendiri datang dari dunia web, jadi banyak penjelasan sengaja saya arahkan ke rekan-rekan yang terbiasa dengan DevTools browser. Jembatan itulah yang membuat tooling baru ini terasa langsung familiar.

• React Native DevTools adalah debugger resmi yang dibundel sejak React Native 0.76 dan otomatis aktif di Expo SDK 52 ke atas.
• Flipper resmi dihapus dari template React Native, jadi tidak ada lagi ekstensi native yang perlu di-link secara manual.
• Buka debugger dengan menekan j di terminal Metro, atau lewat menu Dev pada emulator (⌘M / Ctrl+M).
• DevTools baru menyediakan Console, Sources (breakpoint), Memory profiler, dan React Components/Profiler dalam satu jendela.
• Untuk inspeksi network yang mendalam, gunakan panel Network di RN DevTools atau library rn-network-inspector.
• Reactotron dan Radon IDE tetap relevan sebagai pelengkap untuk state Redux/Zustand dan hot-swap komponen.

Apa Itu React Native DevTools dan Mengapa Penting?

React Native DevTools adalah debugger front-end resmi yang dikembangkan langsung oleh tim Meta dan dirilis stabil bersama React Native 0.76 pada Oktober 2024. Berbeda dengan Chrome Debugger versi lama yang menjalankan JavaScript bundle di worker Chrome (sehingga tingkah lakunya berbeda dari runtime asli), DevTools baru berbicara langsung dengan mesin Hermes menggunakan Chrome DevTools Protocol (CDP), persis seperti yang dilakukan Chrome dan VS Code ketika men-debug Node.js.

Untuk teman-teman yang datang dari web, ini adalah pergeseran besar. Kita akhirnya punya debugger yang menempel pada engine sebenarnya, bukan tiruan V8. Artinya perilaku Date, Intl, Promise, dan optimasi Hermes seperti bytecode caching bisa diamati apa adanya. Jujur, saya pernah beberapa kali menghabiskan malam mengejar bug yang hanya muncul di Hermes karena Chrome Debugger lama tidak pernah menjalankannya. Kelas bug seperti itu kini nyaris hilang.

Fitur utama yang perlu dikenal:

• Console yang mendukung console.log, console.table, dan pesan warning LogBox terintegrasi.
• Sources untuk membuka file .tsx/.ts dengan source map, memasang breakpoint, dan step over/into.
• React Components & Profiler yang sudah embed, jadi tidak perlu install ekstensi terpisah.
• Memory untuk heap snapshot Hermes.
• Network untuk melihat request fetch/XMLHttpRequest.

Mengapa Flipper Dihapus dari React Native?

Flipper, debugger buatan Meta yang selama bertahun-tahun menjadi standar de-facto, resmi dihapus dari template React Native mulai versi 0.74 dan sepenuhnya tidak didukung di New Architecture. Alasan utamanya diuraikan dalam RFC "Flipper deprecation": Flipper adalah aplikasi Electron yang berat, ekosistem plugin-nya sulit di-maintain, dan integrasi native-nya menghambat migrasi ke Fabric/TurboModules yang saya bahas di panduan migrasi New Architecture.

Yang menggantikan Flipper bukan hanya satu tool, tapi kombinasi kecil:

1. React Native DevTools untuk debugging JS, komponen, dan network.
2. LogBox in-app untuk warning dan error runtime.
3. Xcode Instruments dan Android Studio Profiler untuk profiling native (Layout, CPU, Memory).
4. Perfetto untuk trace sistem lintas platform.

Bagi tim yang masih memakai Flipper di codebase lama, migrasinya cukup mekanis: buang dependency react-native-flipper, hapus blok use_flipper!() di Podfile, dan jalankan pod install. Setelah itu, semua yang biasanya Anda lakukan di Flipper (log, network, react components) sudah tersedia langsung di RN DevTools tanpa konfigurasi tambahan.

Perbandingan: React Native DevTools vs Chrome DevTools vs Flipper

Perbedaannya penting untuk dipahami karena istilahnya sering rancu di forum. Chrome DevTools "klasik" (yang dulu dibuka lewat "Debug JS Remotely") sudah dihapus di React Native 0.73, jadi jangan tertukar dengan React Native DevTools yang berbasis Chrome DevTools Protocol tetapi berjalan lokal.

Aspek	React Native DevTools	Chrome DevTools Klasik	Flipper
Status di RN 0.76+	Default, direkomendasikan	Dihapus (0.73)	Dihapus (0.74)
Runtime debug	Hermes asli via CDP	V8 di Chrome (bukan Hermes)	Hermes/JSC via jembatan
Instalasi	Nol konfigurasi	Perlu Chrome + koneksi WebSocket	Aplikasi Electron 300 MB
Breakpoint	Ya (Sources)	Ya, tetapi source map goyah	Tidak langsung
Network inspector	Panel Network built-in	Terbatas	Plugin Network
React Components	Terintegrasi	Perlu ekstensi terpisah	Plugin resmi
Dukungan New Architecture	Penuh	Sebagian	Tidak
Overhead runtime	Rendah	Tinggi (thread berbeda)	Sedang

Kesimpulan praktisnya: mulai proyek 2026 apapun langsung dengan React Native DevTools. Chrome DevTools "biasa" hanya relevan kalau Anda men-debug aplikasi Expo Web yang berjalan di browser. Di situ ia tetap tool utama karena bundle-nya benar-benar berjalan di V8.

Cara Mengaktifkan React Native DevTools

Instalasi RN DevTools sebenarnya bukan instalasi. Ia sudah dibundel bersama Metro, jadi yang perlu Anda lakukan hanyalah membukanya. Ada tiga cara umum yang saya pakai bergantian sesuai konteks.

1. Dari terminal Metro (tercepat)

Setelah menjalankan npx expo start atau npx react-native start, tekan tombol j. Metro akan membuka jendela DevTools baru di browser default Anda dan otomatis attach ke aplikasi yang sedang berjalan.

$ npx expo start
› Metro waiting on exp://192.168.1.5:8081
› Press s │ switch to development build
› Press a │ open Android
› Press i │ open iOS simulator
› Press j │ open debugger      ← tekan ini
› Press r │ reload app
› Press m │ toggle menu

2. Dari menu Dev di aplikasi

Guncang perangkat fisik (atau tekan ⌘M di iOS Simulator, Ctrl+M/Cmd+M di Android Emulator), kemudian pilih Open DevTools. Cara ini bermanfaat ketika Anda tidak punya akses ke terminal, misalnya saat men-debug build QA di device tester.

3. Dari script package.json

Untuk workflow tim, saya biasa menambahkan alias:

{
  "scripts": {
    "debug": "expo start --dev-client --clear",
    "debug:ios": "expo run:ios --device --configuration Debug"
  }
}

Debugging JavaScript dengan Breakpoint dan Console

Saat DevTools terbuka, tab Sources menampilkan seluruh source tree proyek Anda melalui source map dari Metro. Buka file .tsx, klik nomor baris, dan Anda punya breakpoint. Pengalamannya persis sama dengan men-debug Next.js atau Vite app di browser.

Contoh: misal ada bug di komponen keranjang belanja yang total-nya kadang NaN. Kita bisa memasang conditional breakpoint:

// components/CartTotal.tsx
export function CartTotal({ items }: { items: CartItem[] }) {
  // Klik kanan pada baris berikut → Add conditional breakpoint
  // Kondisi: isNaN(subtotal)
  const subtotal = items.reduce((sum, item) => sum + item.price * item.qty, 0);
  const tax = subtotal * TAX_RATE;
  return <Text>{formatIDR(subtotal + tax)}</Text>;
}

Ketika kondisi terpenuhi, eksekusi berhenti dan panel Scope menunjukkan isi items. Honestly, sembilan dari sepuluh bug numerik yang saya temui berakhir sebagai item.price berupa string (misalnya "12500") yang datang dari respons API. Bug seperti ini yang dulu memakan waktu berjam-jam dengan Alert-driven debugging kini selesai dalam hitungan menit.

Trik yang perlu diingat:

• debugger; statement tetap bekerja seperti di Node.js, otomatis break di DevTools.
• Gunakan console.table(objects) untuk melihat array of objects sebagai tabel yang bisa disortir.
• Aktifkan "Pause on caught exceptions" untuk menangkap error yang di-swallow oleh try/catch.
• Panel Watch menerima expression apapun, sangat berguna untuk memantau useRef().current selama re-render.

Menginspeksi Komponen dengan React DevTools

Panel Components dan Profiler di RN DevTools adalah versi embed dari React DevTools yang biasa Anda pakai di browser. Ia menampilkan pohon komponen, props, hooks state, context, dan bahkan sumber file setiap komponen. Bagi yang datang dari React Web, tidak ada yang perlu dipelajari ulang; tombol, warna, dan filter-nya identik.

Yang saya sering pakai:

• Inspect Element (ikon panah di kiri atas): sentuh komponen di simulator, tree otomatis scroll ke node yang sesuai.
• Highlight updates when components render: kotak berwarna muncul di layar setiap kali komponen re-render. Cara tercepat menemukan komponen yang re-render tanpa alasan.
• Hooks panel: nilai useState, useReducer, dan custom hook langsung terlihat, tidak perlu console.log.

Kalau proyek Anda memakai state management yang sudah saya bahas di panduan Zustand dan TanStack Query, panel Components dapat menampilkan store slice sebagai hook. Cukup filter berdasarkan nama komponen provider untuk melihat snapshot state saat ini. TanStack Query bahkan punya devtools terpisah (@tanstack/react-query-devtools) yang bisa dipasang inline di komponen root untuk melihat cache dan status query.

Bagaimana Cara Debug Network Request di React Native?

Panel Network di RN DevTools menampilkan semua request fetch, XMLHttpRequest, dan WebSocket, mirip dengan panel Network di Chrome, lengkap dengan waterfall timing, header, dan body respons. Untuk mengaktifkannya, buka DevTools, pilih tab Network, lalu refresh aplikasi.

Ada beberapa hal yang berbeda dari web:

1. Request yang berasal dari kode native (misalnya library seperti expo-image yang men-download gambar melalui SDWebImage) tidak muncul karena tidak melewati jembatan JS.
2. Header Cookie hanya terlihat jika Anda menggunakan @react-native-cookies/cookies.
3. Untuk melihat request dari fetch yang di-intercept oleh interceptor library (misalnya axios), pastikan Anda tidak menonaktifkan XHR polyfill.

Contoh interceptor untuk logging tambahan yang muncul di Console:

// lib/apiClient.ts
import axios from 'axios';

const api = axios.create({ baseURL: 'https://api.example.id' });

if (__DEV__) {
  api.interceptors.request.use((config) => {
    console.log(`→ ${config.method?.toUpperCase()} ${config.url}`, config.data);
    return config;
  });
  api.interceptors.response.use((res) => {
    console.log(`← ${res.status} ${res.config.url}`, res.data);
    return res;
  });
}

export default api;

Untuk inspeksi yang lebih dalam (misalnya mock response, throttling, atau editing header), library rn-network-inspector dan Proxyman tetap menjadi pelengkap yang saya andalkan pada proyek-proyek yang memerlukan simulasi 3G/timeout.

Profiling Performa dengan React Profiler dan Hermes

Debugging performa punya dua sisi: performa JavaScript (di mana React Profiler unggul) dan performa native (frame drops, jank). RN DevTools menangani sisi pertama; untuk sisi kedua kita masih perlu Xcode Instruments atau Android Studio Profiler.

Alur profiling JS yang saya rekomendasikan:

1. Buka tab Profiler di RN DevTools.
2. Tekan tombol rekam (lingkaran merah).
3. Lakukan interaksi yang lambat, misalnya scrolling list panjang.
4. Hentikan rekaman dan lihat "Ranked chart" untuk komponen dengan render time tertinggi.

Contoh nyata dari proyek marketplace saya kemarin: sebuah ProductCard re-render 800× dalam 3 detik karena parent-nya menggunakan inline object sebagai prop style. Profiler langsung menunjukkan spike, dan fix-nya cukup useMemo di parent. Tanpa profiler, saya mungkin akan mengoptimalkan hal yang salah selama beberapa jam.

Untuk animasi yang stutter, kombinasikan Profiler dengan Reanimated 4 seperti dijelaskan di panduan Reanimated 4. Ingat bahwa animasi yang berjalan di UI thread (worklet) tidak akan muncul di Profiler JS karena tidak berjalan di JavaScript. Untuk itu Anda perlu Perfetto atau Instruments' Core Animation tool.

Debugging di Expo Development Build vs Bare React Native

Pertanyaan ini sering muncul karena banyak developer masih mengasosiasikan Expo dengan Expo Go, padahal untuk debugging yang serius Anda sebaiknya memakai Expo Development Build, bukan Expo Go.

Perbandingan singkat:

• Expo Go hanya mendukung library JS-only. RN DevTools bekerja, tapi Anda tidak bisa menambahkan native module custom.
• Expo Development Build memberi Anda binary custom yang bisa memuat native module apapun (Reanimated, MMKV, Firebase). RN DevTools bekerja identik dengan bare React Native.
• Bare React Native memberi akses penuh ke Xcode dan Android Studio. Cocok untuk debugging native bridge, TurboModules, dan konten yang saya bahas di panduan Expo Modules API.

Praktik saya: mulai dengan Development Build sejak sprint pertama. Peralihan dari Expo Go ke Development Build sekarang hanya perintah npx expo run:ios atau eas build --profile development --platform ios. Anda mendapat semua kenyamanan RN DevTools plus kebebasan menambah library native ketika dibutuhkan, tanpa refactor besar di tengah proyek.

Alternatif dan Tools Tambahan

Meskipun RN DevTools kini sudah lengkap, ada beberapa tool pelengkap yang tetap berharga di 2026.

Reactotron

Reactotron dari Infinite Red masih menjadi favorit untuk memantau Redux, MobX, dan action Zustand secara real-time di luar browser. Antarmukanya lebih ringan daripada RN DevTools dan mendukung custom command yang bisa Anda kirim ke aplikasi (misalnya "reset state" atau "seed dummy data"). Instalasinya:

npm install --save-dev reactotron-react-native

// index.js
if (__DEV__) {
  require('./ReactotronConfig');
}

Radon IDE

Radon IDE dari Software Mansion adalah ekstensi VS Code yang menyematkan simulator/emulator langsung di editor dengan hot-swap komponen dan click-to-inspect. Cocok untuk siapapun yang datang dari pengalaman Chrome DevTools "Inspect Element": klik elemen di simulator, VS Code langsung membuka file dan baris yang tepat.

Sentry dan Instabug

Untuk debugging di production (di mana DevTools tidak lagi bisa attach), Sentry React Native SDK dan Instabug menangkap crash, breadcrumb, dan trace performa dari user asli. Keduanya wajib bagi tim yang sudah merilis ke App Store dan Play Store.

Perfetto dan systrace

Untuk analisis jank frame-by-frame lintas thread (JS, UI, GPU), Perfetto memberikan visualisasi trace yang jauh lebih detail dari Profiler manapun. Memang agak curam untuk dipelajari, tetapi tidak tergantikan ketika Anda mengejar bottleneck di layer bridge atau Fabric renderer.

Pertanyaan yang Sering Diajukan

Apakah Flipper masih didukung di React Native 2026?

Tidak. Flipper resmi dihapus dari template React Native sejak versi 0.74 dan tidak kompatibel dengan New Architecture. Meta merekomendasikan React Native DevTools sebagai pengganti langsung.

Bagaimana cara membuka React Native DevTools?

Setelah Metro berjalan (npx expo start), tekan j di terminal. Alternatifnya, guncang perangkat atau tekan ⌘M/Ctrl+M di simulator dan pilih Open DevTools.

Apa perbedaan React Native DevTools dan Chrome DevTools?

Chrome DevTools "klasik" menjalankan bundle JS di V8 browser sehingga perilakunya berbeda dari runtime asli. React Native DevTools men-debug engine Hermes langsung melalui Chrome DevTools Protocol, sehingga hasil debugging identik dengan yang berjalan di device.

Bagaimana cara debug Redux atau Zustand di React Native?

Panel Components di RN DevTools menampilkan state Zustand sebagai custom hook. Untuk Redux, gunakan Redux DevTools Extension (di Chrome) yang otomatis terhubung, atau Reactotron sebagai alternatif berdiri sendiri.

Bisakah saya debug production build React Native?

Tidak dengan RN DevTools; hanya build Debug yang membuka port debugger. Untuk memantau bug di production, gunakan Sentry, Instabug, atau Firebase Crashlytics yang mengirim crash report dan breadcrumb dari device pengguna.