From c5bd033e4b7fe0299792b52893809320354acd9b Mon Sep 17 00:00:00 2001
From: "lgvichy@gmail.com" <lgvichy@gmail.com>
Date: Fri, 4 Aug 2017 16:45:04 -0700
Subject: [PATCH] Add proper Stetho debugging setup documentation

Summary:
Adding the proper way to setup Stetho debugging, based on this post: https://medium.com/andr3wjack/stetho-with-react-native-87642e5d7131#.352jqqavc

with updated OkHttp API.

**Test plan**

 + Manual test, DYI.
Closes https://github.com/facebook/react-native/pull/12232

Differential Revision: D5568733

Pulled By: hramos

fbshipit-source-id: 6006b9daa48024742b948f5fd33a07545549397c
---
 docs/Debugging.md | 90 +++++++++++++++++++++++++++++++----------------
 1 file changed, 60 insertions(+), 30 deletions(-)

diff --git a/docs/Debugging.md b/docs/Debugging.md
index 1b7b4c8c0179c9..a76f72da67ed93 100644
--- a/docs/Debugging.md
+++ b/docs/Debugging.md
@@ -165,43 +165,73 @@ Alternatively, select "Dev Settings" from the Developer Menu, then update the "D
 
 ### Debugging with [Stetho](http://facebook.github.io/stetho/) on Android
 
-1. In ```android/app/build.gradle```, add these lines in the `dependencies` section:
+Follow this guide to enable Stetho for Debug mode:
+
+1. In `android/app/build.gradle`, add these lines in the `dependencies` section:
 
    ```gradle
-   compile 'com.facebook.stetho:stetho:1.3.1'
-   compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'
+    debugCompile 'com.facebook.stetho:stetho:1.5.0'
+    debugCompile 'com.facebook.stetho:stetho-okhttp3:1.5.0'
    ```
 
-2. In ```android/app/src/main/java/com/{yourAppName}/MainApplication.java```, add the following imports:
-
-   ```java
-   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;
-   ```
+> 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);
+    }
+```
 
-3. In ```android/app/src/main/java/com/{yourAppName}/MainApplication.java``` add the function:
-   ```java
-   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. 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.
 
-4. Run  ```react-native run-android ```
+5. 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").
+6. In a new Chrome tab, open: `chrome://inspect`, then click on the 'Inspect device' item next to "Powered by Stetho".
 
 ## Debugging native code