Skip to main content

React Native Integration & Best Practices: Debugging

Debugging​

This guide provides an overview of how to debug the React Native app in an Archibald project. The templates run React Native 0.85 on Expo 56, where debugging goes through Hermes and the Chrome DevTools Protocol.

Starting the app​

arc serve -p app -n

-p app selects the platform, -n runs it as a native build. If the project has automatic platform detection enabled, -p app alone is enough.

React Native DevTools​

React Native DevTools is the built-in debugger and the one to reach for by default. With the dev server running, press j in the terminal to open it, or pick Open debugger from the in-app dev menu (shake the device, or ⌘+D / Ctrl+M in a simulator).

It gives you a console, breakpoint debugging against the Hermes engine, a network inspector, a memory profiler and the React Components/Profiler panels — the things that previously required separate tools.

Element inspector​

For layout problems, the in-app Element Inspector (dev menu → Toggle element inspector) highlights the component tree and its box model directly on the device, which is usually faster than attaching a debugger.

note

Tools you may find referenced in older React Native guides no longer apply here:

  • Flipper was removed from React Native in 0.73 and is not part of Archibald — there is no Flipper dependency or configuration anywhere in the framework.
  • The standalone React Native Debugger app and remote JS debugging via http://localhost:8081/debugger-ui/ were removed along with the legacy JS debugging pipeline. React Native DevTools replaces both.

Logs​

console.log output is streamed to the terminal running the dev server and to the React Native DevTools console. For native crashes that happen before the JS runtime is up, read the platform logs directly — adb logcat on Android, Console.app or Xcode's log window on iOS.