Open Debugger in iOS simulator not working in RN 0.70.0

[rstor1]

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

[Bayramito]

quick question do you ran it with hermes enabled on Podfile ?

[rstor1]

quick question do you ran it with hermes enabled on Podfile ?

Podfile shows: :hermes_enabled => true

[cuongvoong]

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.

[Bayramito]

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

[justin-tay]

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.

[rstor1]

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 did try both of those but it does not work for me. Following the link about debugging JS on Hermes using Google Chromes Devtools does not show the JS code to set breakpoints. I tried adding the folders to the Files tab in the tools but still nothing. As for the Debug iOS Hermes - Experimental launch config option here is what I get:

[rstor1]

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 tried setting hermes to false along with Flipper and still not working for me either. I get:

[rstor1]

I can confirm that when creating an app with RN 0.69.0 it works as expected. CMD+D opens menu, click on Debug with Chrome opens up the debugger and there is no error in metro terminal.

For now, I suppose I will try to go back to RN 0.69.0.

[cuongvoong]

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

[rstor1]

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.

[Siliconvelly]

I think :hermes_enabled => true, making it false like :hermes_enabled => false, is working and i am able to debug with ios. but i want to know if i disable hermes then it can make any issue or problem in our development?

:hermes_enabled => true and debugger not working so if you want to debug ios you have to disable hermes.

otherwise, with :hermes_enabled => true using debugger i don't know how will work that.

[KokoTa]

@Siliconvelly I have the same problem, i want to use hermes, but i can't debugger by phone

[maxmandia]

experiencing the same issue. My project has flipper disabled fyi

[Bayramito]

Try #34608

[Frit]

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

[maxmandia]

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

I just switched to expo...

[Frit]

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

I just switched to expo...

It appears I have no other choice :)

[MahmoudAziz1996]

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 works for me - thanks

[kelset]

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.

[HoaiHuynh]

@kelset in the future is there a way to debug via Chrome?

[Mihai-github]

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?

[ZoHayk]

Hello everyone. I'm also waiting for a fix and looking for a solution. I suggest using this before debugging is fixed.

https://github.com/infinitered/reactotron

This is the best debugger replacement in my opinion.

[jyotiprakash111]

For me I have typed manually http://localhost:8081 then the debug console opened on chrome. #Hope This helps

[Azaz0723]

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

[mattbfb]

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

[skurgansky-sugarcrm]

Flipper doesn't work well either

[mattbfb]

@skurgansky-sugarcrm can you share more details about your environment, the steps you've attempted, and any errors you receive?

Launching a new app via npx react-native init DebugProject && cd "./DebugProject" && npx react-native run-android and then opening the "Hermes Debugger (RN)" in Flipper should still work in RN 0.70 (e.g. you can press the pause button, then scroll the app to trigger a break. confirmed locally). Does this fail for you?

[skurgansky-sugarcrm]

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

[mattbfb]

@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.:

[skurgansky-sugarcrm]

@mattbfb i should be able to set breakpoint but i just can't. =(

debugger in Flipper (Version 0.166.0 (50.0.0), RN 0.70.1) just does not want to: 1) pause where i clicked to create a breakpoint like if source maps were not correct 2) remove them when i try (Remove breakpoint or Remove all breakpoints )

[mattbfb]

@skurgansky-sugarcrm can you share more about the exact steps you're trying? Are you referring to putting the same code snippet (setInterval(() => { const a = 1; const b = 2; const c = a + b; console.log(c); }, 1000);) in the same file (App.js in the newly-created project), or are you trying a different scenario?

[skurgansky-sugarcrm]

@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

[mattbfb]

@skurgansky-sugarcrm I'm not certain with when that useEffect() code will be invoked. Is it only breakpoints during startup that are missed, or can you not reach any breakpoints, even ones that execute well after the debugger is attached?

[skurgansky-sugarcrm]

@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

[HaykZiphycare]

@rstor1 Is this issue still unresolved?

[H4mxa]

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

[RSchneider94]

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.

hmmm, but if it's necessary to use use_frameworks! inside of the project, it's necessary to disable Flipper, any solution then? thanks!

[skurgansky-sugarcrm]

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

[JeffGuKang]

You can use browser debugger temporarily.

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

[caolong0204]

i couldn't open flipper to debug

[Jonathan0wh]

Is there any way we can get React Native Debugger working with Hermes engine?

[skurgansky-sugarcrm]

Is there any possibility we can get React Native Debugger working with Hermes engine?

use RN 0.71 RC version. Hermes should be fixed there. Or you can search older version which is not broken.

[emanueljcc]

react-native-debugger It doesn't work, it gives the flipper error. When will version 0.71 stable come out?

[akkadaya]

Wonder if this is helpful for you
https://reactnative.dev/docs/next/hermes#debugging-js-on-hermes-using-google-chromes-devtools

[Fredmensah]

Flipper is still working in the background, iOS is just not able to start the command to run the debugger. Disabling :hermes_enabled => false is not the ideal solution as it limits the use of the new features of 0.70. You can still access debugger-ui from http://localhost:8081/debugger-ui/ till a fix is posted on this.

[OrestGeniusee]

follow this documentation from react-native https://reactnative.dev/docs/hermes to be able to debug your RN app where Hermes is used

[AbbasTheReckoner]

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

because you need to do cd ios && pod install && cd .. and then run "npx react-native run-ios"

[senghuot-lay]

This issue seems to be happening still on 0.71.1

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

[jaexplorer]

Any update? I'd like to use React Native Debugger

[senghuot-lay]

same here, still not working for me