Closed rstor1 closed 6 months ago
Same here
Same here, temporarily disable hermes ":hermes_enabled => false" works for me.
steps:
i'm using react native debugger
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).
@qoire Thank you so much my life is so much better thanks to you 🚀
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.
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
@gusgard trying now
@gusgard Omg I love you this works.
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!
hermes
Thank you it worked.
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);
}
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
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.
use flipper
Set: hermes_enabled => false
Install pods: cd ios && pod install && cd ..
Build App: npx react-native run-ios
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
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?
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
istrue
. See: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
tojsc
works. I believe it's becauseisDeviceDebuggingAvailable
is derived from a flag thatjsc
sets to false, buthermes
sets to true (when built for debugging).
This did not work for me in react-native 0.72.3
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?
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.
You can check the answer on this video https://www.youtube.com/watch?v=XCmmc7G5eXw
@ReactNative06 Without shutting down Hermes. This has long been clear.
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);
});
}
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!
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.
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.
This issue was closed because it has been stalled for 7 days with no activity.
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