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...

score 15 · Accepted Answer · answered Mar 16 '17 at 16:13

15

How to programmatically check if remote debugging is enabled (just found this peculiar behaviour today on another SO question). Tested on RN 0.43 and with Chrome debugger + React Native Debugger :

const isDebuggingEnabled = (typeof atob !== 'undefined');

Edit: just noticed this was asked over half a year ago :D... well, I leave it here for future generations.

answered Mar 16 '17 at 16:13

Samuli Hakoniemi

18,740
1
61
74

If you are using react-native-web `isDebuggingEnabled` will always be true – n1ru4l Dec 19 '18 at 20:03

score 10 · Answer 2 · answered May 16 '18 at 18:20

10

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';

answered May 16 '18 at 18:20

Jokester

5,501
3
31
39

score 6 · Answer 3 · answered Apr 17 '17 at 23:53

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;
}

not working in RN 0.55 / Chrome 66 :( not sure when they changed it — Jokester, May 16 '18 at 18:15

score 6 · Answer 4 · answered Feb 03 '20 at 14:54

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

answered Feb 03 '20 at 14:54

wj2061

6,778
3
36
62

score 5 · Answer 5 · answered Sep 09 '19 at 09:54

5

Check __REMOTEDEV__ in a simple way:

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

answered Sep 09 '19 at 09:54

Idan

3,604
1
28
33

score 1 · Answer 6 · answered Dec 17 '19 at 12:13

1

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.

answered Dec 17 '19 at 12:13

Eric Pereira

83
6

Not sure why other answers have many upvotes and your has 0, it is indeed the only one working for me on RN 0.63 – gbalduzzi May 07 '21 at 09:45

score 0 · Answer 7 · answered Mar 16 '17 at 16:01

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.

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

7 Answers7

Linked