Open Debugger in iOS simulator not working in RN 0.70.0

[rstor1]

Description

I started the basic AwesomeProject from the getting started in the docs and found that the Open Debugger is not working. Actually, I am unable to debug in multiple ways (safari, standalone devtools, launch.json from React Native Tools in vscode). Is this a known issue? It was working with 0.69:

Version

0.70.0

Output of npx react-native info

info Fetching system and libraries information... System: OS: macOS 12.5.1 CPU: (4) x64 Intel(R) Core(TM) i5-6287U CPU @ 3.10GHz Memory: 602.00 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.13.2/bin/yarn npm: 8.18.0 - ~/.nvm/versions/node/v16.13.2/bin/npm Watchman: 2022.08.29.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild Languages: Java: 17.0.2 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.0 => 0.70.0 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

In terminal run: npx react-native init AwesomeProject

In terminal run: npx react-native start

In vscode run: npx react-native run-ios

Once ios simulator(iPhone 13, ios 15.5) opens do CMD + D on the simulator to open the menu.

Click Open Debugger

Snack, code example, screenshot, or link to a repository

[caiodeambrosio]

Same here

[caiodeambrosio]

Same here, temporarily disable hermes ":hermes_enabled => false" works for me.

steps:

• in the Podfile set ":hermes_enabled => false"
• cd ios && rm -rf Pods Podfile.lock
• pod install --repo-update
• build ios

i'm using react native debugger

[qoire]

Hey, using React Native Debugger as well (on 0.70.6).

Preface: Not an RN contributor/expert.

Digging into this a bit more it seems the Dev Settings menu will default to trying to use Flipper if devSettings.isDeviceDebuggingAvailable is true. See: https://github.com/facebook/react-native/blob/7620509b89e8205a6521b70d2942bca4012db6d2/React/CoreModules/RCTDevMenu.mm#L262

If you want a quick fix, we've had success with patching the dev menu to offer both Flipper and remote debugging, but it's a bit jank. Maybe someone from the core team can comment on why Device debugging being available removes the option to debug remotely?

diff --git a/node_modules/react-native/React/CoreModules/RCTDevMenu.mm b/node_modules/react-native/React/CoreModules/RCTDevMenu.mm
index 83ddd83..e88afd3 100644
--- a/node_modules/react-native/React/CoreModules/RCTDevMenu.mm
+++ b/node_modules/react-native/React/CoreModules/RCTDevMenu.mm
@@ -284,10 +284,9 @@ - (void)setDefaultJSBundle
                                     withBundleURL:bundleManager.bundleURL
                                  withErrorMessage:@"Failed to open Flipper. Please check that Metro is runnning."];
                            }]];
-    } else if (devSettings.isRemoteDebuggingAvailable) {
-#else
-    if (devSettings.isRemoteDebuggingAvailable) {
+    }
 #endif
+    if (devSettings.isRemoteDebuggingAvailable) {
       // For remote debugging, we open up Chrome running the app in a web worker.
       // Note that this requires async communication, which will not work for Turbo Modules.
       [items addObject:[RCTDevMenuItem

As for why switching from hermes to jsc works. I believe it's because isDeviceDebuggingAvailable is derived from a flag that jsc sets to false, but hermes sets to true (when built for debugging).

[lechinoix]

@qoire Thank you so much my life is so much better thanks to you 🚀

[skurgansky-sugarcrm]

you can't debug hermes app on React Native Debugger at all. It's possible only on flipper, chrome inspect or React Native plugin for VSCode. Which i prefer for now because its support of source maps is better. Redux devtool is also available and can connect remotely. Check @redux-devtools/remote and my issue for hermes app. Network is visible in vscode plugin RN Devtools: Network inspector.

So you 2 option to debug 1) old non hermes app with React Native Debugger, chrome inspect or React Native plugin for VSCode. 2) Flipper, chrome inspect or React Native plugin for VSCode.

[gusgard]

I created a package to solve this issue

yarn add react-native-devsettings

import 'react-native-devsettings';

basically, it is doing NativeModules.DevSettings.setIsDebuggingRemotely(true); https://www.npmjs.com/package/react-native-devsettings?activeTab=readme

[jaexplorer]

@gusgard trying now

[jaexplorer]

@gusgard Omg I love you this works.

[Barney4242]

I created a package to solve this issue

yarn add react-native-devsettings

import 'react-native-devsettings';

basically, it is doing NativeModules.DevSettings.setIsDebuggingRemotely(true); https://www.npmjs.com/package/react-native-devsettings?activeTab=readme

It works now!

[sahilbakoru]

hermes

Thank you it worked.

[ucheNkadiCode]

If you're on React Native 0.71 and using react-native-splash-screens, my metro bundle wasn't building. But I solved it by making my AppDelegate.mm like so

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure]; // If you're using react-native firebase

  self.moduleName = @"main";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  bool didFinish = [super application:application didFinishLaunchingWithOptions:launchOptions];

   [RNSplashScreen show];  // this needs to be called after [super application:application didFinishLaunchingWithOptions:launchOptions];

   return didFinish;
}

for android the builds were fine, but to still open the splash screen it was

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);
    super.onCreate(savedInstanceState);
  }

[aravi365]

