Skip to content

Commit

Permalink
Remove remote debugging from dev menu (#36754)
Browse files Browse the repository at this point in the history
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: #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
  • Loading branch information
gabrieldonadel authored and facebook-github-bot committed Apr 26, 2023
1 parent f92d438 commit 28e1ca9
Show file tree
Hide file tree
Showing 3 changed files with 1 addition and 59 deletions.
40 changes: 1 addition & 39 deletions packages/react-native/React/CoreModules/RCTDevMenu.mm
Original file line number Diff line number Diff line change
Expand Up @@ -284,46 +284,8 @@ - (void)setDefaultJSBundle
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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -115,22 +115,6 @@ public void onOptionSelected() {
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() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 28e1ca9

Please sign in to comment.