From 28e1ca98737014a9a1735789b3fb817255ffdfdf Mon Sep 17 00:00:00 2001
From: gabrieldonadel <donadeldev@gmail.com>
Date: Wed, 26 Apr 2023 09:30:20 -0700
Subject: [PATCH] Remove remote debugging from dev menu (#36754)

Summary:
This PR proposes the removal of the ability to use remote JS debugging (a.k.a Chrome Debugging) from the DevMenu.
This change has been suggested previously on the contributor's Discord server and it is motivated by the fact that generally speaking, this feature does not work with the new architecture and most of the popular modules these days. The remote JS debugging is basically broken if you use Turbo Modules, Fabric, or sync native module calls.

People tend to assume that if something is part of the dev tools UI, it is going to work reliably. However, when it comes to remote debugging using JSC that's increasingly unlikely to be the case. Having it continue to exist as an option has created some confusion, or at least that's what we've seen within the Expo community.

### How to manually enable remote debugging

If your project depends on remote debugging, you can still enable it manually through the `NativeDevSettings`. E.g.

```jsx
import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';

export default function App() {
  return (
    <Button
      title="Enable remote debugging"
      onPress={() => NativeDevSettings.setIsDebuggingRemotely(!true)}
    />
  );
}

```

### Next steps

Once this has been released and we are sure that this doesn't cause a lot of problems for people we can remove the ability entirely in a follow-up PR

## Changelog:

[General] [Removed] - Remove remote debugging from the dev menu

Pull Request resolved: https://github.com/facebook/react-native/pull/36754

Test Plan:
Locally run rn-tester using JSC on Android and iOS and open the dev menu

<table>
    <tr><th>iOS</th><th>Android</th></tr>
    <tr>
    <td>
        <img src="https://user-images.githubusercontent.com/11707729/229229079-03f98eed-0765-4cc8-b972-0c4ff041b611.png" />
   </td>
   <td>
   <img src="https://user-images.githubusercontent.com/11707729/229229103-b57e8fd2-9aca-4780-8a8f-0fd5b2e53590.png" />
    </td>
</tr>
</table>

Reviewed By: christophpurrer

Differential Revision: D45278061

Pulled By: huntie

fbshipit-source-id: 842c33102cd34730c14acece8e318cb263e5c9e5
---
 .../React/CoreModules/RCTDevMenu.mm           | 40 +------------------
 .../devsupport/BridgeDevSupportManager.java   | 16 --------
 .../main/res/devsupport/values/strings.xml    |  4 --
 3 files changed, 1 insertion(+), 59 deletions(-)

diff --git a/packages/react-native/React/CoreModules/RCTDevMenu.mm b/packages/react-native/React/CoreModules/RCTDevMenu.mm
index 060ab85f4c2..f40cf4febf2 100644
--- a/packages/react-native/React/CoreModules/RCTDevMenu.mm
+++ b/packages/react-native/React/CoreModules/RCTDevMenu.mm
@@ -284,46 +284,8 @@ RCT_EXPORT_MODULE()
                                     withBundleURL:bundleManager.bundleURL
                                  withErrorMessage:@"Failed to open Flipper. Please check that Metro is running."];
                            }]];
