status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Rakan Nimer 2016-07-19 02:09:00 -07:00 committed by Facebook Github Bot 8
parent fa062aab14
commit 36ee027d22
1 changed files with 40 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
docs/Debugging.md
View File

@ -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.