react-native: Open Debugger in iOS simulator not working in RN 0.70.0

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.

Same issue on RN 0.70.0. Confirm that RN 0.69.0 works fine.

I just switched to expo…

A few things going on here:

1. the error (and you can see it in the screenshot too) is because clicking on “open debugger” triggers a command to connect to the Flipper desktop app: info Opening flipper://null/Hermesdebuggerrn?device=React%20Native... Because you don’t have Flipper running, it tries to open it and fails with error Browser exited with error:, Error: invalid url, missing http/https protocol
2. this is related to the fact that Hermes is on by default starting from 0.70.
3. as mentioned by @justin-tay, with Hermes you can not use the the “old way” of debugging via Chrome directly in browser.

All of that said:

• for some reason on my machine cmd+D didn’t open the debugging menu, nor did pressing “d” in Metro. This is something that needs to be fixed.
• the overall debugging story for react-native at the moment is a bit weak, but we are trying to get a few engineers from our companies to focus on this a bit more to improve the situation.

For now, using Flipper as debugging tool is the solution you should go for.

You can use browser debugger temporarily.

1. Open the http://localhost:8081/debugger-ui/
2. Reload simulator

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 the Debug iOS launch configuration.

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

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

This issue seems to be happening still on 0.71.1

flags = get_default_flags()
:hermes_enabled => flags[:hermes_enabled],

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

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 me

Hi, 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?

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.

This approacb may cause to not use all benefits of the new architecture

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);
  });
}

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

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

then i try to open Flipper manually because it’s not started via upper steps

1. File system panel is empty though Cmd+O can see project files
2. Breakpoints do not work at all (debugger statement helps a little here)

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.

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.

@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 to App.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?

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 microsoft/vscode-react-native#1781 (comment)

Thanks, I did try that at one point but it did not work for me.

hermes

Thank you it worked.

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!

@gusgard Omg I love you this works.

It does work after changing from :hermes_enabled => true to :hermes_enabled => false, but why??

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