How do you debug React Native?

Question

How does one debug their React code with React Native while the app is running in app simulator?

Answer 1

If you want to enable debugging by default:

import { NativeModules } from 'react-native';

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

To get this working on Android:

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

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

Answer 2

There is also a very good debuger name Reactotron. https://github.com/infinitered/reactotron

You don't have to be in debug mode to see some data value and there is a lot of option.

go have a look that is really usefull. ;)

Answer 3

You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely", Just follow the following steps:

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger

Answer 4

For an Android App, if you're using Genymotion you can toggle the menu by pressing CMD + m, but you may have to enable it in the menu by doing this.

• Untick widget
• Enable it by CMD + m click on debug in chrome

Answer 5

Very simple just two commands

For IOS $ react-native log-ios
For Android $ react-native log-android

Answer 6

This is the alternate way to use react native debugger application.

you can download application using below link it's very good application for managing redux store along with the source code.

react-native-debugger

as well now a days you may directly use below link for help you out.

chrome-developer-tools