Skip to content

Conversation

@vmoroz
Copy link
Member

@vmoroz vmoroz commented Nov 6, 2025

Description

This PR adds support for the React Native DevTools to the React Native for Windows. The RN DevTools are also known as "modern inspector" or "fusebox", and based on the Chrome DevTools. The implementation follows the React Native modern inspector requirements implemented for Android and iOS platforms.

The PR combines work from several developers:

Type of Change

  • New feature (non-breaking change which adds functionality)
  • This change requires a documentation update

Why

We want RNW developers to enjoy the same modern developer experience as Android and iOS React Native developers.

What

  • Runtime plumbing

    • Removed some our temporary ReactCommon overrides now that upstream behavior works on Windows.
    • Extended ReactOptions, ReactHost, ReactInstanceWin, and OInstance so they surface the modern inspector target and propagate pause/resume notifications to app code.
    • ReactHost only registers itself for debugging by adding the inspector "page" when the ReactSettings have the UseDirectDebugger set to true.
    • Use dedicated ReactInspectorThread thread for the inspector communication synchronization. (Android and iOS use UI thread)
    • Introduced DebuggerNotifications.h to send notifications about the debugger state changes to allow UI updates.
    • Added ReactInspectorPackagerConnectionDelegate to let Metro drive the modern inspector handshake for RNW.
  • Hermes integration

    • Added HermesRuntimeTargetDelegate and HermesRuntimeAgentDelegate, mirroring upstream React Native code for Hermes but targeting the hermes-windows C API.
    • Updated RuntimeHolder and HermesRuntimeHolder to create/use inspector delegates only when needed and to tear them down safely.
    • Fixed bad script name in JsiApi.cpp that caused DevTools from loading scripts.
  • UI / UX

    • Composition: introduced DebuggerUIIsland so paused apps show overlays and selection handles.
    • Paper: mirrored the same overlay/selection experience inside ReactRootView.
    • Resolved the DebuggingOverlayComponentView recursion that caused stack overflows when selecting deep component trees.
    • Hardened TaskDispatchThread shutdown so we don’t dereference freed objects when the JS thread disposes the dispatcher.
  • Dev tooling

    • DevSupportManager now manages modern inspector connections alongside legacy tooling.
    • Metro’s J shortcut opens the modern inspector for RNW targets just like other platforms.
    • NetworkIOAgent support is still pending: implement loadNetworkResource on ReactInspectorHostTargetDelegate (ReactHost.cpp) to proxy requests via a Windows HTTP helper (e.g. reuse GetJavaScriptFromServerAsync) and stream results back through the provided NetworkRequestListener.
  • Documentation

    • Added modern-inspector-details.md capturing the architecture, usage, and follow-up work for the new inspector integration.

Testing

  • Playground (Paper & Composition): yarn start, press J in Metro to attach the inspector, verified source debugging, console evaluation, CPU and memory profiling, and component tree selection with Hermes.
  • Chakra runtimes remain on legacy debugging flows.

Changelog

  • yes - include in release notes.

Add Modern Inspector support (JS debugger, console, CPU/Memory profilers, component tree) for React Native for Windows applications.

Microsoft Reviewers: Open in CodeFlow

@vmoroz vmoroz requested review from a team as code owners November 6, 2025 21:38
ReactInspectorHostTargetDelegate(Mso::WeakPtr<ReactHost> &&reactHost) noexcept : m_reactHost(std::move(reactHost)) {}

jsinspector_modern::HostTargetMetadata getMetadata() override {
// TODO: (vmoroz) provide more info
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be using the identity name? Or whatever the current debugger uses for its name? - Lets get an issue filed to follow up on this?

jsinspector_modern::InspectorTargetCapabilities capabilities;
capabilities.nativePageReloads = true;
capabilities.prefersFuseboxFrontend = true;
// TODO: (vmoroz) improve the page name
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets get an issue tracking this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants