[0.76] React Native DevTools — Issues and Feedback

[huntie]

Introduction

In React Native 0.76, we're shipping the first stable release of React Native DevTools, our new debugging experience for React Native apps using Hermes.

React Native DevTools features:

• A completely rebuilt debugger architecture, including an all-new CDP backend, designed for reliability and correctness.
• Familiar, web-aligned tooling — An integrated frontend with familiar features from Chrome DevTools that work as they do on web, as well as the React DevTools Element Inspector and Profiler.
• A cohesive and refined experience — React Native DevTools is set up by default with zero config. Open from the Dev Menu or via j to debug in the CLI server. See a new “Paused in Debugger” overlay and simplified LogBox states while debugging.

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 Xcode and Android Studio.

Tip

Learn more about React Native DevTools in the 0.76 release blog post or the announcement talk 🎬.

Compatibility

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

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.

Available debugging options from 0.76

• React Native DevTools (default)
• Remote JavaScript Debugging (deprecated)
• Safari Developer Tools (Direct JSC Debugging)

If you are using a debugging option other than React Native DevTools, this will not be connected to the React Native DevTools backend, and therefore issues should be raised outside this discussion thread.

Related deprecations in 0.76

• The standalone build of React DevTools (npx react-devtools) will no longer work with 0.76, and this entry point is deprecated.

FAQs

React Native DevTools is fundamentally separate from the previous “Experimental Debugger” (React Native 0.73-0.75). Please use the previous thread if you see the old frontend.

How do I know if I’m on React Native DevTools?

• After launching DevTools from the Dev Menu or CLI, you should land on a welcome panel saying “React Native DevTools” (NOT "React Native JS Inspector").
• A highlighted log saying Welcome to React Native DevTools should be printed to the console.

When is React Native DevTools coming to Expo?

React Native DevTools should land in Expo in the next Expo SDK that aligns with React Native 0.76, so long as Expo is happy with end to end compatibility. At time of writing, this will be SDK 52.

How do I use the Network panel?

React Native DevTools does not ship with Network inspection as of 0.76. We are aware this is a highly-requested feature. First party support, built into our new C++ debugger stack, is work in progress and will ship in a future release.

Alternatives:

• Network panel under Expo: Supported in Expo since SDK 49. This implementation is built outside of the React Native DevTools stack, but we've exposed a "Network (Expo, unstable)" panel in our frontend.
• Use third party tools such as Reactotron, Charles Proxy.

How do I use third party Chrome extensions?

React Native DevTools does not ship with support for loading third party Chrome extensions (such as Relay DevTools or Redux DevTools) as of 0.76. This is a feature that conceptually fits what we want to offer, but is further out in our plans.

We are in early exploration on this feature, in partnership with Expo. We want JS dev plugins in React Native DevTools to share the same reliable debugger connection as the rest of our infra, and we want to design the necessary APIs for this precisely. Another concern will be how we safely load 3P extension code and meet our quality bar. Prior art such as Expo Dev Plugins may inform us about how we make third party plugins loadable into DevTools.

Alternatives:

• Expo Dev Plugins are an existing solution for loading a number of third party DevTools plugins in an out-of-tree manner.
• react-native-debugger is a community project that includes built in DevTools plugins for popular third party JavaScript libraries. (Note: This will eject out of the React Native DevTools backend and to Remote JavaScript Debugging.)

Why are JavaScript logs leaving Metro?

We want every aspect of React Native debugging to behave reliably, and to match the functionality of modern browser tooling. To meet this quality bar, we are removing log forwarding via Metro in 0.77, with a warning logged today.

• Maintainability: This feature was historically an ad-hoc forwarding protocol over the bundler connection which we no longer wish to maintain.
• Web alignment, separation of concerns: Application logs in Metro pollute the primary information logged by Metro/the dev server, such as when bundles are sent to a device. No other bundlers replicate this functionality.
  • For a web app, you wouldn’t forward logs in the dev server. Instead, these tools only log bundle requests, and you go to a particular instance of the webpage/app to open the browser DevTools.

