React Native Debugger: How to Debug React Native Apps

The React Native debugger to use today is React Native DevTools, which is built into React Native 0.76 and later and works with any app running on Hermes. Start Metro, then press j in the terminal (or pick Open DevTools from the in-app Dev Menu) to get a Chrome-style debugger with Console, Sources and breakpoints, Network, Performance, Memory, and React's Components and Profiler panels (React Native docs). The old standalone React Native Debugger app and Flipper don't work with current versions.

Everything below is for React Native 0.87, the current release as of October 2026, and recent Expo SDKs.

Which React Native debugging tool to use

Tool	Status (Oct 2026)	Use it for
React Native DevTools	Built in, default since 0.76	JavaScript debugging, logs, network, performance, React components
Expo CLI + React Native DevTools	Built in to Expo	Same, opened from the Expo terminal
Xcode / Android Studio	Official native tools	Native crashes, native modules, Instruments, Logcat
Safari Web Inspector	Supported for JSC on iOS	Apps that still run JavaScriptCore instead of Hermes
React Native Debugger (standalone app)	Only supports the removed remote debugger	Legacy apps only
Flipper	Deprecated in 0.73, dropped from the template in 0.74	Nothing new
Chrome via chrome://inspect, "Debug JS Remotely"	Removed (remote debugging removed in 0.79)	Nothing

Why the old tools stopped working: the standalone React Native Debugger app says in its README that it only supports the old Remote Debugger, which ran your JavaScript inside Chrome instead of on the device. React Native removed Remote JS Debugging in 0.79, and it never worked with Hermes or the New Architecture. Flipper was deprecated in 0.73 in favor of the new debugger (React Native blog).

How to open React Native DevTools

1. Start your app in development mode (npx react-native start plus run-android/run-ios, or npx expo start).
2. In the Metro terminal, press j. With several devices connected, Metro asks which one to debug.
3. Or open the Dev Menu and choose Open DevTools (docs):
   • Physical device: shake it.
   • iOS Simulator: Ctrl+Cmd+Z, or Device > Shake.
   • Android emulator: Cmd+M (macOS) or Ctrl+M (Windows/Linux), or run adb shell input keyevent 82.

DevTools opens in its own window. If the app reloads, crashes or Metro restarts, you'll see "Debugging connection was closed"; fix the cause and click Reconnect DevTools.

The Dev Menu, LogBox and DevTools are only available in debug builds. In release builds they are disabled, so production issues need crash reporting and logging.

Debugging JavaScript: Console and breakpoints

The Console works like Chrome's: filter by level, evaluate expressions against the running app, and use Live Expressions to watch a value. Turn on Preserve log to keep messages across reloads. When DevTools is open, LogBox stops showing non-fatal errors in the app, so the Console is the place to look.

To pause code, open Sources, press Cmd+P / Ctrl+P to find a file, and click a line number. Or add a statement in your editor:

function onSubmit(values) {
  debugger; // DevTools pauses here on the device, no rebuild needed
  return api.save(values);
}

Fast Refresh sends the change to the device right away. While paused, the app shows a "Paused in Debugger" overlay; tap it to resume. Conditional breakpoints and logpoints (right-click the line number) also work.

Inspecting components and re-renders

The Components and Profiler panels are the same as the React DevTools browser extension: select an element on screen, read and edit props, state and hooks, and record a profile to see which components re-rendered and why. Turn on Highlight updates when components render in the panel settings to see re-renders flash on the device. Components compiled by the React Compiler show a Memo ✨ badge.

React Native network debugging

Since 0.83, the Network panel records requests while DevTools is open, with timings, headers, response previews, and an Initiator tab that shows which code made the request. It captures fetch(), XMLHttpRequest and <Image> loads (docs).

Not supported yet: WebSocket traffic, response mocking and network throttling. For those, or on React Native older than 0.83, use a proxy such as Proxyman, Charles, mitmproxy or Fiddler. Expo apps also show a separate Expo Network panel, which works with expo-dev-client or Expo Go (Expo docs).

Performance and memory

• Performance panel (0.83+): record a session to see JavaScript execution, React's performance tracks, network events and your own performance.mark() / performance.measure() timings on one timeline.
• Memory panel: take heap snapshots and use the allocation timeline to find leaks, for example listeners that are never removed.
• Perf Monitor in the Dev Menu shows an FPS overlay on the device. It is only a rough guide; for accurate numbers profile a release build with Xcode Instruments or the Android Studio profiler.

Debugging in Expo

With npx expo start, press j to open React Native DevTools and m to open the Dev Menu. On Expo SDK 50 and later, Expo recommends React Native DevTools and Expo's dev tools plugins (for example for Redux) instead of the standalone React Native Debugger (Expo docs). If you used React Native Debugger only for Redux, our Redux DevTools guide covers the current setup.

React Native debugging in VS Code

The React Native team does not support VS Code debugging directly. Third-party options exist: the Expo Tools extension (run Expo: Debug ..., still alpha) and Radon IDE (paid, with a trial). For reliability, both Expo and React Native recommend React Native DevTools.

Native debugging with Xcode and Android Studio

React Native DevTools only covers JavaScript and React. For native modules, crashes before JavaScript loads, or build issues:

• iOS: open ios/YourApp.xcworkspace in Xcode, run the app, and set breakpoints in Swift or Objective-C. The Xcode console shows native logs; Instruments profiles CPU, memory and energy.
• Android: open the android folder in Android Studio, attach the debugger to your app's process, and read Logcat (or run adb logcat in a terminal).

Apps on JavaScriptCore

React Native DevTools needs Hermes. If an iOS app still uses JSC, enable Settings > Safari > Advanced > Web Inspector on the device, enable Safari's developer features on the Mac, and pick the app's JSContext under Safari's Develop menu (docs). Our iOS developer tools roundup covers the rest of the Apple toolchain.

FAQ

Is React Native Debugger deprecated?

The standalone app was never officially marked deprecated, but it only supports the old remote debugger, which React Native removed in 0.79. It doesn't work with Hermes or the New Architecture. Use React Native DevTools.

Can I still debug React Native in Chrome?

Not with the old "Debug JS Remotely" option or chrome://inspect. React Native DevTools is built on the Chrome DevTools frontend, so it looks and works like Chrome DevTools, but it opens from Metro with j.

Does React Native DevTools work with Expo?

Yes. Press j in the terminal running npx expo start. Expo Go and development builds are both supported.

Why does DevTools say no app is connected?

Check that the app runs a debug build, uses Hermes, and is connected to the same Metro server. Reload the app, then press j again. On a physical Android device, run adb reverse tcp:8081 tcp:8081 so the device can reach Metro.

How do I see network requests in React Native?

Use the Network panel in React Native DevTools (React Native 0.83+). For WebSockets, mocking or older versions, use a proxy such as Proxyman or Charles.

More mobile tooling is listed in DevHunt's mobile tools directory.