Skip to content

Commit

Permalink
Add proper Stetho debugging setup documentation
Browse files Browse the repository at this point in the history
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 #12232

Differential Revision: D5568733

Pulled By: hramos

fbshipit-source-id: 6006b9daa48024742b948f5fd33a07545549397c
  • Loading branch information
louisgv authored and facebook-github-bot committed Aug 4, 2017
1 parent 5be8c4a commit c5bd033
Showing 1 changed file with 60 additions and 30 deletions.
90 changes: 60 additions & 30 deletions docs/Debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit c5bd033

Please sign in to comment.