react-native-windows icon indicating copy to clipboard operation
react-native-windows copied to clipboard

Breakpoints only work for a while when direct debugging the Hermes JS engine

Open gabor-seres-sap opened this issue 1 month ago • 2 comments

Problem Description

We as an SAP development team want to upgrade React Native Windows from 0.71.37 to 0.71.46. After we’ve done, we faced Hermes direct debugging issue:

  • Breakpoints hit and stop the execution just for a while
  • Breakpoints are later disabled, and warning sign indicates that they are no longer available

image

Steps To Reproduce

  1. Create a RNW app based on the default template. Create a 0.71.46 React Native Windows app with C# and Hermes usage then run it in Debug:

npx [email protected] init "RNW_71_46" --version "0.71.19" cd RNW_71_46 npx react-native-windows-init --overwrite --version "0.71.46" --language "cs" --useHermes npx react-native run-windows

  1. Enable direct debugging through developer menu

  2. Direct debug RNW app using Hermes JS engine with VS Code (1.89.1) using the React Native Tools extension (v1.13.0), 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

Option B: Attach VS Code to Metro that's already running

  1. Add and remove breakpoints several times during the debugging session

Another variant for this issue is when the execution stops at non-existent breakpoints that we removed earlier:

image

RNW 0.71.46 introduced 0.1.21 version of Microsoft.JavaScript.Hermes NuGet package: https://www.nuget.org/packages/Microsoft.JavaScript.Hermes/0.1.21

  • Side note: this seems to have solved the JS expression evaluation related problem: https://github.com/microsoft/react-native-windows/issues/12654

Expected Results

We need debugging experience like we had before using RNW 0.71.37 which includes ReactNative.Hermes.Windows NuGet package: https://www.nuget.org/packages/ReactNative.Hermes.Windows/

CLI version

10.2.7

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
    Memory: 31.96 GB / 63.71 GB
  Binaries:
    Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.2.3 - 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.10.34928.147 (Visual Studio Enterprise 2022), 17.4.34729.48 (Visual Studio Enterprise 2022), 17.6.34302.98 (Visual Studio Enterprise 2022)
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.19 => 0.71.19
    react-native-windows: 0.71.46 => 0.71.46
  npmGlobalPackages:
    *react-native*: Not Found

Community Modules

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

gabor-seres-sap avatar Jun 07 '24 14:06 gabor-seres-sap