React Native Dev Tools Not Available in RNW 0.76 Preview

[slswalker]

Problem Description

While testing RNW 0.76 migration for the Xbox app, I attempted to test the new React Native Dev Tools. After not launching with the warning "No compatible apps connected. React Native DevTools can only be used with the Hermes engine.", I looked into the debugger code. The code is looking for targets with nativePageReloads=true but I don't see the keyword "nativePageReloads" anywhere on the RNW GitHub. This aligns with my experience trying to get the experimental debugger to launch in previous versions.

Is this dev tool supported and if not, what is the plan for adding support?

Steps To Reproduce

1. Build and run an RNW 0.76-Preview app with Hermes turned on
2. Press J in the bundler terminal
3. Observe the dev tools do not launch

Expected Results

The dev tools launch

CLI version

15.0.0-alpha.2

Environment

System:
OS: Windows 11 10.0.22631
CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
Memory: 41.64 GB / 63.95 GB
Binaries:
Node:
version: 18.20.3
path: C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm:
version: 10.7.0
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions:
- 10.0.18362.0
- 10.0.19041.0
- 10.0.22621.0
IDEs:
Android Studio: Not Found
Visual Studio:
- 17.11.35327.3 (Visual Studio Enterprise 2022)
Languages:
Java: Not Found
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.76.0
wanted: 0.76.0
react-native-windows:
installed: 0.76.0-preview.3
wanted: 0.76.0-preview.3
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Community Modules

No response

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

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

No response

[chrisglein]

Added to combined debugging issue: #12982

[chrisglein]

Is this dev tool supported and if not, what is the plan for adding support?

As for this, we haven't looked specifically into the new dev tools.
@vmoroz Do you know if this is something that needs to be hooked up by Hermes or by RNW?

[slswalker]

@chrisglein This looks like it needs to be hooked up by RNW. See iOS for instance:
https://github.com/facebook/react-native/blob/b5b65275c6f97fae5e21c57bf2fd985e71cb751f/packages/react-native/React/Base/RCTBridge.mm#L487
https://github.com/facebook/react-native/blob/b5b65275c6f97fae5e21c57bf2fd985e71cb751f/packages/react-native/ReactCommon/react/runtime/platform/ios/ReactCommon/RCTHost.mm#L230

Probably started as far back as January when they worked on the experimental debugger

[TatianaKapos]

Since this is a part of the new debugger that we're still trying to catch up to in Hermes, in imo this shouldn't block the initial 0.76 release, but we can go back and add support in a dot release!

[chrisglein]

Per your comment @vmoroz , assigning to you to work on the debugger tools. Any UI tree impact can be handled separately.

[chrisglein]

As a workaround for 0.76 (assuming this is a regression from 0.75), is using an older version of React dev tools an option?
@TatianaKapos Can you confirm the state of 0.75 vs. 0.76 so we know the level/timing of regression?

[slswalker]

@chrisglein, sorry for the confusion but I am rererring to "React Native Dev Tools", not "React Dev Tools". Very confusing! See here:
https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture#react-native-devtools

The old "React Dev Tools" aka the react-devtools script, work fine but that only enables the component hierarchy and profiling. It seems the recommended RN JS debugging path is to use the new tools via direct debugging. It doesn't appear that remote debugging works or is recommended in 0.76.