react-native: Can't open Debugger and React Dev Tool
Description
Can’t open Debugger in iOS simulator, if you try to open you will get
Running "AwesomeProject" with {"rootTag":1,"initialProps":{}} info Opening flipper://null/React?device=React%20Native... error Browser exited with error:, Error: invalid url, missing http/https protocol
Version
0.70.0
Output of npx react-native info
info Fetching system and libraries information… System: OS: macOS 12.5.1 CPU: (8) arm64 Apple M1 Memory: 153.98 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm Watchman: 2022.09.05.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/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: 2021.2 AI-212.5712.43.2112.8609683 Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild Languages: Java: 18.0.2.1 - /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
before I install the latest version of react native,
I followed the guide of RN official site
npm uninstall -g react-native-cli @react-native-community/cli
then
npx react-native init AwesomeProject
after app build successfully, my simulator pops up and run the app.
then click iOS simulator -> Device -> shake
click Open Debugger
. You will see the flowing message in terminal
info Opening flipper://null/React?device=React%20Native... error Browser exited with error:, Error: invalid url, missing http/https protocol
Snack, code example, screenshot, or link to a repository
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 38
- Comments: 38
Commits related to this issue
- Use jsc instead of hermes on ios To fix debugging, see https://github.com/facebook/react-native/issues/34624 — committed to alephium/mobile-wallet by nop33 a year ago
Update: :hermes_enabled => false in podfile
then Install pods cd ios && pod install && cd … Build App npx react-native run-ios worked for me
You have to Set :hermes_enabled => false in podfile
You should try :hermes_enabled => false in podfile
When following the docs for hermes, I only have the logs of the console in the debugger. I definitely need those Flipper or React Native debugger features (network inspect, JS breakpoints, React Navigation debugger). This makes it really hard for me to work on iOS locally because I need to disable Hermes, pod install and when finished to enable Hermes pod install. This is a very long process and it makes me work without debugger most of the time so real poor Dev experience.
I think this should be fixed for real, pretty surprised that this issue is closed.
:hermes_enabled => false did not work. having same issue,
you need to re-install pods after any change in podfile
:hermes_enabled => false
This one works, but it’s super bad that we need to do magic fixes to see a console log in the debugger 😦
Turning off Hermes resolves the issue, but you might want to keep Hermes enabled because of the related performance benefits.
You can still use Browser debugging, but instead of opening from inside the simulator you have to follow this guide
I ran into the same problem, which resulted in me not having any debugging tools available
Setting
:hermes_enabled => false
inios/Podfile
did not work for me. After I changed that I executed:Also tried
npx react-native run-ios
Same error:
I am using “react-native”: “0.71.3”,
Any suggestion?
I don’t know if this is the ideal solution, but I ended up temporarily disabling Hermes
:hermes_enabled => false
and then enabling it back after debugging.In my case, I cannot make the debugger or Network tab work in any way in RN 0.70.10 for iOS. And it doesn’t matter if I have hermes_enabled on true or false (I have flipper disabled because of react-native-firebase for push notifications). And when you need to debug an issue reproducing only in iOS, this is really frustrating, as I currently see no option for this.
When trying to use the Open debugger option (http://localhost:8081/debugger-ui/) I still get the said error (but I don’t understand why is flipper requested for debugging when flipper is disabled ??): info Opening flipper://null/Hermesdebuggerrn?device=React%20Native… error Browser exited with error:, Error: invalid url, missing http/https protocol Why is this issue altogether closed? Is the non-Flipper debugger working again in the newer versions with hermes enabled?
When using chrome://inspect following the guide with hermes enabled I see and can press inspect for Hermes React Native, but only see the console logging, no Sources are available and no Network tab.
I usually run my app from Xcode. Now trying to disable hermes as well and run command npx react-native run-ios, it gives a BUILD FAILED for me, so cannot use this approach at all. I run on MacOS Ventura 13.3.1 with Xcode Version 14.3. error Failed to build iOS project. We ran “xcodebuild” command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening <AppName>.xcworkspace.
When trying to use without hermes from Xcode I can get the DevTools open from the Open in Chrome option, but I still don’t see the code, even after reloading several times.
Any other options available for debugging react native apps in iOS? Because I can see no debugging option works for me when Flipper is disabled.
You can leave
hermes_enabled
to true and open the debugger like describe in the docsi love you ❤️
Installed this https://github.com/gusgard/react-native-devsettings and it works with Hermes enabled. Breakpoints in dev tools work as well as
debugger
statements in your JS code.After trying a million things, I installed Flipper and its logs seemed to work fine (even with Hermes).
Yes, I had the same problem, and now, I use react-native firebase, which means I don’t have any debugging tools available
When I set hermes_enabled to false, the debugger worked for me, but when I’m trying to make API request (using axios) the app and the debugger stop working
This problem is is bit tricky we can disable herms but those who enabled herms settings for RNFirebase will ended up with issues, using Debugging JS on Hermes using Google Chrome’s DevTools is works fine but every-time i start working i have to do the same, is there any permanent solution for this issue available ?