Please use React Native DevTools and its fully featured Console panel — supporting log filtering, rich object inspection, and Live Expressions.

If you really want to view inline logs in your IDE, the modern approach would be to consider one of the third party VS Code offerings, which stream logs over CDP.

When will we remove Remote JavaScript Debugging?

No time soon(!). This debugging mode remains deprecated, but we appreciate the use case for third party Chrome extensions. Remote JavaScript Debugging won't stay around forever — but we'll consider down the line if we've replaced enough of its functionality (or this functionality is implemented robustly by frameworks), to remove it.

What features are coming next?

• Performance panel (+ profiling builds support): In progress (targeting next year).
• Network panel: In progress (targeting next year).
• Third party Chrome extensions: In early exploration, in collaboration with Expo (no ETA).

[huntie]

[FAQ Thread] Network inspection

TLDR: Should be available from Expo SDK 52, support in core is WIP

React Native DevTools does not ship with Network inspection as of 0.76. We are aware this is a highly-requested feature. First party support, built into our new C++ debugger stack, is work in progress and will ship in a future release.

Alternatives

• Network panel under Expo: Supported in Expo since SDK 49. This implementation is built outside of the React Native DevTools stack, but we've exposed a "Network (Expo, unstable)" panel in our frontend.
• Use third party tools such as Reactotron, Proxyman, Charles Proxy.

At this time, we aren't committing to a timeline for Network debugging in React Native core.

Updates

• Sep 2024: The Network panel is work in progress (no ETA).

[huntie]

[FAQ Thread] Third party Chrome extensions

TLDR: Use Expo Dev Plugins, no timeline yet on support in core

React Native DevTools does not ship with support for loading third party Chrome extensions (such as Relay DevTools or Redux DevTools) as of 0.76. This is a feature that conceptually fits what we want to offer, but is further out in our plans.

We are in early exploration on this feature, in partnership with Expo. We want JS dev plugins in React Native DevTools to share the same reliable debugger connection as the rest of our infra, and we want to design the necessary APIs for this precisely. Another concern will be how we safely load 3P extension code and meet our quality bar. Prior art such as Expo Dev Plugins may inform us about how we make third party plugins loadable into DevTools.

Alternatives

• Expo Dev Plugins are an existing solution for loading a number of third party DevTools plugins in an out-of-tree manner.
• react-native-debugger is a community project that includes built in DevTools plugins for popular third party JavaScript libraries. (Note: This will eject out of the React Native DevTools backend and to Remote JavaScript Debugging.)

Updates

• Sep 2024: 3P Chrome extensions support is in early investigation (no ETA).

[SeanDunford]

I have a bare react native app that integrates some expo libraries but wasn't started as an expo project and only integrates a few expo packages.

Expo Dev plugins seems to only be available for projects that use expo cli. https://docs.expo.dev/bare/using-expo-cli/ Are you aware of any work that's been done to use these tools with the react native cli. eg: npx react-native start

[byCedric]

Through the console you can inject snippets of code into your app in the global state, or on any paused breakpoint context. Unfortunately, this snippet of code seems to be heavily tied to what Hermes can execute, e.g.

• const somevar = 'hello' doesn't work as const isn't supported
• let somevar = 'hello' doesn't work as let isn't supported
• var response = await fetch('...') doesn't work as await isn't supported (in top level?)

Would be awesome if we can figure out a way to A - make this and the reason more visible, e.g. error/warning as response for that snippet with this info, B - support basic language level features (like const/let or await).

[huntie]

