From eae8779fdf8775d0cd4a5b22211af639be98c290 Mon Sep 17 00:00:00 2001 From: L Date: Mon, 6 Feb 2017 01:45:58 -0800 Subject: [PATCH 1/6] Update Debugging.md Adding the proper way to setup Stetho debugging. --- docs/Debugging.md | 98 ++++++++++++++++++++++++++++++++++------------- 1 file changed, 71 insertions(+), 27 deletions(-) diff --git a/docs/Debugging.md b/docs/Debugging.md index 410d153fb901db..74bff81dfd2ffa 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -96,43 +96,87 @@ The debugger will receive a list of all project roots, separated by a space. For ### Debugging with [Stetho](http://facebook.github.io/stetho/) on Android +(Adapted from https://medium.com/@andr3wjack/stetho-with-react-native-87642e5d7131#.352jqqavc) +Following this guide to enable Stetho only 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.x.x' + debugCompile 'com.facebook.stetho:stetho-okhttp3:1.x.x' ``` -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; +Go to http://facebook.github.io/stetho/ and replace 1.x.x with the latest version. For example: + + ```gradle + debugCompile 'com.facebook.stetho:stetho:1.4.2' + debugCompile 'com.facebook.stetho:stetho-okhttp3:1.4.2' ``` -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); - } +2. From project root, create 2 Java class that will wrap the Stetho call, one for release and one for debug. With the terminal, these cmds should get it done: + + ```bash + touch android/app/src/debug/java/com/snap/StethoWrapper.java + touch android/app/src/release/java/com/snap/StethoWrapper.java ``` -4. Run ```react-native run-android ``` +For release: + ```java + public class StethoWrapper { + + public static void initialize(Context context) { + // NO_OP + } + + public static void addInterceptor(OkHttpClient okHttpClient) { + // NO_OP + } + } + ``` + +For debug: + ```java + public class StethoWrapper { + public static void initialize(Context context) { + Stetho.initializeWithDefaults(context); + } + + public static void addInterceptor(OkHttpClient okHttpClient) { + OkHttpClientProvider.replaceOkHttpClient(okHttpClient); + } + } + ``` + +3. In ```android/app/src/main/java/com/{yourAppName}/MainApplication.java```, replace the original onCreate function with: + +```java + public void onCreate() { + super.onCreate(); + + if (BuildConfig.DEBUG) { + + StethoWrapper.initialize(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(); + + StethoWrapper.addInterceptor(client); + } + + SoLoader.init(this, /* native exopackage */ false); + } +``` + +4. Open the android project in Android Studio and resolve all dependency issue. (Hover over the red marked lines and play around with the IDE so that it import all the correct library for you!) + +5. 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") +6. In a new chrome tab, open : ```chrome://inspect```, click on 'Inspect device' (the one followed by "Powered by Stetho") ## Debugging native code From 868d9f22c31487bd6e9d3f3667836f674ad64220 Mon Sep 17 00:00:00 2001 From: L Date: Sun, 12 Feb 2017 09:22:04 -0800 Subject: [PATCH 2/6] Update Stetho guide based on comment from @AndrewJack --- docs/Debugging.md | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/docs/Debugging.md b/docs/Debugging.md index 74bff81dfd2ffa..c731b5a0768b6d 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -96,7 +96,6 @@ The debugger will receive a list of all project roots, separated by a space. For ### Debugging with [Stetho](http://facebook.github.io/stetho/) on Android -(Adapted from https://medium.com/@andr3wjack/stetho-with-react-native-87642e5d7131#.352jqqavc) Following this guide to enable Stetho only for Debug mode: 1. In ```android/app/build.gradle```, add these lines in the `dependencies` section: @@ -128,7 +127,7 @@ For release: // NO_OP } - public static void addInterceptor(OkHttpClient okHttpClient) { + public static void addInterceptor() { // NO_OP } } @@ -141,8 +140,13 @@ For debug: Stetho.initializeWithDefaults(context); } - public static void addInterceptor(OkHttpClient okHttpClient) { - OkHttpClientProvider.replaceOkHttpClient(okHttpClient); + public static void addInterceptor() { + OkHttpClient client = OkHttpClientProvider.getOkHttpClient() + .newBuilder() + .addNetworkInterceptor(new StethoInterceptor()) + .build(); + + OkHttpClientProvider.replaceOkHttpClient(client); } } ``` @@ -157,15 +161,7 @@ For debug: StethoWrapper.initialize(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(); - - StethoWrapper.addInterceptor(client); + StethoWrapper.addInterceptor(); } SoLoader.init(this, /* native exopackage */ false); From 083934a20c3461fb5da704a3c5d982ea64219c0e Mon Sep 17 00:00:00 2001 From: L Date: Sun, 19 Feb 2017 15:55:11 -0800 Subject: [PATCH 3/6] Update Debugging.md Remove example version --- docs/Debugging.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/docs/Debugging.md b/docs/Debugging.md index c731b5a0768b6d..2213763b1c3488 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -105,12 +105,7 @@ Following this guide to enable Stetho only for Debug mode: debugCompile 'com.facebook.stetho:stetho-okhttp3:1.x.x' ``` -Go to http://facebook.github.io/stetho/ and replace 1.x.x with the latest version. For example: - - ```gradle - debugCompile 'com.facebook.stetho:stetho:1.4.2' - debugCompile 'com.facebook.stetho:stetho-okhttp3:1.4.2' - ``` +Go to http://facebook.github.io/stetho/ and replace 1.x.x with the latest version. 2. From project root, create 2 Java class that will wrap the Stetho call, one for release and one for debug. With the terminal, these cmds should get it done: From 04579f715a711a71a8941892d37478ea46568370 Mon Sep 17 00:00:00 2001 From: L Date: Tue, 28 Feb 2017 19:23:05 -0800 Subject: [PATCH 4/6] Update Debugging.md --- docs/Debugging.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/Debugging.md b/docs/Debugging.md index 2213763b1c3488..3d2eb18025c442 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -110,8 +110,8 @@ Go to http://facebook.github.io/stetho/ and replace 1.x.x with the latest versio 2. From project root, create 2 Java class that will wrap the Stetho call, one for release and one for debug. With the terminal, these cmds should get it done: ```bash - touch android/app/src/debug/java/com/snap/StethoWrapper.java - touch android/app/src/release/java/com/snap/StethoWrapper.java + touch android/app/src/debug/java/com/{yourAppName}/StethoWrapper.java + touch android/app/src/release/java/com/{yourAppName}/StethoWrapper.java ``` For release: From 1153232cfd8c3e4878a5a0aa461ba361f26b0213 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ramos?= Date: Thu, 27 Apr 2017 11:55:34 -0400 Subject: [PATCH 5/6] Update Debugging.md --- docs/Debugging.md | 33 ++++++++++++++------------------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/docs/Debugging.md b/docs/Debugging.md index 3d2eb18025c442..d013914d3bcda4 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -96,26 +96,22 @@ The debugger will receive a list of all project roots, separated by a space. For ### Debugging with [Stetho](http://facebook.github.io/stetho/) on Android -Following this guide to enable Stetho only for Debug mode: +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.x.x' - debugCompile 'com.facebook.stetho:stetho-okhttp3:1.x.x' + debugCompile 'com.facebook.stetho:stetho:1.5.0' + debugCompile 'com.facebook.stetho:stetho-okhttp3:1.5.0' ``` -Go to http://facebook.github.io/stetho/ and replace 1.x.x with the latest version. +> The above will configure Stetho v1.5.0. You can check at http://facebook.github.io/stetho/ if a newer version is available. -2. From project root, create 2 Java class that will wrap the Stetho call, one for release and one for debug. With the terminal, these cmds should get it done: +2. Create the following Java classes to wrap the Stetho call, one for release and one for debug: - ```bash - touch android/app/src/debug/java/com/{yourAppName}/StethoWrapper.java - touch android/app/src/release/java/com/{yourAppName}/StethoWrapper.java - ``` - -For release: ```java + // android/app/src/release/java/com/{yourAppName}/StethoWrapper.java + public class StethoWrapper { public static void initialize(Context context) { @@ -128,8 +124,9 @@ For release: } ``` -For debug: ```java + // android/app/src/debug/java/com/{yourAppName}/StethoWrapper.java + public class StethoWrapper { public static void initialize(Context context) { Stetho.initializeWithDefaults(context); @@ -146,16 +143,14 @@ For debug: } ``` -3. In ```android/app/src/main/java/com/{yourAppName}/MainApplication.java```, replace the original onCreate function with: +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) { - + if (BuildConfig.DEBUG) { StethoWrapper.initialize(this); - StethoWrapper.addInterceptor(); } @@ -163,11 +158,11 @@ For debug: } ``` -4. Open the android project in Android Studio and resolve all dependency issue. (Hover over the red marked lines and play around with the IDE so that it import all the correct library for you!) +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 ``` +5. Run `react-native run-android`. -6. In a new chrome tab, open : ```chrome://inspect```, 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 From 805653076025a1342587d3df51c9b3ee6608ef7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ramos?= Date: Thu, 27 Apr 2017 11:56:24 -0400 Subject: [PATCH 6/6] Update Debugging.md --- docs/Debugging.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Debugging.md b/docs/Debugging.md index d013914d3bcda4..76343295fdb413 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -98,7 +98,7 @@ The debugger will receive a list of all project roots, separated by a space. For Follow this guide to enable Stetho for Debug mode: -1. In ```android/app/build.gradle```, add these lines in the `dependencies` section: +1. In `android/app/build.gradle`, add these lines in the `dependencies` section: ```gradle debugCompile 'com.facebook.stetho:stetho:1.5.0'