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

image

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 38
  • Comments: 38

Commits related to this issue

Most upvoted comments

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,

: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

就我而言,我无法使调试器或网络选项卡在适用于iOS的RN 0.70.10中以任何方式工作。而且我是否hermes_enabled真或假都没有关系(由于推送通知的 react-native-firebase 我禁用了鳍状肢)。当您需要调试仅在iOS中重现的问题时,这确实令人沮丧,因为我目前看不到任何选择。

尝试使用打开调试器选项( http://localhost:8081/debugger-ui/ )时,我仍然收到上述错误(但我不明白为什么在禁用鳍状肢时请求鳍状肢进行调试?? **信息打开 ** flipper://null/Hermesdebuggerrn?device=React%20Native… error错误 浏览器退出并显示错误:,错误:网址无效,缺少 http/https 协议 为什么这个问题完全关闭了?非 Flipper 调试器是否在启用了爱马仕的较新版本中再次工作?

在启用 Hermes 的情况下按照指南使用 chrome://inspect 时,我看到并且可以按 Hermes React Native 的检查,但只能看到控制台日志记录,没有可用的源,也没有网络选项卡。

我通常从 Xcode 运行我的应用程序。 现在尝试禁用爱马仕并运行命令 npx 反应本机运行-ios,它为我提供了一个构建失败,所以根本无法使用这种方法。 我在MacOS Ventura 13.3.1上运行,Xcode版本为14.3。 **错误 ** 无法构建 iOS 项目。我们运行了“xcodebuild”命令,但它以错误代码 65 退出。若要进一步调试生成日志,请考虑通过打开 .xcworkspace 来使用 Xcode.app 生成应用。

当尝试在没有 Xcode 的爱马仕的情况下使用时,我可以从“在 Chrome 中打开”选项打开 DevTools,但即使重新加载了几次,我仍然看不到代码。 image

还有其他可用于在iOS中调试反应本机应用程序的选项吗?因为当 Flipper 被禁用时,我看不到任何调试选项对我有用。

I ran into the same problem, which resulted in me not having any debugging tools available

Setting :hermes_enabled => false in ios/Podfile did not work for me. After I changed that I executed:

cd /ios
pod install (even tried `pod deintegrate` before this)
cd ..
npm start

Also tried npx react-native run-ios

Same error:

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

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. image

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 docs

hermes_enabled

i 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).

image

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 ?