https://www.npmjs.com/package/react-native-devsettings?activeTab=readme

Not able to use it on my project on latest RN with JS https://github.com/gusgard/react-native-devsettings/issues/3

[SundaramSrivastava]

For React native version 0.70.x there is no need to set :hermes_enabled => false just use https://fbflipper.com/ for debugging.

info Opening flipper://null/Hermesdebuggerrn?device=React%20Native...
error Browser exited with error:, Error: invalid url, missing http/https protocol

In version 0.70.x metro is trying to reach the above URL which opens the flipper debugging tool.

[marlti7]

use flipper

[zedfight]

Set: hermes_enabled => false

Install pods: cd ios && pod install && cd ..

Build App: npx react-native run-ios

[HosamCS]

1-Navigate to chrome://inspect in a Chrome browser instance.

2- Use the Configure... button to add the Metro server address (typically localhost:8081 as described above). 3-You should now see a "Hermes React Native" target with an "inspect" link which can be used to bring up debugger. If you don't see the "inspect" link, make sure the Metro server is running. see the docs https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools

[jay-omio]

Debugger is working fine on Simulator with hermes_enabled => true , unfortunately it's not working when I run on physical device.

App on physical device is loading rn bundle from metro server hosted on computer within same network, somehow debugger is just not working.

Hermes React Native -> inspect link is visible, which on clicking displays empty source tab. There is following error in console

Failed to fetch source map http://192.168.1.9:8081/index.map?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.goeuro.ios.ronald.dev: remote fetches not permitted

Am I missing something?

[Dror-Bar]

Hey, using React Native Debugger as well (on 0.70.6).

Preface: Not an RN contributor/expert.

Digging into this a bit more it seems the Dev Settings menu will default to trying to use Flipper if devSettings.isDeviceDebuggingAvailable is true. See:

https://github.com/facebook/react-native/blob/7620509b89e8205a6521b70d2942bca4012db6d2/React/CoreModules/RCTDevMenu.mm#L262

If you want a quick fix, we've had success with patching the dev menu to offer both Flipper and remote debugging, but it's a bit jank. Maybe someone from the core team can comment on why Device debugging being available removes the option to debug remotely?

diff --git a/node_modules/react-native/React/CoreModules/RCTDevMenu.mm b/node_modules/react-native/React/CoreModules/RCTDevMenu.mm
index 83ddd83..e88afd3 100644
--- a/node_modules/react-native/React/CoreModules/RCTDevMenu.mm
+++ b/node_modules/react-native/React/CoreModules/RCTDevMenu.mm
@@ -284,10 +284,9 @@ - (void)setDefaultJSBundle
                                     withBundleURL:bundleManager.bundleURL
                                  withErrorMessage:@"Failed to open Flipper. Please check that Metro is runnning."];
                            }]];
-    } else if (devSettings.isRemoteDebuggingAvailable) {
-#else
-    if (devSettings.isRemoteDebuggingAvailable) {
+    }
 #endif
+    if (devSettings.isRemoteDebuggingAvailable) {
       // For remote debugging, we open up Chrome running the app in a web worker.
       // Note that this requires async communication, which will not work for Turbo Modules.
       [items addObject:[RCTDevMenuItem

As for why switching from hermes to jsc works. I believe it's because isDeviceDebuggingAvailable is derived from a flag that jsc sets to false, but hermes sets to true (when built for debugging).

This did not work for me in react-native 0.72.3

[nchrisr]

React-Native newbie here. Not sure what Hermes or Flipper are, and also is there a fix that is ideal and works? or is it best to just revert to an oder version of React Native?

[Dror-Bar]

React-Native newbie here. Not sure what Hermes or Flipper are, and also is there a fix that is ideal and works? or is it best to just revert to an oder version of React Native?

You don't really want to revert to an older version of React-Native. You gain a lot from newer versions and with older versions you might have some issues when uploading to google play store (they require target API 33 now).

I haven't tested the flipper debugger yet, but that might be a tool that could help. You might want to disable hermes for now and re-enable it before uploading.

[ReactNative06]

You can check the answer on this video https://www.youtube.com/watch?v=XCmmc7G5eXw

[zohayk]

@ReactNative06 Without shutting down Hermes. This has long been clear.

[henninghall]

basically, it is doing NativeModules.DevSettings.setIsDebuggingRemotely(true);

Iterated on this 👆, to add it in the dev menu:

if (__DEV__) {
  DevSettings.addMenuItem('Debugging plz', () => {
    NativeModules.DevSettings.setIsDebuggingRemotely(true);
  });
}

[focux]

1-Navigate to chrome://inspect in a Chrome browser instance.

2- Use the Configure... button to add the Metro server address (typically localhost:8081 as described above). 3-You should now see a "Hermes React Native" target with an "inspect" link which can be used to bring up debugger. If you don't see the "inspect" link, make sure the Metro server is running. see the docs https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools

This is the way. It worked flawlessly, thank you!

[AndresHB]

I am updating my React Native project, now I am using RN 0.72.6 and I cannot deactivate Hermes because otherwise the pod install fails, I changed the following lines:

Default line: :hermes_enabled => flags[:hermes_enabled],

Changed to: :hermes_enabled => false,

And the pod install fails.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.