Local Variable values not displaying when debugging React Native Windows app in VS Code

[Yajur-Grover]

🐛 What is the bug? How can we reproduce it?

When setting a breakpoint in a JavaScript source file in a React Native Windows application, with a Node.js debugger attached, there are no local variables being displayed in the Variables section in the Run and Debug menu. Additionally, when I add variables to 'Watch', they all evaluate to the following error message: 'Uncaught Error: Can't evalInFrame: Environment not found'.

Please put here any steps, code or any information that can help us reproduce the error on our side so we can fix it:

1. Clone React Native Gallery and build and run the application.
2. Enable Direct Debugging for VS Code using the instructions here: https://microsoft.github.io/react-native-windows/docs/debugging-javascript#direct-debugging.
3. Set a breakpoint on any onPress function on the VirtualizedListExamplePage.js file.
4. Add some variables within that function to 'Watch'.
5. Wait until the break point is hit and look at the value of the variables in 'Watch'.

Expected behavior

I was expecting being able to read the values of the variables that I add to 'Watch' at the instance when I hit a set breakpoint.

Debug output

Debug Console

The error below comes from a yellow box warning error that is present throughout the application and is unrelated to the specific breakpoint that is being set. ```text All focusable views should report proper accessibility information. Views marked as focusable should always be accessible. at View (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:60075:43) at Pressable (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:120640:27) at anonymous (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:76320:62) at PlatformPressable (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:183722:25) at LinkPressable (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:182092:21) at RCTView at View (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:60075:43) at DrawerItem (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:182142:93) at RCTView at View (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:60075:43) at CustomDrawerContent (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:125867:118) at RCTView at View (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:60075:43) at AnimatedComponent(View) (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:187545:38) at RCTView at View (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:60075:43) at AnimatedComponent(View) (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:187545:38) at Dummy (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:189241:24) at Drawer (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:188815:36) at RCTView at View (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:60075:43) at Drawer (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:184107:38) at DrawerViewBase (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:189860:21) at RCTView at View (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:60075:43) at CompatNativeSafeAreaProvider (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:181938:24) at SafeAreaProvider (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:181806:24) at SafeAreaProviderCompat (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:183913:24) at DrawerView (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:190098:27) at PreventRemoveProvider (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:130504:25) at NavigationContent (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:131315:22) at anonymous (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:131331:27) at DrawerNavigator (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:190418:18) at MyDrawer at EnsureSingleNavigator (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:127443:24) at BaseNavigationContainer (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:127040:28) at ThemeProvider (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:132846:21) at NavigationContainerInner (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:132732:26) at App (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:125963:50) at RCTView at View (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:60075:43) at RCTView at View (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:60075:43) at AppContainer (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:59925:36) at rngallery(RootComponent) (http://localhost:8081/index.bundle//&platform=windows&dev=true&hot=true&inlineSourceMap=true:111340:28) ```

React Native output channel

```text N/A - output channel was blank, there was no option to select React-Native. ```

Developer Tools console

```text INFO Started local extension host with pid 39820. log.ts:427 WARN Skipping extension /c:/Users/yajurgrover/.vscode-insiders/extensions/ms-vscode.js-debug-1.83.1 in favour of the builtin extension /c:/Users/yajurgrover/AppData/Local/Programs/Microsoft VS Code Insiders/resources/app/extensions/ms-vscode.js-debug. log.ts:417 INFO [perf] Render performance baseline is 29ms 12log.ts:427 WARN [cmake-tools]: Couldn't find message for key cmake-tools.configuration.cmake.options.advanced.statusBarLength.description. 3log.ts:437 ERR No expression to evaluate log.ts:437 ERR No expression to evaluate ```

Screenshot of 'Watch' variables section:

Corresponding break point:

Environment

Please tell us about your system and your project:

• npx react-native doctor or npx expo doctor if your project is using Expo:

