[0.80] Add support for modern inspector (#15357)

* Add support for modern inspector

* Change files

* Remove old change file

* Fix JSI test compilation errors

* enable dynamic_casts (RTTI) at a project level

* Format code

---------

Co-authored-by: Abhijeet Jha <[email protected]>

Author: vmoroz

change/@react-native-windows-automation-channel-329de26f-47f0-4f3a-8d1e-18eef1084456.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add support for modern inspector",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-2c423284-4814-4644-8f7e-b88ab9acf84e.json

@@ -0,0 +1,70 @@
+# Modern Inspector Support in React Native for Windows
+
+## Overview
+The modern inspector is the Chrome DevTools–based debugging experience that ships with the latest
+versions of React Native. This experience now works end-to-end for React Native for Windows (RNW)
+applications, enabling parity with Android and iOS. The integration provides a unified way to inspect
+JavaScript execution, evaluate console expressions, profile CPU and memory usage, and visualize the
+component hierarchy for both the Paper and Composition UI stacks.
+
+## Modern Inspector Building Blocks
+- **Host Target** – One per `ReactHost`; surfaces metadata, reload requests, pause overlays, and
+  implements the CDP-facing delegate (`ReactInspectorHostTargetDelegate`).
+- **Instance Target** – Created for each React instance; registers runtime targets, tracks instance
+  lifecycle, and unregisters cleanly on reload.
+- **Runtime Target & Agent** – Runtime targets map to JavaScript VMs; agents are per-session objects
+  that translate Chrome DevTools Protocol (CDP) messages into engine calls. RNW mirrors upstream
+  lifetimes so reloads tear everything down deterministically.
+- **Frontend Channel** – Delivers JSON CDP payloads between the RNW host and DevTools.
+- **Inspector Thread** – A single `ReactInspectorThread` ensures CDP work is serialized away from
+  the UI and JS queues. (iOS and Andrtoid use UI thread.)
+- **Debugger Notifications** – `DebuggerNotifications.h` broadcasts pause/resume events so view
+  hosts can react (e.g., showing overlays or resuming when the debugger continues).
+
+## Windows Integration Points
+- **ReactHost & ReactOptions** – `ReactHost` creates the `HostTarget`, exposes it through
+  `ReactOptions::InspectorHostTarget`, and implements reload/pause hooks. This is the jump-off point
+  for all inspector traffic. The inspector supported only if the `UseDirectDebugger` is true.
+- **ReactInstanceWin / OInstance** – Register and unregister instance/runtime targets around runtime
+  creation, keeping the inspector aligned with bridgeless and legacy bridge lifecycles.
+- **DevSupportManager & Packager** – `DevSupportManager` now spins up
+  `ReactInspectorPackagerConnectionDelegate`, allowing Metro to broker modern inspector connections
+  and reuse the existing websocket infrastructure.
+- **Dev Console Shortcut** – Metro’s `J` shortcut launches the inspector for Windows apps, matching
+  upstream behavior.
+
+## UI Overlays
+- **Composition** – `DebuggerUIIsland` renders pause overlays, focus chrome, and selection adorners
+  whenever the runtime is paused.
+- **Paper** – `ReactRootView` updates provide the same pause/selection affordances.
+
+## Hermes Runtime Integration
+- `HermesRuntimeTargetDelegate` and `HermesRuntimeAgentDelegate` wrap the hermes-windows C debug API
+  so we can re-use upstream modern inspector code.
+- `RuntimeHolder`/`HermesRuntimeHolder` surface a `createRuntimeTargetDelegate` hook that instantiates
+  delegates only when the inspector is enabled, and safely tears them down during reloads.
+
+## Packager & Console Integration
+- `ReactInspectorPackagerConnectionDelegate` maps the Metro websocket APIs to the modern inspector
+  handshake.
+- Console output, CPU sampling, and memory profiling are forwarded through the Hermes inspector
+  plumbing automatically once a session is active.
+
+## Using the Modern Inspector with RNW
+1. Start your Metro bundler (`npx react-native start` or `yarn start`).
+2. Launch your RNW app (Paper or Composition).
+3. In the Metro console, press `J` to open the modern inspector URL in a browser.
+4. Chrome DevTools will connect to the Hermes runtime. Pause execution, explore the component tree,
+  and capture profiles as needed.
+5. When execution is paused, the corresponding overlay is rendered in the app window; resume to clear
+  the overlay.
+
+## Known Limitations & Follow-Up Work
+- **Network profiling** – The `NetworkIOAgent` is not wired up yet for Windows. The integration point
+  is the `ReactInspectorHostTargetDelegate` in
+  `vnext/Microsoft.ReactNative/ReactHost/ReactHost.cpp`; override `loadNetworkResource` there to
+  forward requests through a Windows HTTP helper (similar to `GetJavaScriptFromServerAsync`) and
+  stream results back via the provided `NetworkRequestListener`. Until this happens, the Network tab
+  in DevTools stays empty.
+- **Legacy Chakra runtime** – Modern inspector support currently targets Hermes. Chakra-based apps
+  continue to rely on legacy debugging flows.

docs/modern-inspector-details.md

@@ -29,8 +29,8 @@
       },
       "Microsoft.JavaScript.Hermes": {
         "type": "Transitive",
-        "resolved": "0.0.0-2507.21007-eda7aef6",
-        "contentHash": "3oyJXoPaayrtWSjBgnLFfVBrNcnvB3EJ1r2/K0yz9exmmESTTzWaCh8JlhX7fsjtMv/LpQxJOctHP0Ng2k8spQ=="
+        "resolved": "0.0.0-2511.7001-d7ca19b3",
+        "contentHash": "/EGy/gbTWpFZPZ4Z81QxbGQxpZhqiOE3qrnSokZRgXAyHivl15s7zZkRLOy9daDmVyEfanq7YBCOMi0ha58uQA=="
       },
       "Microsoft.SourceLink.Common": {
         "type": "Transitive",
@@ -72,7 +72,7 @@
         "dependencies": {
           "Common": "[1.0.0, )",
           "Folly": "[1.0.0, )",
-          "Microsoft.JavaScript.Hermes": "[0.0.0-2507.21007-eda7aef6, )",
+          "Microsoft.JavaScript.Hermes": "[0.0.0-2511.7001-d7ca19b3, )",
           "Microsoft.SourceLink.GitHub": "[1.1.1, )",
           "Microsoft.UI.Xaml": "[2.8.0, )",
           "ReactCommon": "[1.0.0, )",

packages/@react-native-windows/automation-channel/windows/AutomationChannel/packages.chakra.lock.json

@@ -29,8 +29,8 @@
       },
       "Microsoft.JavaScript.Hermes": {
         "type": "Transitive",
-        "resolved": "0.0.0-2507.21007-eda7aef6",
-        "contentHash": "3oyJXoPaayrtWSjBgnLFfVBrNcnvB3EJ1r2/K0yz9exmmESTTzWaCh8JlhX7fsjtMv/LpQxJOctHP0Ng2k8spQ=="
+        "resolved": "0.0.0-2511.7001-d7ca19b3",
+        "contentHash": "/EGy/gbTWpFZPZ4Z81QxbGQxpZhqiOE3qrnSokZRgXAyHivl15s7zZkRLOy9daDmVyEfanq7YBCOMi0ha58uQA=="
       },
       "Microsoft.SourceLink.Common": {
         "type": "Transitive",
@@ -72,7 +72,7 @@
         "dependencies": {
           "Common": "[1.0.0, )",
           "Folly": "[1.0.0, )",
-          "Microsoft.JavaScript.Hermes": "[0.0.0-2507.21007-eda7aef6, )",
+          "Microsoft.JavaScript.Hermes": "[0.0.0-2511.7001-d7ca19b3, )",
           "Microsoft.SourceLink.GitHub": "[1.1.1, )",
           "Microsoft.UI.Xaml": "[2.8.0, )",
           "ReactCommon": "[1.0.0, )",

packages/@react-native-windows/automation-channel/windows/AutomationChannel/packages.lock.json

@@ -37,8 +37,8 @@
       },
       "Microsoft.JavaScript.Hermes": {
         "type": "Transitive",
-        "resolved": "0.0.0-2507.21007-eda7aef6",
-        "contentHash": "3oyJXoPaayrtWSjBgnLFfVBrNcnvB3EJ1r2/K0yz9exmmESTTzWaCh8JlhX7fsjtMv/LpQxJOctHP0Ng2k8spQ=="
+        "resolved": "0.0.0-2511.7001-d7ca19b3",
+        "contentHash": "/EGy/gbTWpFZPZ4Z81QxbGQxpZhqiOE3qrnSokZRgXAyHivl15s7zZkRLOy9daDmVyEfanq7YBCOMi0ha58uQA=="
       },
       "Microsoft.SourceLink.Common": {
         "type": "Transitive",
@@ -85,7 +85,7 @@
         "dependencies": {
           "Common": "[1.0.0, )",
           "Folly": "[1.0.0, )",
-          "Microsoft.JavaScript.Hermes": "[0.0.0-2507.21007-eda7aef6, )",
+          "Microsoft.JavaScript.Hermes": "[0.0.0-2511.7001-d7ca19b3, )",
           "Microsoft.SourceLink.GitHub": "[1.1.1, )",
           "Microsoft.WindowsAppSDK": "[1.7.250401001, )",
           "ReactCommon": "[1.0.0, )",

packages/@react-native-windows/automation-channel/windows/AutomationChannel/packages.newarch.lock.json

@@ -14,8 +14,8 @@
       },
       "Microsoft.JavaScript.Hermes": {
         "type": "Transitive",
-        "resolved": "0.0.0-2507.21007-eda7aef6",
-        "contentHash": "3oyJXoPaayrtWSjBgnLFfVBrNcnvB3EJ1r2/K0yz9exmmESTTzWaCh8JlhX7fsjtMv/LpQxJOctHP0Ng2k8spQ=="
+        "resolved": "0.0.0-2511.7001-d7ca19b3",
+        "contentHash": "/EGy/gbTWpFZPZ4Z81QxbGQxpZhqiOE3qrnSokZRgXAyHivl15s7zZkRLOy9daDmVyEfanq7YBCOMi0ha58uQA=="
       },
       "Microsoft.SourceLink.Common": {
         "type": "Transitive",
@@ -85,7 +85,7 @@
         "dependencies": {
           "Common": "[1.0.0, )",
           "Folly": "[1.0.0, )",
-          "Microsoft.JavaScript.Hermes": "[0.0.0-2507.21007-eda7aef6, )",
+          "Microsoft.JavaScript.Hermes": "[0.0.0-2511.7001-d7ca19b3, )",
           "Microsoft.SourceLink.GitHub": "[1.1.1, )",
           "Microsoft.WindowsAppSDK": "[1.7.250401001, )",
           "ReactCommon": "[1.0.0, )",
@@ -103,7 +103,7 @@
         "type": "Project",
         "dependencies": {
           "AutomationChannel": "[1.0.0, )",
-          "Microsoft.JavaScript.Hermes": "[0.0.0-2507.21007-eda7aef6, )",
+          "Microsoft.JavaScript.Hermes": "[0.0.0-2511.7001-d7ca19b3, )",
           "Microsoft.ReactNative": "[1.0.0, )",
           "Microsoft.VCRTForwarders.140": "[1.0.2-rc, )",
           "Microsoft.WindowsAppSDK": "[1.7.250401001, )",

packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric.Package/packages.lock.json

@@ -10,9 +10,9 @@
       },
       "Microsoft.JavaScript.Hermes": {
         "type": "Direct",
-        "requested": "[0.0.0-2507.21007-eda7aef6, )",
-        "resolved": "0.0.0-2507.21007-eda7aef6",
-        "contentHash": "3oyJXoPaayrtWSjBgnLFfVBrNcnvB3EJ1r2/K0yz9exmmESTTzWaCh8JlhX7fsjtMv/LpQxJOctHP0Ng2k8spQ=="
+        "requested": "[0.0.0-2511.7001-d7ca19b3, )",
+        "resolved": "0.0.0-2511.7001-d7ca19b3",
+        "contentHash": "/EGy/gbTWpFZPZ4Z81QxbGQxpZhqiOE3qrnSokZRgXAyHivl15s7zZkRLOy9daDmVyEfanq7YBCOMi0ha58uQA=="
       },
       "Microsoft.VCRTForwarders.140": {
         "type": "Direct",
@@ -95,7 +95,7 @@
         "dependencies": {
           "Common": "[1.0.0, )",
           "Folly": "[1.0.0, )",
-          "Microsoft.JavaScript.Hermes": "[0.0.0-2507.21007-eda7aef6, )",
+          "Microsoft.JavaScript.Hermes": "[0.0.0-2511.7001-d7ca19b3, )",
           "Microsoft.SourceLink.GitHub": "[1.1.1, )",
           "Microsoft.WindowsAppSDK": "[1.7.250401001, )",
           "ReactCommon": "[1.0.0, )",

packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/packages.lock.json

@@ -46,8 +46,8 @@
       },
       "Microsoft.JavaScript.Hermes": {
         "type": "Transitive",
-        "resolved": "0.0.0-2507.21007-eda7aef6",
-        "contentHash": "3oyJXoPaayrtWSjBgnLFfVBrNcnvB3EJ1r2/K0yz9exmmESTTzWaCh8JlhX7fsjtMv/LpQxJOctHP0Ng2k8spQ=="
+        "resolved": "0.0.0-2511.7001-d7ca19b3",
+        "contentHash": "/EGy/gbTWpFZPZ4Z81QxbGQxpZhqiOE3qrnSokZRgXAyHivl15s7zZkRLOy9daDmVyEfanq7YBCOMi0ha58uQA=="
       },
       "Microsoft.Net.Native.Compiler": {
         "type": "Transitive",
@@ -197,7 +197,7 @@
         "dependencies": {
           "Common": "[1.0.0, )",
           "Folly": "[1.0.0, )",
-          "Microsoft.JavaScript.Hermes": "[0.0.0-2507.21007-eda7aef6, )",
+          "Microsoft.JavaScript.Hermes": "[0.0.0-2511.7001-d7ca19b3, )",
           "Microsoft.SourceLink.GitHub": "[1.1.1, )",
           "Microsoft.UI.Xaml": "[2.8.0, )",
           "ReactCommon": "[1.0.0, )",

packages/e2e-test-app/windows/RNTesterApp/packages.chakra.lock.json

@@ -4,9 +4,9 @@
     "UAP,Version=v10.0.17763": {
       "Microsoft.JavaScript.Hermes": {
         "type": "Direct",
-        "requested": "[0.0.0-2507.21007-eda7aef6, )",
-        "resolved": "0.0.0-2507.21007-eda7aef6",
-        "contentHash": "3oyJXoPaayrtWSjBgnLFfVBrNcnvB3EJ1r2/K0yz9exmmESTTzWaCh8JlhX7fsjtMv/LpQxJOctHP0Ng2k8spQ=="
+        "requested": "[0.0.0-2511.7001-d7ca19b3, )",
+        "resolved": "0.0.0-2511.7001-d7ca19b3",
+        "contentHash": "/EGy/gbTWpFZPZ4Z81QxbGQxpZhqiOE3qrnSokZRgXAyHivl15s7zZkRLOy9daDmVyEfanq7YBCOMi0ha58uQA=="
       },
       "Microsoft.NETCore.UniversalWindowsPlatform": {
         "type": "Direct",
@@ -198,7 +198,7 @@
         "dependencies": {
           "Common": "[1.0.0, )",
           "Folly": "[1.0.0, )",
-          "Microsoft.JavaScript.Hermes": "[0.0.0-2507.21007-eda7aef6, )",
+          "Microsoft.JavaScript.Hermes": "[0.0.0-2511.7001-d7ca19b3, )",
           "Microsoft.SourceLink.GitHub": "[1.1.1, )",
           "Microsoft.UI.Xaml": "[2.8.0, )",
           "ReactCommon": "[1.0.0, )",