-    } else if (devSettings.isRemoteDebuggingAvailable) {
-#else
-    if (devSettings.isRemoteDebuggingAvailable) {
-#endif
-      // For remote debugging, we open up Chrome running the app in a web worker.
-      // Note that this requires async communication, which will not work for Turbo Modules.
-      [items addObject:[RCTDevMenuItem
-                           buttonItemWithTitleBlock:^NSString * {
-                             return devSettings.isDebuggingRemotely ? @"Stop Debugging" : @"Debug with Chrome";
-                           }
-                           handler:^{
-                             devSettings.isDebuggingRemotely = !devSettings.isDebuggingRemotely;
-                           }]];
-    } else {
-      // If neither are available, we're defaulting to a message that tells you about remote debugging.
-      [items
-          addObject:[RCTDevMenuItem
-                        buttonItemWithTitle:@"Debugger Unavailable"
-                                    handler:^{
-                                      NSString *message = RCTTurboModuleEnabled()
-                                          ? @"Debugging with Chrome is not supported when TurboModules are enabled."
-                                          : @"Include the RCTWebSocket library to enable JavaScript debugging.";
-                                      UIAlertController *alertController =
-                                          [UIAlertController alertControllerWithTitle:@"Debugger Unavailable"
-                                                                              message:message
-                                                                       preferredStyle:UIAlertControllerStyleAlert];
-                                      __weak __typeof__(alertController) weakAlertController = alertController;
-                                      [alertController
-                                          addAction:[UIAlertAction actionWithTitle:@"OK"
-                                                                             style:UIAlertActionStyleDefault
-                                                                           handler:^(__unused UIAlertAction *action) {
-                                                                             [weakAlertController
-                                                                                 dismissViewControllerAnimated:YES
-                                                                                                    completion:nil];
-                                                                           }]];
-                                      [RCTPresentedViewController() presentViewController:alertController
-                                                                                 animated:YES
-                                                                               completion:NULL];
-                                    }]];
     }
+#endif
   }
 
   [items addObject:[RCTDevMenuItem
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/BridgeDevSupportManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/BridgeDevSupportManager.java
index 4d7110c91eb..6b57090f41c 100644
--- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/BridgeDevSupportManager.java
+++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/BridgeDevSupportManager.java
@@ -115,22 +115,6 @@ public final class BridgeDevSupportManager extends DevSupportManagerBase {
             toggleJSSamplingProfiler();
           }
         });
-
-    if (!getDevSettings().isDeviceDebugEnabled()) {
-      // For remote debugging, we open up Chrome running the app in a web worker.
-      // Note that this requires async communication, which will not work for Turbo Modules.
-      addCustomDevOption(
-          getDevSettings().isRemoteJSDebugEnabled()
-              ? applicationContext.getString(com.facebook.react.R.string.catalyst_debug_stop)
-              : applicationContext.getString(com.facebook.react.R.string.catalyst_debug),
-          new DevOptionHandler() {
-            @Override
-            public void onOptionSelected() {
-              getDevSettings().setRemoteJSDebugEnabled(!getDevSettings().isRemoteJSDebugEnabled());
-              handleReloadJS();
-            }
-          });
-    }
   }
 
   public DevLoadingViewManager getDevLoadingViewManager() {
diff --git a/packages/react-native/ReactAndroid/src/main/res/devsupport/values/strings.xml b/packages/react-native/ReactAndroid/src/main/res/devsupport/values/strings.xml
index 9ebb11b0830..1b9c4ffefa2 100644
--- a/packages/react-native/ReactAndroid/src/main/res/devsupport/values/strings.xml
+++ b/packages/react-native/ReactAndroid/src/main/res/devsupport/values/strings.xml
@@ -6,12 +6,8 @@
   <string name="catalyst_open_flipper_error" project="catalyst" translatable="false">Failed to open Flipper. Please check that Metro is running.</string>
   <string name="catalyst_devtools_open" project="catalyst" translatable="false">Open React DevTools</string>
   <string name="catalyst_debug_open" project="catalyst" translatable="false">Open Debugger</string>
-  <string name="catalyst_debug" project="catalyst" translatable="false">Debug</string>
-  <string name="catalyst_debug_stop" project="catalyst" translatable="false">Stop Debugging</string>
   <string name="catalyst_debug_connecting" project="catalyst" translatable="false">Connecting to debugger...</string>
   <string name="catalyst_debug_error" project="catalyst" translatable="false">Failed to connect to debugger!</string>
-  <string name="catalyst_debug_chrome" project="catalyst" translatable="false">Debug with Chrome</string>
-  <string name="catalyst_debug_chrome_stop" project="catalyst" translatable="false">Stop Chrome Debugging</string>
   <string name="catalyst_hot_reloading" project="catalyst" translatable="false">Enable Fast Refresh</string>
   <string name="catalyst_hot_reloading_stop" project="catalyst" translatable="false">Disable Fast Refresh</string>
   <string name="catalyst_hot_reloading_auto_disable" project="catalyst" translatable="false">Disabling Fast Refresh because it requires a development bundle.</string>