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
This commit is contained in:
gabrieldonadel
2023-04-26 09:30:20 -07:00
committed by Facebook GitHub Bot
parent f92d438649
commit 28e1ca9873
3 changed files with 1 additions and 59 deletions
@@ -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
@@ -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() {
@@ -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>