Deprecate web debugging (#12724)

* Deprecated Web Debugging

* Change files

* fix

change/react-native-windows-4ed5a244-28e4-46c9-bfb6-e5949f7c3af2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Deprecated Web Debugging",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/e2e-test-app/windows/RNTesterApp/App.xaml.cs

@@ -29,16 +29,15 @@ public App()
         {
 #if BUNDLE
             JavaScriptBundleFile = "index.windows";
-            InstanceSettings.UseWebDebugger = false;
             InstanceSettings.UseDirectDebugger = false;
             InstanceSettings.UseFastRefresh = false;
 #else
             JavaScriptBundleFile = "app/index";
-            InstanceSettings.UseWebDebugger = false;
             InstanceSettings.UseDirectDebugger = true;
             InstanceSettings.UseFastRefresh = true;
 #endif
 
+            InstanceSettings.UseDirectDebugger = true;
 #if DEBUG
             InstanceSettings.UseDeveloperSupport = true;
 #else

packages/sample-apps/windows/SampleAppCS/App.xaml.cs

@@ -25,14 +25,14 @@ public App()
 
 #if BUNDLE
             JavaScriptBundleFile = "index.windows";
-            InstanceSettings.UseWebDebugger = false;
             InstanceSettings.UseFastRefresh = false;
 #else
             JavaScriptBundleFile = "index";
-            InstanceSettings.UseWebDebugger = true;
             InstanceSettings.UseFastRefresh = true;
 #endif
 
+            InstanceSettings.UseDirectDebugger = true;
+
 #if DEBUG
             InstanceSettings.UseDeveloperSupport = true;
 #else

vnext/Microsoft.ReactNative.Managed.IntegrationTests/TestReactNativeHostHolder.cs

@@ -36,7 +36,9 @@ public TestReactNativeHostHolder(string jsBundle, Action<ReactNativeHost> hostIn
         Host.InstanceSettings.BundleRootPath = Path.GetFullPath(testBinaryPath + "\\..\\JSBundles");
         Host.InstanceSettings.JavaScriptBundleFile = jsBundle;
         Host.InstanceSettings.UseDeveloperSupport = false;
+#pragma warning disable 612, 618 // Deprecated
         Host.InstanceSettings.UseWebDebugger = false;
+#pragma warning restore 612, 618
         Host.InstanceSettings.UseFastRefresh = false;
         Host.InstanceSettings.UseDeveloperSupport = false;
 

vnext/Microsoft.ReactNative.Managed.UnitTests/ReactModuleBuilderMock.cs

@@ -311,7 +311,9 @@ class ReactSettingsSnapshot : IReactSettingsSnapshot
 
     public bool UseFastRefresh => throw new NotImplementedException();
 
+#pragma warning disable 612, 618 // Deprecated
     public bool UseWebDebugger => throw new NotImplementedException();
+#pragma warning restore 612, 618
 
     public string BundleRootPath => throw new NotImplementedException();
 

vnext/Microsoft.ReactNative.Managed/ReactSettingsSnapshot.cs

@@ -30,7 +30,9 @@ public struct ReactSettingsSnapshot
 
     public bool UseFastRefresh => IsValid ? Handle.UseFastRefresh : false;
 
+    #pragma warning disable 612, 618 // Deprecated
     public bool UseWebDebugger => IsValid ? Handle.UseWebDebugger : false;
+    #pragma warning restore 612, 618
 
     public bool RequestDevBundle => IsValid ? Handle.RequestDevBundle : true;
 

vnext/Microsoft.ReactNative/DevMenuControl.idl

@@ -14,11 +14,8 @@ namespace Microsoft.ReactNative
 
       XAML_NAMESPACE.Controls.Button BreakOnNextLine { get; };
       XAML_NAMESPACE.Controls.Button DirectDebug { get; };
-      XAML_NAMESPACE.Controls.Button RemoteDebug { get; };
       XAML_NAMESPACE.Controls.Button Reload { get; };
 
-      XAML_NAMESPACE.Controls.TextBlock RemoteDebugText { get; };
-      XAML_NAMESPACE.Controls.TextBlock RemoteDebugDesc { get; };
       XAML_NAMESPACE.Controls.TextBlock FastRefreshText { get; };
       XAML_NAMESPACE.Controls.TextBlock DirectDebugText { get; };
       XAML_NAMESPACE.Controls.TextBlock DirectDebugDesc { get; };

vnext/Microsoft.ReactNative/DevMenuControl.xaml

@@ -50,21 +50,6 @@
                 <TextBlock Grid.Column='1' Grid.Row='1' FontSize='12' Opacity='0.5' TextWrapping='Wrap'>Restarts the JS instance. Any javascript state will be lost.</TextBlock>
             </Grid>
         </Button>
-        <Button HorizontalAlignment='Stretch' HorizontalContentAlignment='Stretch' x:Name='RemoteDebug' Style='{StaticResource ButtonRevealStyle}'>
-            <Grid HorizontalAlignment='Stretch'>
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width='Auto'/>
-                    <ColumnDefinition Width='*'/>
-                </Grid.ColumnDefinitions>
-                <Grid.RowDefinitions>
-                    <RowDefinition/>
-                    <RowDefinition/>
-                </Grid.RowDefinitions>
-                <FontIcon Grid.Column='0' Grid.Row='0' Grid.RowSpan='2' VerticalAlignment='Top' FontFamily='{StaticResource SymbolThemeFontFamily}' Foreground='{StaticResource SystemControlForegroundAccentBrush}' Margin='8,8,16,8' Glyph='&#xE8AF;'/>
-                <TextBlock Grid.Column='1' Grid.Row='0' x:Name='RemoteDebugText'/>
-                <TextBlock Grid.Column='1' Grid.Row='1' x:Name='RemoteDebugDesc' FontSize='12' Opacity='0.5' TextWrapping='Wrap'/>
-            </Grid>
-        </Button>
         <Button HorizontalAlignment='Stretch' HorizontalContentAlignment='Stretch' x:Name='DirectDebug' Style='{StaticResource ButtonRevealStyle}'>
             <Grid HorizontalAlignment='Stretch'>
                 <Grid.ColumnDefinitions>

vnext/Microsoft.ReactNative/IReactContext.idl

@@ -46,6 +46,9 @@ namespace Microsoft.ReactNative
       "Controls whether the instance JavaScript runs in a remote environment such as within a browser.\n"
       "By default, this is using a browser navigated to http://localhost:8081/debugger-ui served by Metro/Haul.\n"
       "Debugging will start as soon as the react native instance is loaded.")
+    [deprecated(
+      "Debugging should be done using DirectDebugging rather than WebDebugger.  Web debugging changes the app behavior "
+      "and will be removed in a future version.", deprecate, 1)]
     Boolean UseWebDebugger { get; };
 
     DOC_STRING(

vnext/Microsoft.ReactNative/ReactInstanceSettings.idl

@@ -119,6 +119,9 @@ namespace Microsoft.ReactNative
       "Controls whether the instance JavaScript runs in a remote environment such as within a browser.\n"
       "By default, this is using a browser navigated to http://localhost:8081/debugger-ui served by Metro/Haul.\n"
       "Debugging will start as soon as the react native instance is loaded.")
+    [deprecated(
+      "Debugging should be done using DirectDebugging rather than WebDebugger.  Web debugging changes the app behavior "
+      "and will be removed in a future version.", deprecate, 1)]
     Boolean UseWebDebugger { get; set; };
 
     DOC_STRING(

vnext/Microsoft.ReactNative/Views/DevMenu.cpp

@@ -124,12 +124,6 @@ struct InAppXamlDevMenu : public IDevMenu, public std::enable_shared_from_this<I
   void Show() noexcept override {
     winrt::Microsoft::ReactNative::DevMenuControl devMenu{};
 
-    devMenu.RemoteDebugText().Text(
-        Mso::React::ReactOptions::UseWebDebugger(m_context->Properties()) ? L"Disable Remote JS Debugging"
-                                                                          : L"Enable Remote JS Debugging");
-    devMenu.RemoteDebugDesc().Text(
-        L"When enabled runs the JS remotely in VSCode or Chrome based on what you attach to the packager.  This means that the JS may run with a different JS engine than it runs in on in the real application, in addition synchronous native module calls, and JSI native modules will not work.");
-
     devMenu.FastRefreshText().Text(FastRefreshLabel(m_context));
     if (Mso::React::ReactOptions::JsiEngine(m_context->Properties()) == Mso::React::JSIEngine::Hermes) {
       devMenu.SamplingProfilerText().Text(HermesProfilerLabel(m_context));
@@ -169,18 +163,6 @@ struct InAppXamlDevMenu : public IDevMenu, public std::enable_shared_from_this<I
           }
         });
 
-    m_remoteDebugJSRevoker = devMenu.RemoteDebug().Click(
-        winrt::auto_revoke,
-        [wkThis = weak_from_this()](auto const & /*sender*/, xaml::RoutedEventArgs const & /*args*/) noexcept {
-          if (auto strongThis = wkThis.lock()) {
-            strongThis->Hide();
-            Mso::React::ReactOptions::SetUseWebDebugger(
-                strongThis->m_context->Properties(),
-                !Mso::React::ReactOptions::UseWebDebugger(strongThis->m_context->Properties()));
-            DevSettings::Reload(React::ReactPropertyBag(strongThis->m_context->Properties()));
-          }
-        });
-
     m_directDebuggingRevoker = devMenu.DirectDebug().Click(
         winrt::auto_revoke,
         [wkThis = weak_from_this()](auto const & /*sender*/, xaml::RoutedEventArgs const & /*args*/) noexcept {
@@ -301,7 +283,6 @@ struct InAppXamlDevMenu : public IDevMenu, public std::enable_shared_from_this<I
  private:
   const Mso::CntPtr<Mso::React::IReactContext> m_context;
   xaml::Controls::Flyout m_flyout{nullptr};
-  xaml::Controls::Button::Click_revoker m_remoteDebugJSRevoker{};
   xaml::Controls::Button::Click_revoker m_cancelRevoker{};
   xaml::Controls::Button::Click_revoker m_toggleInspectorRevoker{};
   xaml::Controls::Button::Click_revoker m_configBundlerRevoker{};

vnext/template/cpp-app/src/App.cpp

@@ -22,17 +22,17 @@ App::App() noexcept
 {
 #if BUNDLE
     JavaScriptBundleFile(L"index.windows");
-    InstanceSettings().UseWebDebugger(false);
     InstanceSettings().UseFastRefresh(false);
 #else
     JavaScriptBundleFile(L"index");
-    InstanceSettings().UseWebDebugger(true);
     InstanceSettings().UseFastRefresh(true);
 #endif
 
 #if _DEBUG
+    InstanceSettings().UseDirectDebugger(true);
     InstanceSettings().UseDeveloperSupport(true);
 #else
+    InstanceSettings().UseDirectDebugger(false);
     InstanceSettings().UseDeveloperSupport(false);
 #endif
 

vnext/template/cs-app/src/App.xaml.cs

@@ -11,17 +11,17 @@ public App()
         {
 #if BUNDLE
             JavaScriptBundleFile = "index.windows";
-            InstanceSettings.UseWebDebugger = false;
             InstanceSettings.UseFastRefresh = false;
 #else
             JavaScriptBundleFile = "index";
-            InstanceSettings.UseWebDebugger = true;
             InstanceSettings.UseFastRefresh = true;
 #endif
 
 #if DEBUG
+            InstanceSettings.UseDirectDebugger = true;
             InstanceSettings.UseDeveloperSupport = true;
 #else
+            InstanceSettings.UseDirectDebugger = false;
             InstanceSettings.UseDeveloperSupport = false;
 #endif