Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
or to those made with Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
## Accessing console logs
You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:
```
$ react-native log-ios
$ react-native log-android
```
You may also access these through `Debug → Open System Log...` in the iOS Simulator or by running `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal while an Android app is running on a device or emulator.
> If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
## Debugging on a device with Chrome Developer Tools
> If you're using Create React Native App, this is configured for you already.
On iOS devices, open the file [`RCTWebSocketExecutor.m`](https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m) and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the [`adb` command line tool](http://developer.android.com/tools/help/adb.html) to setup port forwarding from the device to your computer:
`adb reverse tcp:8081 tcp:8081`
Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.
> If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
### Debugging with [Stetho](http://facebook.github.io/stetho/) on Android
Follow this guide to enable Stetho for Debug mode:
1. In `android/app/build.gradle`, add these lines in the `dependencies` section:
```gradle
debugCompile 'com.facebook.stetho:stetho:1.5.0'
debugCompile 'com.facebook.stetho:stetho-okhttp3:1.5.0'
```
> The above will configure Stetho v1.5.0. You can check at http://facebook.github.io/stetho/ if a newer version is available.
2. Create the following Java classes to wrap the Stetho call, one for release and one for debug:
```java
// android/app/src/release/java/com/{yourAppName}/StethoWrapper.java
public class StethoWrapper {
public static void initialize(Context context) {
// NO_OP
}
public static void addInterceptor() {
// NO_OP
}
}
```
```java
// android/app/src/debug/java/com/{yourAppName}/StethoWrapper.java
public class StethoWrapper {
public static void initialize(Context context) {
Stetho.initializeWithDefaults(context);
}
public static void addInterceptor() {
OkHttpClient client = OkHttpClientProvider.getOkHttpClient()
.newBuilder()
.addNetworkInterceptor(new StethoInterceptor())
.build();
OkHttpClientProvider.replaceOkHttpClient(client);
}
}
```
3. Open `android/app/src/main/java/com/{yourAppName}/MainApplication.java` and replace the original `onCreate` function:
```java
public void onCreate() {
super.onCreate();
if (BuildConfig.DEBUG) {
StethoWrapper.initialize(this);
StethoWrapper.addInterceptor();
}
SoLoader.init(this, /* native exopackage */ false);
}
```
4. Open the project in Android Studio and resolve any dependency issues. The IDE should guide you through this steps after hovering your pointer over the red lines.
5. Run `react-native run-android`.
6. In a new Chrome tab, open: `chrome://inspect`, then click on the 'Inspect device' item next to "Powered by Stetho".
## Debugging native code
When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.