diff --git a/releases/next/docs/debugging.html b/releases/next/docs/debugging.html index 45091eef9dc..31258ab7897 100644 --- a/releases/next/docs/debugging.html +++ b/releases/next/docs/debugging.html @@ -12,24 +12,43 @@

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 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 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 on Android #

  1. In android/app/build.gradle, add these lines in the dependencies section:

    compile 'com.facebook.stetho:stetho:1.3.1' -compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'

  2. In android/app/src/main/java/com/{yourAppName}/MainApplication.java, add the following imports:

    import com.facebook.react.modules.network.ReactCookieJarContainer; -import com.facebook.stetho.Stetho; -import okhttp3.OkHttpClient; -import com.facebook.react.modules.network.OkHttpClientProvider; -import com.facebook.stetho.okhttp3.StethoInterceptor; -import java.util.concurrent.TimeUnit;

  3. In android/app/src/main/java/com/{yourAppName}/MainApplication.java add the function:

    public void onCreate() { +$ 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 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 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 on Android #

    Follow this guide to enable Stetho for Debug mode:

    1. In android/app/build.gradle, add these lines in the dependencies section:

      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.

    1. Create the following Java classes to wrap the Stetho call, one for release and one for debug:

      // 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 + } + }
      // 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); + } + }

    2. Open android/app/src/main/java/com/{yourAppName}/MainApplication.java and replace the original onCreate function:

    public void onCreate() { super.onCreate(); - Stetho.initializeWithDefaults(this); - OkHttpClient client = new OkHttpClient.Builder() - .connectTimeout(0, TimeUnit.MILLISECONDS) - .readTimeout(0, TimeUnit.MILLISECONDS) - .writeTimeout(0, TimeUnit.MILLISECONDS) - .cookieJar(new ReactCookieJarContainer()) - .addNetworkInterceptor(new StethoInterceptor()) - .build(); - OkHttpClientProvider.replaceOkHttpClient(client); -}

  4. Run react-native run-android

  5. In a new Chrome tab, open: chrome://inspect, then click on 'Inspect device' (the one followed by "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.

← PreviousContinue Reading →

Improve this page by sending a pull request!