Cannot find a remote target in Chrome while debugging the app with Hermes

[JiglioNero]

Hi I am a member of the vscode-react-native development team. We tested Hermes debugging of the recent versions of React Native for Windows and found out that for react-native-windows v0.66.2 and newer, we couldn't find a debuggable target for the app in the Google Chrome inspect page (chrome://inspect). We configure the project in accordance with official guides: here and here. Here is our steps to reproduce this behavior:

1. Initialize a new RN application using the npx react-native init <projectName> --template react-native@^0.66.0 command
2. Initialize react-native-windows using the npx react-native-windows-init --overwrite --useHermes command
3. After the process is complete, run the RNW application in direct debugging mode using the npx react-native run-windows --direct-debugging command
4. Open Google Chrome inspect page (chrome://inspect) and check for debuggable targets

We also found out that this problem isn't reproduced in an application with react-native-windows v0.66.0. We would like to ask you if it may be a bug, or something has been changed in apps configuration steps and we need to customize some parameters additionally to enable Hermes debugger?

My environment:
Windows 10 Enterprise - 19043.1288
react-native v0.66.0
react-native-windows v0.66.3

[RedMickey]

Hi, I found out that this behavior started to reproduce after this change. It seems that m_devSettings->jsiEngineOverride equals to JSIEngineOverride::Default instead of JSIEngineOverride::Hermes here. The project (RNW v0.66.5) has been configured for Hermes and the UseHermes property is set to true in the ExperimentalFeatures.props file.
I wonder how JSIEngineOverride can be set to JSIEngineOverride::Hermes. Are some additional configurations required besides initialization with the npx react-native-windows-init --overwrite --useHermes to enable Hermes debugger?

[acoates-ms]

Can you try connecting using port 9223?

[RedMickey]

@acoates-ms I tried to connect to the port 9223, but it seems to be unavailable.

Also localhost:8081 returns an empty array.

I found out that if I change this condition in react-native-windows dependency the following way:

- if (m_devSettings->jsiEngineOverride == JSIEngineOverride::Hermes && m_devSettings->useDirectDebugger && !m_devSettings->useWebDebugger)
+ if (m_devSettings->jsiEngineOverride == JSIEngineOverride::Default && m_devSettings->useDirectDebugger && !m_devSettings->useWebDebugger)

then it will be possible to enable Hermes debugger and connect to it from Google Chrome.

[acoates-ms]

@mganandraj - It looks like the logic in here should use some logic to determine the engine being used. The jsiEngineOverride property shouldn't be used to detect if its hermes, since default might also mean hermes.

[JeremyBradshaw7]

I'm also having this issue in 2023 using RN 0.70 !

[antoniovuono]

Same here in 0.71.11

[Hao-yiwen]

I also have this qs.

[acoates-ms]

Can you open an issue with more specific verison details, and repro steps?