React native - Programmatically check if in remote JS debugging is enabled

Question

On React-Native, how can I know if \"Debug JS Remotely\" is enabled?

I tried looking in RN docs and various NPM packages, but couldn\'t find out how...

Answer 1

A class DedicatedWorkerGlobalScope exists iff remote debugging is enabled (it is the constructor of global object in that case). Thus we can:

const haveRemoteDev = (typeof DedicatedWorkerGlobalScope) !== 'undefined';

Answer 2

So, any of the following answers didn't work for me...

I found out that the location pathname changes to /debugger-ui on global object:

if (global.location && global.location.pathname.includes('/debugger-ui')) {
  Alert.alert('Remote debug is on');
} else {
  Alert.alert('Remote debug is off');
}

Working on RN 0.59.

Answer 3

Ran across this answer, but wasn't happy with checking for atob or being constrained to android. I found a function that appears to be a pretty good proxy for if the debugger is running, which is a global called __REMOTEDEV__.

In my case, I wanted to see requests made by the app in react-native-debugger, my full code is as follows:

/**
 * When the debugger is connected, remove the XHR polyfill
 * so that the chrome inspector will be able to see requests
 */
if (typeof global.__REMOTEDEV__ !== 'undefined') {
  const _XHR = GLOBAL.originalXMLHttpRequest ?
      GLOBAL.originalXMLHttpRequest :
      GLOBAL.XMLHttpRequest;

  global.XMLHttpRequest = _XHR;
}

Answer 4

Check __REMOTEDEV__ in a simple way:

if(global.__REMOTEDEV__) { console.log('Remote Debug'); }

Answer 5

For Android, in the a shared preferences you can find the remote debug status. When I open the sharedPreferences file for my app.

Remote debug active

<map>
    <boolean name="remote_js_debug" value="true" />
    <boolean name="hot_module_replacement" value="true" />
    <boolean name="reload_on_js_change" value="true" />
</map>

Remote debug inactive

<map>
    <boolean name="remote_js_debug" value="false" />
    <boolean name="hot_module_replacement" value="true" />
    <boolean name="reload_on_js_change" value="true" />
</map>

So (Android only), you can use a module like this one : https://github.com/sriraman/react-native-shared-preferences to check if the remote debug is active.

Answer 6

You can check global.nativeCallSyncHook

if (!global.nativeCallSyncHook) {
  console.log("Debug JS Remotely")
}

see more at: https://github.com/facebook/react-native/commit/417e191a1cfd6a049d1d4b0a511f87aa7f176082