Great observation. I guess this behaviour is correct (from Hermes' point of view), but unintuitive 😅. Raising internally 👍🏻

[hrithik73]

Option for people not using Chrome or Microsoft edge ?

[huntie]

Which browser are you intending to use?

React Native DevTools, based on the Chrome DevTools frontend, requires a Chromium based browser to run. Our launch flow (also historically in Expo) uses either Chrome or Microsoft Edge, which are highly likely to be already installed on a developer's machine, across desktop environments. We don't require that either browser is your system default 😄.

[hrithik73]

I am using Arc (Chromium Based), and i don't want to the debugger to be chrome every time. Is there any way to select the browser i want to open debugger in ?

[huntie]

Sure (I use Arc as well!). As @sntg-p mentioned, you can try setting CHROME_PATH, however Arc's launch behaviour is different to base Chromium and I don't think this will work.

Instead, try this workaround (power users only) — paste the following URL into your browser (assuming Metro is running at localhost:8081), and it will redirect to React Native DevTools.

http://localhost:8081/open-debugger

Note that this approach is unstable and unsupported:

• A GET request to this URL will only work if there is exactly one device connected to Metro. Additionally, this URL may work differently/break in future RN versions.
• We don't officially support browsers other than Google Chrome or Microsoft Edge.

In future, we're looking at packaging React Native DevTools so that it doesn't require an external browser at all.

[bionicmaster]

and how I can select one browser over another? right now I have both installed (with Chrome being my default, btw) and it always opens Edge, being successful 1 of each 5 launches or so, I wanna change it to Chrome and see if something changes, I'm on Mac

[sntg-p]

When using Linux, I thought I wouldn't be able to use the new DevTools unless I installed Edge or Google Chrome via APT or similar. But I managed to use them with Ungoogled Chromium installed via Flatpak like this:

EDGE_PATH=/var/lib/flatpak/app/io.github.ungoogled_software.ungoogled_chromium/current/active/export/bin/io.github.ungoogled_software.ungoogled_chromium; export EDGE_PATH
yarn run start

Then pressing the j key to invoke the new DevTools. Seems to be working fine!

[usmanabid94]

when can we expect an offical update on this as this is much needed.

[SeanDunford]

Great work, thank you for this. React Native debugging has been a pain for some time. This is a welcome change and am personally glad to have moved away from Flipper.

Understand that it will take time but personally Redux debugging is more important to me than networking or performance. I need to use the Redux Debugger every time i debug something but Networking and Performance are more situational.

Thanks again. 🍻

[usmanabid94]

@SeanDunford do you have any idea how to debug network api calls in 0.76 or how to debug redux in this version?

[SeanDunford]

@SeanDunford do you have any idea how to debug network api calls in 0.76 or how to debug redux in this version?

#819 (comment)

This is the only official response at the moment.

[usmanabid94]

ok i thought some one had any idea about it

[hrithik73]

Just a question why can't meta open source the debugger so that the community can also help to make the development fast ?

[huntie]

Hi @hrithik73,

React Native DevTools is built into React Native and is already open source. Our customised Chrome DevTools frontend lives in its own repo. See links below:

• https://github.com/facebook/react-native/tree/main/packages/react-native/ReactCommon/jsinspector-modern
• https://github.com/facebookexperimental/rn-chrome-devtools-frontend

[shunnokw]

I am getting this error when trying to start the devtools by pressing j after npx expo start:

Failed to open the React Native DevTools.
TypeError: fetch failed

on a fresh install, fresh project on my Mac. Any idea why?

[jrjenkins555]

I'm new to expo but also getting the following error when trying to open the debugger. I wasn't getting this about a month ago when I started my expo project and I'm just now picking it up again so I'm having a hard time debugging what this could be.
Failed to open the React Native DevTools. TypeError: fetch failed

I also for some reason can't connect to the app using local iOS simulator on mac but I use expo go on my actual phone and it works. Any input is appreciated!

[aabuhijleh]

@jrjenkins555 Do you see the following in System settings > Network > Firewall > Options ?

Can you try to change it to Allow incoming connections and see if your issue is resolved?

[jrjenkins555]

@aabuhijleh No I don't have my firewall turned on. BTW the iOS simulator started working after I ran expo start --ios --localhost this led me down a rabbit hole of installing react-devtools globally and running REACT_DEBUGGER=\"open -g 'rndebugger://set-debugger-loc?port=8081' -a 'React Native Debugger'\" expo start --ios --localhost. This however gives me a similar error that doesn't seem helpful:

Error: Request timeout
    at Timeout.<anonymous> (/Users/jrjenkins/<app-name>/app/node_modules/@expo/cli/src/start/server/middleware/inspector/CdpClient.ts:21:14)
    at listOnTimeout (node:internal/timers:569:17)
    at processTimers (node:internal/timers:512:7)

TypeError: fetch failed
    at fetch (/Users/jrjenkins/<app-name>/app/node_modules/undici/index.js:112:13)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at queryAllInspectorAppsAsync (/Users/jrjenkins/<app-name>/app/node_modules/@expo/cli/src/start/server/middleware/inspector/JsInspector.ts:91:16)
    at queryInspectorAppAsync (/Users/jrjenkins/<app-name>/app/node_modules/@expo/cli/src/start/server/middleware/inspector/JsInspector.ts:84:16)
    at /Users/jrjenkins/<app-name>/app/node_modules/@expo/cli/src/start/server/middleware/inspector/createJsInspectorMiddleware.ts:23:17 {
  [cause]: ConnectTimeoutError: Connect Timeout Error
      at onConnectTimeout (node:internal/deps/undici/undici:7760:28)
      at node:internal/deps/undici/undici:7716:50
      at Immediate._onImmediate (node:internal/deps/undici/undici:7748:13)
      at processImmediate (node:internal/timers:476:21) {
    code: 'UND_ERR_CONNECT_TIMEOUT'
  }
}

[aabuhijleh]

@jrjenkins555 I opened an issue in expo repo here expo/expo#33833 to track this.

[aabuhijleh]

I was able to resolve this issue by running the app like this npx expo start --localhost and making 2 modifications in the @expo/cli package.

I've detailed this here: expo/expo#33833 (comment)

Of course, this should be resolved by the expo team and they should handle the --localhost argument better.

[adsalihac]

The copy option is not functioning. Device (MAC)

[huntie]

Can you give more info?

[fernandoheusi]

Is there any solution for this? It also does not work on my mac

[the-kenneth]

Seems a lot of places that have a right click menu option for copying don't work. Im using a Mac too, I haven't tried other platforms.

e.g. Right clicking to copy link address or file name in the Sources tab doesn't work. Also all the right click copy options don't work in the Expo network tab.

[vallode]

Is there any possibility of silencing the information in the output of the expo start command? I must admit I am quite new to Expo, but the presence of the information gives me the impression that I have something setup incorrectly. Usually such warnings come when you are actively using a feature that will be deprecated in the future, as far as I can see I am not. This could be communicated a bit more clearly because I spent a little while trying to understand how to disable "JavaScript logs".

[huntie]

No way to silence at present.

• The deprecation notice relates to JavaScript logs streaming to your terminal — specifically, the expo start inline output.

Let’s explore a way for Frameworks to disable this warning. cc @byCedric

[micekr]

I can no longer see my ReactNative app Typescript source code within

Chrome > ReactNativeDevTools
Sources (tab)
"React Native (sub-tab)" within "Sources (tab)"

therefore I can NOT debug this ReactNative Typescript code ANYMORE !

see below:
There was a "Page (sub-tab)" BEFORE where I could see the ReactNative app Typescript source code

---

I am using expo to build the ReactNative app and native (android) code via the following process:

connect desktop to physical android cell via USB cable

executing
npx expo run:android
on my desktop terminal

app is deploying and launching in my physical android cell
my desktop and cell are communication via adb successfully
loading DevTools by pressing J (to load the debugger) from desktop terminal

^^^^^^^^^^^^^^^

package.json
"expo": "~52.0.11",
"react-native": "0.76.3",

---

Previously in
Chrome > DevTools
Sources (tab)

"Page (sub-tab)" within "Sources (tab)"

I would see the following top parent node show up like follows:

23.28.X.X.XXX:8081 < ip of my windows local desktop
node_modules/expo-router/entry.bundle
folder (no name)
c:\folder-on-my-computer\app(tabs)\index.tsx

I could then click the last node
c:\folder-on-my-computer\app(tabs)\index.tsx
and it's actual index.tsx code would show up in the RIGHT pane for me to set breakpoints and step thru the code

[huntie]

@micekr Viewing all app source code should be fully supported in React Native DevTools, although we're aware of an issue of sources being hidden in some Expo projects where the JS entry point is within node_modules/. Please:

• Check your source file ignore list under DevTools > Settings > Ignore List > Custom exclusion rules, and uncheck any custom exclusion rules.
• Check your metro.config.js file and remove any override of serializer.isThirdPartyModule.

We recently pushed a fix for this in 0.76.5: facebookexperimental/rn-chrome-devtools-frontend#136.

[micekr]

@micekr Viewing all app source code should be fully supported in React Native DevTools, although we're aware of an issue of sources being hidden in some Expo projects where the JS entry point is within node_modules/. Please:

• Check your source file ignore list under DevTools > Settings > Ignore List > Custom exclusion rules, and uncheck any custom exclusion rules.
• Check your metro.config.js file and remove any override of serializer.isThirdPartyModule.

We recently pushed a fix for this in 0.76.5: facebookexperimental/rn-chrome-devtools-frontend#136.

---

@huntie
Good news:

Your suggestion

• Check your source file ignore list under DevTools > Settings > Ignore List > Custom exclusion rules, and uncheck any custom exclusion rules.
  worked.

I unchecked
/node_modules/|/bower_components/
and did another app build and launch with just

npx expo
aka: "› Using Expo Go"

aka:
I did NOT have to use
npx expo run:android
for an Expo "development build"

I was then able to open a ReactNativeDevTools (instance) and SEE my ReactNative source code via:
ReactNativeDevTools (aka: chrome debugger instance)
Sources (tab)
"React Native (sub-tab)" within "Sources (tab)"

I was then able to set breakpoints and step thru the code.

More good news:
I was also able to start 2 separate
npx expo
instances.
One for my Pixel7 android emulator
and
One for my physical Pixel7 cell that was attached to my win11 desktop via a usb cable
and I was able to debug both in their own ReactNativeDevTools (instance) s.

---

Minor glitch I discovered in ReactNativeDevTools:

ReactNativeDevTools (aka: chrome debugger instance)
Sources (tab)
"React Native (sub-tab)" within "Sources (tab)"
pick any TSX file
after the TSX file shows up in the RIGHT pane
if you right-mouse-click on the (tab) title of that selected TSX file
"Copy link address" << does NOT copy the link address path
"Reveal in navigator sidebar" << this works

Desktop OS: win11

[jehillert]

I could be wrong, but I think the majority of the React Native community would kill to have react-native-debugger back in full form, and if not that, then at least the classic redux devtools experience, over any of the tools available in the debugger. We have a terminal. It console logs stuff for us. Time travel and a constantly evolving 2d representation of our state tree every time a state change occurs? You can't get that from a terminal.

I'm not suggesting the team's hard work isn't appreciated. I understand a baseline debugging experience has to be established before accommodating community tools. I also understand you made massive beneficial changes under the hood and there's nothing trivial about bringing the new debugger online. But you broke the tools we all relied upon and loved more than 2 years ago. And it was broken several times in several different ways... what junior dev is going to know they are two patch-package packages away from making their job 10 times easier? They won't, and from stack-overflow and github issue boards it sounds like 90% of us haven't figured it out. Meanwhile a new iteration of redux-devtools is nowhere in sight.

I'm glad it is still possible to make the devtools work (with hours and hours of online research). And I was glad to see that one of the bugs has actually been fixed (in reanimated). But it would be appreciated if redux was moved up in the priority list. Or at least please fix what was broken.

btw, I am uncomfortable bringing this up. I do appreciate what you guys do immensely. But this one thing just baffles me.

[wael-fadlallah]

First I want to thank the team and contributors for their effort.

I have a question about viewing/debugging local storage, is there are any suggested option to achieve this currently? as I can't see it in the new devtool

[OmkarK45]

Hi!
I was wondering if it's possible to launch the dev tools via some sort of script/shortcut command.

[Lakston]

Impossible to profile our app on android using the dev tools, I'm always getting the error when I press stop record: debugging connection was closed

using 75.x. I know this is a v76 thread but since 76 forced the jump to ios 15.2 we cant update and still dont have anything to debug or profile our app properly

[huntie]

(Response to a 0.75 issue — not React Native DevTools)

This is probably an architectural limitation of the pre-0.76 debugger backend, I'm afraid.

• Is this the JS Profiler panel? Try recording a smaller trace.
• Explore the Android Studio profiling features.
• Depending on what you're trying to profile, consider the React Profiler panel in standalone React DevTools.

[Lakston]

• tried a < 2s trace, same problem
• android studio does not help profiling the JS side
• react devtools cant connect because of the "calling synchronous methods..." error that was broken a few releases ago

[dtJon]

How do I debug startup events?

1. I start my app from expo (in my case iOS).
2. I hit "j"
3. By the time the debugger comes up all the interesting stuff, like app initialization, is done.

I think "ok, just reload the app", but it seems to get disconnected from the debugger with the reload. Is there a best way to make sure that the debugger is attached before the app loads? Right now I'm having to debug everything with console.log statements.

[dtJon]

I added a pause and it helps.

export default function RootLayout() {
  const [isLoaded, setIsLoaded] = useState<Boolean>(false);

  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      setTimeout(() => {
        setIsLoaded(true);
        SplashScreen.hideAsync();
      }, 3000);
    }
  }, [loaded]);

  if (!isLoaded) {
    return null;
  }

  return (
...

[huntie]

• Why not set a breakpoint before the part you want to debug?
• You can also use cmd+R within DevTools to reload the connected app. This should remain connected — if you are experiencing disconnects, this is a bug (check you are on React Native 0.76).

[dtJon]

Thanks huntie. The problem I was having was that I would set the breakpoint and it would already be past that part by the time the devtools connected. When I reloads it appears to be connected (it doesn't show the disconnect message) but no breakpoints will get hit, and in fact I cannot even set a breakpoint. I am running 0.76.

[aimachinedream]

Is there anyway to customize the colors? The dark mode isn't very high contrast and hard for older eyes to read. It doesn't seem to adhere to custom chrome themes.

[aimachinedream]

There is an option to match appearance in standard dev tools, but it is missing in React Native dev tools.

[gemartinez56]

Why was DevSettings remoteDebuggingEnabled option deprecated? There was the Devtools that used this setting now is broken.

[katosan0904]

After an error occurs, pressing "r" on the simulator to reload causes subsequent errors and console.log outputs to no longer appear.

1.Intentionally trigger an error.
2.The error and related console.log outputs appear in React Native DevTools (as expected).
3.Press "r" on the iOS simulator to reload.
4.Intentionally trigger the error again.
5.From the second attempt onward, the error and console.log outputs no longer appear.
Is this expected behavior?

[prashanFOMO]

It seems that connecting DevTools to a device that's connected via npx expo start --tunnel doesn't work. Not sure if the issue is on the DevTools side or the Expo side. expo/expo#31287

[Cyberax]

I have no problems with debuggers. You want to use this abomination, it's up to you.

But why are you removing console logs?!?