From 36ee027d2251352aa96def6bbfa0df7e6c33b174 Mon Sep 17 00:00:00 2001
From: Rakan Nimer <rakan@et3arraf.com>
Date: Tue, 19 Jul 2016 02:09:00 -0700
Subject: [PATCH] Add debugging with Stetho instructions #934

Summary:
**Motivation** : Debugging RN with Stetho is very helpful but not very well documented.

**Result Screenshot**

![debugging-with-stethos-screenshot](https://cloud.githubusercontent.com/assets/1270909/16942569/61be3f76-4d9f-11e6-90de-d788ccabb440.png)
Closes https://github.com/facebook/react-native/pull/8883

Differential Revision: D3586063

fbshipit-source-id: e55ebee0d1e1eedb109bec307c313942bc70b646
---
 docs/Debugging.md | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/docs/Debugging.md b/docs/Debugging.md
index 4426c815a..9e9027702 100644
--- a/docs/Debugging.md
+++ b/docs/Debugging.md
@@ -84,7 +84,6 @@ Alternatively, select "Dev Settings" from the Developer Menu, then update the "D
 
 > 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 using a custom JavaScript debugger
 
 To use a custom JavaScript debugger in place of Chrome Developer Tools, set the `REACT_DEBUGGER` environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.
@@ -93,6 +92,46 @@ The debugger will receive a list of all project roots, separated by a space. For
 
 > Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.
 
+### Debugging with [Stetho](http://facebook.github.io/stetho/) on Android 
+
+1. In ```android/app/build.gradle``` , add
+
+   ```gradle
+   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 : 
+
+   ```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;
+   ```
+
+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. Run  ```react-native run-android ```
+
+5. In a new chrome tab, open : ```chrome://inspect```, click on 'Inspect device' (the one followed by "Powered by Stetho")
+
 ## Performance Monitor
 
 You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.