react-native: Open Debugger in iOS simulator not working in RN 0.70.0
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® Core™ 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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 46
- Comments: 77 (7 by maintainers)
Got the same error after I just created a new project. Setting
:hermes_enabled => false
resolves the problem. I disabled Flipper as well, not sure if that had any effect.I just switched to expo…
A few things going on here:
info Opening flipper://null/Hermesdebuggerrn?device=React%20Native...
Because you don’t have Flipper running, it tries to open it and fails witherror Browser exited with error:, Error: invalid url, missing http/https protocol
All of that said:
For now, using Flipper as debugging tool is the solution you should go for.
You can use browser debugger temporarily.
Set:
hermes_enabled => false
Install pods:
cd ios && pod install && cd ..
Build App:
npx react-native run-ios
The approaches of debugging you have tried are likely for the JavaScriptCore engine and not the Hermes engine which is the default in 0.70.0. Hermes directly implements the Chrome inspector protocol.
See Debugging JS on Hermes using Google Chrome’s DevTools for debugging on Hermes.
For VSCode you should use the
Debug iOS Hermes - Experimental
launch configuration and not theDebug iOS
launch configuration.I created a package to solve this issue
basically, it is doing
NativeModules.DevSettings.setIsDebuggingRemotely(true);
https://www.npmjs.com/package/react-native-devsettings?activeTab=readmeSame here, temporarily disable hermes “:hermes_enabled => false” works for me.
steps:
i’m using react native debugger
This issue seems to be happening still on 0.71.1
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: https://github.com/facebook/react-native/blob/7620509b89e8205a6521b70d2942bca4012db6d2/React/CoreModules/RCTDevMenu.mm#L262If 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?
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).Flipper doesn’t work well either
@HoaiHuynh there is currently a bug preventing the loading of source maps in that case. We are currently working on a fix.
In the meantime, the primary way to debug JavaScript running in Hermes is via Flipper.
it does works on changing Hermes engine in pod file to false
:hermes_enabled =>
true,If not working after this run
pod install
and build you project again. This worked for meHi, I can confirm that using:
"react": "18.1.0", "react-native": "0.70.0",
and:hermes_enabled => true,
using for example google chrome to debug your code etc is not working, but white same configuration and hermes_enabled => false is working.Maybe someone knows if there is a way to still use a browser to debug your app but with hermed_enabled => true?
This approacb may cause to not use all benefits of the new architecture
Iterated on this 👆, to add it in the dev menu:
For me I have typed manually http://localhost:8081 then the debug console opened on chrome. #Hope This helps
You can check the answer on this video https://www.youtube.com/watch?v=XCmmc7G5eXw
It does work after changing from
:hermes_enabled => true
to:hermes_enabled => false
, but why??@mattbfb i have node 18 if it matters npx react-native init DebugProject && cd “./DebugProject” && npx react-native run-ios Flipper is of latest version just running template project on ios i go Cmd+D > Open Debugger > console logs
then i try to open Flipper manually because it’s not started via upper steps
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?
Wonder if this is helpful for you
https://reactnative.dev/docs/next/hermes#debugging-js-on-hermes-using-google-chromes-devtools
Try #34608
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.
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
For React native version 0.70.x there is no need to set
:hermes_enabled => false
just use https://fbflipper.com/ for debugging.In version 0.70.x metro is trying to reach the above URL which opens the flipper debugging tool.
@mattbfb i use template project running it right after it’s installed and built. When i open Flipper i try to set breakpoint on line 61 on my screenshot
flipper behaves itself strangely. when i reload app, breakpoint doesn’t work and i can’t remove it if i write debugger in code. it works fine
@skurgansky-sugarcrm Thanks for sharing those details.
The filesystem view is currently not populated by the Hermes debugger, but you can find an “Open file” menu item in the collapsed items under the vertical “…” to the right of the “Filesystem” and “Snippets” tab in your screenshot.
e.g. in the
DebugProject
that you created above, if you add some code toApp.js
and then open that file in the “Hermes Debugger (RN)”, you should be able to set and reach a breakpoint e.g.:@kelset in the future is there a way to debug via Chrome?
Thanks, I did try that at one point but it did not work for me.
Thank you it worked.
It works now!
@gusgard Omg I love you this works.
because Hermes can’t use source maps now. it’s fixed in 0.71 version. checkout that change log for RC of RN
@mattbfb looks like i can pause in some onPress handler though breakpoint is not visible on line label position. with the useEffect above. when i set a breakpoint inside of it and try to reload the app, it didn’t work for me
The issue with findXcodeProject is due to the VS Code react-native plugin needing an update to fix the path. A temp solution can be found here https://github.com/microsoft/vscode-react-native/issues/1781#issuecomment-1195610125