Windows
 ✓ Free space on current drive > 15 GB - Free space on current drive > 15 GB
 ✓ Installed memory >= 16 GB - Installed memory >= 16 GB
 ✓ Windows version >= 10.0.17763.0 - Windows version >= 10.0.17763.0
 ✓ Developer mode is on - Developer mode is on
 ✓ Long path support is enabled - Long path support is enabled
 ✓ Visual Studio 2022 (>= 17.3) & req. components - Visual Studio 2022 (>= 17.3) & req. components
 ✓ Node.js (LTS, >= 18.0) - Node.js (LTS, >= 18.0)
 ✓ Yarn - Yarn
 ✓ .NET SDK (LTS, = 6.0) - .NET SDK (LTS, = 6.0)

Common
 ✓ Node.js - Required to execute JavaScript code
 ✓ yarn - Required to install NPM dependencies
 ✓ Metro - Required for bundling the JavaScript code

Android
 ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device.
 ✓ JDK - Required to compile Java code
 ✓ Android Studio - Required for building and installing your app on Android
 ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation
 ✖ Android SDK - Required for building and installing your app on Android
   - Versions found: N/A
   - Version supported: 29.0.2

Errors:   2
Warnings: 0

• envinfo:

  System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 AMD Ryzen Threadripper PRO 3945WX 12-Cores
    Memory: 44.34 GB / 63.86 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Managers:
    pip3: 24.0 - C:\Python311\Scripts\pip3.EXE
  Utilities:
    Git: 2.44.0. - C:\Program Files\Git\cmd\git.EXE
    Curl: 8.4.0 - C:\windows\system32\curl.EXE
  SDKs:
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.18362.0, 10.0.19041.0, 10.0.22000.0, 10.0.22621.0
  IDEs:
    Android Studio: AI-213.7172.25.2113.9123335
    Visual Studio: 17.9.34607.119 (Visual Studio Enterprise 2022), 16.11.34601.136 (Visual Studio Enterprise 2019)
  Languages:
    Bash: 5.1.16
    Java: 18.0.2.1 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
    Python: 3.11.8 - C:\Python311\python.EXE
  Databases:
    SQLite: 3.32.2 - C:\Users\yajurgrover\AppData\Local\Android\Sdk\platform-tools\sqlite3.EXE
  Browsers:
    Edge: Chromium (122.0.2365.59)
    Internet Explorer: 11.0.22621.1

• React Native Tools extension version: 1.12.3
• Expo SDK version (if applicable): N/A

[EzioLi01]

Hey @Yajur-Grover, I think using node.js debug request should be related to vscode built-in extension vscode-js-debug. All default debug configurations should be supported in js-debug.

React-native-tools is the separate extension should be installed manually. Checked your repro steps, it should use vscode default debug config: Node.js: attach. Please create an issue in vscode-js-debug repo.

Any other questions please let me know, thank you!

[Yajur-Grover]

@EzioLi01 is this the extension you meant to link?: https://github.com/microsoft/vscode-js-debug. The link in your comment leads me to the current repo.

[EzioLi01]

@Yajur-Grover Yes, this is the vscode built-in debug extension, also it's the upstream depended extension for almost of vscode debugger extensions.

But one thing I want to mention that I have tried on Edge DevTools for hermes direct debugging using react-native template app, still got same error, so I'm not sure if it's the valid bug for vscode-js-debug.

[gabor-seres-sap]

Hi @Yajur-Grover, Hi @EzioLi01,

Please look into a related and more generic issue what I created: https://github.com/microsoft/react-native-windows/issues/12654

As I detailed this direct debugging using Hermes JS engine issue affects

1. Edge Developer Tools
2. VS Code built-in Node.js debugger
3. VS Code React Native Tools extension
4. Facebook Flipper: https://fbflipper.com/

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

[EzioLi01]

Checked same scenario on react-native mobile platform, this issue is not repro.

[Yajur-Grover]

@EzioLi01 okay thank you for the clarification. This issue is also being internally investigated - if there is an update will post here.

[EzioLi01]

@Yajur-Grover Cool, I will keep this issue here, thank you!