Skip to content
useffect.sh
Book 30 min with a senior
Tooling

React Native DevTools

React Native’s built-in debugger since 0.76, based on Chrome DevTools: console, breakpoints, network, profiling, React tree.

Definition

React Native DevTools is React Native’s default debugging experience since version 0.76. Built on the Chrome DevTools frontend and connected to the app’s Hermes engine over the CDP protocol, it opens by pressing j in the Metro terminal or from the dev menu, and handles several devices at once. It replaces the previous options, including the experimental debugger from 0.73 and the old remote debugging that ran JavaScript in Chrome instead of on the phone. The panels available: Console, Sources with breakpoints and stepping, Memory for heap snapshots, built-in React Components and React Profiler, and since 0.83 a Network panel (fetch, XMLHttpRequest, images) and a Performance panel that lines up JavaScript execution, React tracks, network events, and User Timings on one timeline. It targets React code; for the native layer, Xcode and Android Studio remain the tools. You meet it at the first bug console.log cannot explain.

In a real app

The Performance panel is the one teams underuse. Combined with React Native’s Web Performance APIs (stable since 0.83: performance.mark, performance.measure), it lets you instrument a startup or a navigation with marks placed in code and read them on the same timeline as React renders. That is how I turn “the app feels slow” into numbers before touching any code. The Network panel has documented limits: WebSocket only on the Canary channel since 0.88, no mocking or throttling, and on Expo the separate “Expo Network” panel is still there next to it.

The classic tooling pitfall is a React Native version below 0.76 or an engine other than Hermes: React Native DevTools is unavailable, and tutorials point to Flipper, whose integration was removed from the template. Another frequent case: a “Debugging connection was closed” dialog after a rebuild or a crash; “Reconnect DevTools” is enough once the cause is fixed, without restarting Metro if it is still running.

For the React tree, the “select element” button locates a component on the device and the “Highlight updates” setting shows re-renders live, which settles most debates about unnecessary useMemo calls within minutes.

Related terms

Our services on this

Sources

All 35 glossary terms

One of these is blocking your app?

30 minutes with a senior to look at the problem in your code. Free.

Book 30 minBack to home