Debugging React Native in 2026: The Tools That Matter
Debugging React Native in 2026: React Native DevTools, logs on both platforms, native tools, network requests, release-only bugs and crash reports.
Full-Stack, Mobile & AI Engineer
Debugging React Native used to mean juggling Chrome remote debugging, Flipper plugins and a lot of console.log. Much of that tooling is gone now, replaced by React Native DevTools, which connects directly to the Hermes engine and works the same way across apps.
This guide covers debugging React Native in 2026: which tool to reach for first, how to read logs on both platforms, when to drop into Xcode or Android Studio, and how to catch the bugs that only appear in release builds or in users' hands.
Key takeaways
- React Native DevTools is the default debugger (since React Native 0.76): console, breakpoints, memory, and React components and profiler tabs.
- Flipper and Chrome remote debugging are no longer the recommended path.
- Native problems need native tools: Xcode for iOS crashes and logs, Android Studio's Logcat for Android.
- Release-only bugs usually come from build differences: environment variables, code shrinking, Hermes bytecode or missing native configuration.
- Production bugs need crash reporting with source maps, so stack traces point at real lines of code.
Start here: React Native DevTools
Open it from the dev menu or press j in the terminal running Metro. It connects to your app's JavaScript engine and gives you:
| Panel | Use it for |
|---|---|
| Console | Logs, errors and evaluating expressions in the running app |
| Sources | Breakpoints, stepping through code, inspecting variables |
| Memory | Heap snapshots to find leaks |
| Performance | Recording what the JavaScript thread does during a slow interaction |
| React Components | Inspecting the component tree, props and state |
| React Profiler | Finding components that render too often or too slowly |
Breakpoints are the biggest upgrade over console.log: pause exactly where the state goes wrong, inspect everything in scope, then step forward.
Reading logs on both platforms
- JavaScript logs appear in the Metro terminal and in the DevTools console.
- Native logs on iOS: run the app from Xcode and watch the debug console, or use the Console app on your Mac with the device or simulator selected.
- Native logs on Android: Android Studio's Logcat, or
adb logcatfiltered to your app's package.
Many "silent" failures (a permission denied, a native module throwing, a crash before JavaScript starts) only appear in native logs, so check them whenever JavaScript shows nothing useful.
When to debug natively
Drop into Xcode or Android Studio when:
- The app crashes on launch before any JavaScript runs.
- A native module or SDK misbehaves (camera, Bluetooth, payments, maps).
- Builds fail with native errors (CocoaPods, Gradle, signing).
- You need native profiling: memory, CPU, rendering or app launch.
In Expo projects, run npx expo prebuild (or open the generated native folders) and launch from the IDE to get native breakpoints and logs.
Debugging network requests
Many "the app is broken" reports turn out to be API problems: a 401 after a token expires, a slow endpoint, an unexpected response shape. A few approaches:
- Log requests and responses in development through a small wrapper around your API client, including status codes and timing.
- Use an HTTP proxy such as Proxyman or Charles with a simulator or emulator to see every request, including headers and bodies.
- Use a dedicated inspector like Reactotron if you want network, state and log inspection in one desktop app.
- Check the server side too. Correlate requests with backend logs using a request ID header, so you can follow one user action end to end.
In production, crash and error reporting with network breadcrumbs shows which request failed just before an error.
Release-only bugs
Some bugs never appear in development. Common causes:
| Symptom | Likely cause |
|---|---|
| Crash on launch only in release | Missing environment variables in the production build profile |
| Android release crashes in a library | R8 code shrinking removed something the library needs; add keep rules |
| Feature works in dev, fails in production | Development-only code paths (__DEV__) or a different API URL |
| Push notifications don't arrive in production | Production credentials or entitlements not configured |
| Timing-related bugs | Production builds are much faster, exposing race conditions |
Always test a release build (a preview build with internal distribution works well) before submitting to the stores.
Production bugs: crash reporting
Once the app is in users' hands, your debugger is crash reporting. Sentry, Crashlytics and Expo's observability service capture crashes and errors with device, OS and app version details. Two things make them useful:
- Upload source maps for every release (including over-the-air updates), so JavaScript stack traces show your real files and lines instead of bytecode offsets.
- Add context: user ID (not personal data), screen, and recent breadcrumbs such as navigation and network calls.
From the field: Sentry crash triage is part of the release path I own, on apps including one with 100K+ active users at 99.9% crash-free sessions in production. The debugger finds bugs you can reproduce; crash reporting finds the ones users hit on devices you've never held.
A debugging routine that works
- Reproduce it reliably. Write down the exact steps, device and build type.
- Check logs first, JavaScript and native.
- Set a breakpoint where the behaviour first goes wrong, not where the error appears.
- Shrink the problem: remove code until the bug disappears, then add back the last piece.
- Write a test for the bug if you can, so it stays fixed.
What happened to Flipper?
Older guides recommend Flipper and its performance plugins. React Native removed Flipper from its default project setup in 0.74, and React Native DevTools replaced it: the JavaScript debugger, React DevTools and, since 0.83, Performance and Network panels in one tool. If a tutorial tells you to install a Flipper plugin, look for the DevTools equivalent instead.
FAQ
What is the best way to debug React Native apps?
Use React Native DevTools for JavaScript (console, breakpoints, memory and React profiling), native IDE tools for native crashes and logs, and crash reporting with source maps for production issues. Test release builds before submitting, because some bugs only appear there.
Is Flipper still used for React Native debugging?
Flipper is no longer the recommended debugger and was removed from the default React Native template. React Native DevTools replaced it for JavaScript debugging, and native IDE tools cover native debugging.
How do I see console logs in a React Native release build?
console.log output isn't available to users, and it's often stripped or ignored in release builds. Use a crash and error reporting service with breadcrumbs for production, and native logs (Xcode console, Logcat) when testing release builds on your own devices.
Why does my React Native app crash only in release mode?
Common causes are missing production environment variables, R8 code shrinking on Android removing code a library relies on, production-only configuration such as credentials, and timing differences that expose race conditions. Check native logs from a release build to find the exact error.
Next steps
If you're stuck on a bug that only happens on some devices or only in production, I can help you reproduce it and track it down. Get in touch, or see how I work as a React Native developer.
Sources
- React Native DevTools, React Native docs
- Debugging basics, React Native docs
- Logcat, Android Developers
- Sentry for React Native: source maps, Sentry
Related
React Native Errors You'll Hit in 2026, and How to Fix Each
Common React Native errors and fixes: Metro, native modules, rendering, hooks, Hermes, iOS and Android builds, library upgrades, and how to debug the rest.
Getting to 99.9% Crash-Free Sessions: A Crash Triage Playbook
React Native app crashing in production? A triage playbook: crash-free metrics, readable stack traces, common causes, prioritising fixes and safe releases.
Detox vs Maestro: End-to-End Testing React Native in 2026
Detox vs Maestro for React Native E2E tests in 2026: how they work, the same test in both, flakiness, Expo and CI support, and which to choose.
