Variables in watch window are not evaluated when direct debug RNW apps using the Hermes JS engine

[gabor-seres-sap]

trafficstars

Problem Description

We as an SAP development team want to use Hermes direct debugging feature. We have synchronous calls to native module methods so Web debugging is not an option for us. After we upgraded from React Native Windows 0.71.37 to 0.72.24 we faced Hermes direct debugging issue:

• Breakpoints hit and stop the execution
• But the scope variables and Watch window cannot be evaluated

Steps To Reproduce

1. Create a RNW app based on the default template. The issue affects both RNW 0.72.24 and 0.73.4:

• Create a 0.72.24 React Native Windows app with C# and Hermes usage then run it in Debug:

npx [email protected] init "RNW_72_24" --version "0.72.6" cd RNW_72_24 npx react-native-windows-init --overwrite --version "0.72.24" --language "cs" --useHermes npx react-native run-windows

OR

• Create a 0.73.4 React Native Windows app with C# and Hermes usage then run it in Debug:

npx [email protected] init "RNW_73_4" --version "0.73.0" cd RNW_73_4 npx react-native-windows-init --overwrite --version "0.73.4" --language "cs" --useHermes npx react-native run-windows

2. Enable direct debugging through developer menu

3. Choose one of the possible approaches below (a. b. c. or d.)

a. Direct debug RNW apps using the Hermes JS engine with Edge by using the Edge Developer Tools, according to: https://github.com/microsoft/react-native-windows-samples/blob/main/docs/debugging-javascript.md#using-the-edge-developer-tools-1

b. Direct debug RNW apps using the Hermes JS engine with VS Code's built-in Node.js debugger, according to https://github.com/microsoft/react-native-windows-samples/blob/main/docs/debugging-javascript.md#using-visual-studio-code

c. Direct debug RNW apps using the Hermes JS engine with VS Code (v1.85.2) using the React Native Tools extension (v1.12.3), according to https://github.com/microsoft/react-native-windows-samples/blob/main/docs/debugging-javascript.md#using-visual-studio-code-with-the-react-native-tools-1

d. Flipper (0.239.0) We could attach to Hermes using Flipper previously when we had RNW 0.71.37. When RNW version is 0.72.24 or 0.73.4 then React Dev Tools and Logs work fine but Hermes Debugger indicates “Metro is connected but no Hermes apps were found.”

---

Direct debug RNW apps using the Hermes JS engine with Visual Studio (LTSC 17.6.10) with the debugger from the Node.js development workload according to https://github.com/microsoft/react-native-windows-samples/blob/main/docs/debugging-javascript.md#using-visual-studio-hermes

• This approach throws an error when try to attach Hermes, this symptom should be scope of another issue.

---

The content of http://localhost:8081/json

[
    {
        "id": "0-1",
        "title": "Hermes",
        "faviconUrl": "https://reactjs.org/favicon.ico",
        "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D1",
        "type": "node",
        "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=1",
        "vm": "Hermes",
        "deviceName": "*****"
    }
]

Expected Results

When direct debug Hermes JS engine then scope variables and the watch window should be evaluated properly when breakpoints hit and stop the execution. Similar to direct debug RNW apps using the (default) Chakra JS engine with Visual Studio's built-in Script debugger which works fine using RNW 0.72.24 and 0.73.4, according to https://github.com/microsoft/react-native-windows-samples/blob/main/docs/debugging-javascript.md#using-visual-studio-chakra

• Variables are evaluated properly in Watch:

CLI version

11.3.7

Environment

System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
  Memory: 28.46 GB / 63.71 GB
Binaries:
  Node:
    version: 18.19.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 10.2.3
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.6.34302.98 (Visual Studio Enterprise 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.6
    wanted: 0.72.6
  react-native-windows:
    installed: 0.72.24
    wanted: 0.72.24
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

No response

[chrisglein]

Is it just the Watch window that doesn't work? Or is the same true for the Locals window?

[gabor-seres-sap]

Is it just the Watch window that doesn't work? Or is the same true for the Locals window?

There is no way to retrieve the value of any variables:

• Scope / Local variables are not loaded at all (You can see it on the screenshots in the description of this issue)
• Hovering over a variable doesn't work
• Writing to the Console doesn't return the value of any variables from the scope
• Expression failed to be evaluated in the Watch

When I switch to RNW 0.71.x then all of the above approaches work fine:

[gabor-seres-sap]

Can we expect to have a fix for 0.72 version?

[gabor-seres-sap]

One addition: in RNW 0.72 https://www.nuget.org/packages/ReactNative.Hermes.Windows/ NuGet package was replaced with https://www.nuget.org/packages/Microsoft.JavaScript.Hermes

[jonthysell]

This issue seems to be related to this upstream Hermes issue: https://github.com/facebook/hermes/issues/1087.

It's possible this may require getting an update into hermes-windows with this commit: https://github.com/microsoft/hermes-windows/commit/f6aed0e0fe1e106fe22a65e701e35246515f0900

[jonthysell]

It should also be noted that breakpoints are not lining up to the correct lines with any debuggers with Hermes, which should also be fixed if we integrate a newer hermes build

[chrisglein]

Adding link to documentation PR that adds workarounds and references this issue: https://github.com/microsoft/react-native-windows-samples/pull/931