Skip to main content

React Native DevTools

React Native DevTools is our new debugging experience featuring an end-to-end rewrite of our debugger stack. It aims to be more deeply integrated and fundamentally more reliable than previous debugging methods in React Native.

React Native DevTools opened to the "Welcome" pane

React Native DevTools is designed for debugging React app concerns, and not to replace native tools. If you want to inspect React Native’s underlying platform layers (for example, while developing a Native Module), please use the debugging tools available in Android Studio and Xcode (see Debugging Native Code).

💡 Compatibility — released in 0.76

React Native DevTools supports all React Native apps running Hermes. It replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) frontends.

It is not possible to set up React Native DevTools with any older versions of React Native.

  • Chrome Browser DevTools — unsupported
    • Connecting to React Native via chrome://inspect is no longer supported. Features may not work correctly, as the latest versions of Chrome DevTools (which are built to match the latest browser capabilities and APIs) have not been tested, and this frontend lacks our customisations. Instead, we ship a supported version with React Native DevTools.
  • Visual Studio Code — unsupported (pre-existing)
    • Third party extensions such as Expo Tools and Radon IDE may have improved compatibility, but are not directly supported by the React team.
💡 Feedback & FAQs

We want the tooling you use to debug React across all platforms to be reliable, familiar, simple, and cohesive. All the features described on this page are built with these principles in mind, and we also want to offer more capabilities in future.

We are actively iterating on the future of React Native DevTools, and have created a centralized GitHub discussion to keep track of issues, frequently asked questions, and feedback.

Core features​

React Native DevTools is based on the Chrome DevTools frontend. If you have a web development background, its features should be familiar. As a starting point, we recommend browsing the Chrome DevTools docs which contain full guides as well as video resources.

Console​

A series of logs React Native DevTools Sources view, alongside a device

The Console panel allows you to view and filter messages, evaluate JavaScript, inspect object properties, and more.

Console features reference | Chrome DevTools

Useful tips​

  • If your app has a lot of logs, use the filter box or change the log levels that are shown.
  • Watch values over time with Live Expressions.
  • Persist messages across reloads with Preserve Logs.
  • Use Ctrl + L to clear the console view.

Sources & breakpoints​

A paused breakpoint in the React Native DevTools Sources view, alongside a device

The Sources panel allows you to view the source files in your app and register breakpoints. Use a breakpoint to define a line of code where your app should pause — allowing you to inspect the live state of the program and incrementally step through code.

Pause your code with breakpoints | Chrome DevTools

tip

Mini-guide​

Breakpoints are a fundamental tool in your debugging toolkit!

  1. Navigate to a source file using the sidebar or Cmd ⌘+P / Ctrl+P.
  2. Click in the line number column next to a line of code to add a breakpoint.
  3. Use the navigation controls at the top right to step through code when paused.

Useful tips​

  • A "Paused in Debugger" overlay will appear when your app is paused. Tap it to resume.
  • Pay attention to the right hand side panels when on a breakpoint, which allow you to inspect the current scope and call stack, and set watch expressions.
  • Use a debugger; statement to quickly set a breakpoint from your text editor. This will reach the device immediately via Fast Refresh.
  • There are multiple kinds of breakpoints! For example, Conditional Breakpoints and Logpoints.

Reconnecting DevTools​

Occasionally, DevTools might disconnect from the target device. This can happen if:

  • The app is closed.
  • The app is rebuilt (a new native build is installed).
  • The app has crashed on the native side.
  • The dev server (Metro) is quit.
  • A physical device is disconnected.

On disconnect, a dialog will be shown with the message "Debugging connection was closed".

A reconnect dialog shown when a device is disconnected

From here, you can either:

  • Dismiss: Select the close (×) icon or click outside the dialog to return to the DevTools UI in the last state before disconnection.
  • Reconnect: Select "Reconnect DevTools", having addressed the reason for disconnection.