Launch a React Native app with “Debug JS Remotely” enabled by default

4 Comments on Launch a React Native app with “Debug JS Remotely” enabled by default

I had a bug in a React Native app which only occurred on the very first launch of the app, right after install. The bug was situated in a complex Redux Saga which bootstraps the application and populates the Redux store with things like an (anonymous) API token, (remote) config settings, etc.

The bug didn’t occur upon a second run of the app, as a REHYDRATE action then populated (parts of) the store with correct data, and the saga would eventually make it through.

To debug this issue I wanted to check out the Redux actions which got dispatched. Hitting CMD+D to open the developer menu and then selecting “Debug JS Remotely” unfortunately didn’t help me that much, as an app automatically refreshes when selecting “Debug JS Remotely”, thus triggering a second run.

~

With the bug only occurring at the very first launch, I looked for ways to launch my React Native app with “Debug JS Remotely” activated by default. Using several Google Search Coupons yielded no immediate result.

Note: later on it occurred to me that I could’ve “just” purged the store upon launch to debug this differently, yet I was looking in an other direction at the time 😉

Eventually I found a small note in the documentation section of React Native Debugger.

For enable Debug Remotely in real device, you may fatigued to shake device to show developer menu, you can use the built-in DevSettings native module on iOS.

In code:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

To get this working on Android you’ll need react-native-devsettings-android, which – awaiting a merged PR in the React Native core – provides Android with NativeModules.DevSettings.

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

~

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

4 Comments

  1. Not so sure why but I followed your instructions and when I do
    “`
    if (__DEV__) {
    console.log(‘NativeModules’, NativeModules);
    }
    “`

    DevSettings it’s not available on Android, only IOS…

    I did
    “`
    npm install –save react-native-devsettings-android
    react-native link react-native-devsettings-android
    “`
    but no luck!

    “react-native”: “0.55.4”,
    “react-native-devsettings-android”: “^0.1.5”,

    Reply

  2. Excellent find! Thank you for your article – I have the exact same scenarios as you. This was a life saver for me.

    Reply
  3. Reply
  4. Pingback: 你如何调试React Native？|ios问答

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.