StethoでAndroidのNetwork Performanceを見る

## 自己紹介

こんにちは [@wasabeef_jp](https://twitter.com/wasabeef_jp) です。
あ、そういえば、2015/4/25(土)に[DroidKaigi](http://droidkaigi.github.io)がありますね。
私も参加するので、こういう場で情報交換出来たらいいですね。


今回は、先日Facebookが公開した[Stetho](http://facebook.github.io/stetho/)について紹介したいと思います。

<img src="https://qiita-image-store.s3.amazonaws.com/0/12099/c776c279-9172-fa4d-daf7-4f64d846d57a.png" width="50%">

## Stetho

Stethoは、Android用のDebug Bridgeで、これを使うと
Chrome Developer Toolsの一部を利用して、Javascriptと同様にNetwork状況を確認できるツールです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/12099/65327a69-70e4-db0e-c869-7bf37eb054e5.png" width="50%">

## Usage
### Download

まずは Stetho本体を指定します。

```groovy
// Gradle dependency on Stetho
dependencies {
  compile 'com.facebook.stetho:stetho:1.0.0'
}
```

Network inspectionを有効にするために
OkHttpClientまたはUrlConnection用のフックライブラリも指定します。

```groovy
dependencies {
  compile 'com.facebook.stetho:stetho-okhttp:1.0.0'
}
```

or

```groovy
dependencies {
  compile 'com.facebook.stetho:stetho-urlconnection:1.0.0'
}
```

### Setup

ProguardのShrink対象からstethoパッケージを外します。

```text
-keep class com.facebook.stetho.** {*;}
```



Applicationクラスなどで、Stethoの初期化を行ないます。
DefaultのProviderを使う場合通りに以下のようにします、

```java
public class MyApplication extends Application {
  public void onCreate() {
    super.onCreate();
    Stetho.initialize(
      Stetho.newInitializerBuilder(this)
        .enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
        .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
        .build());
  }
}
```

OkHttpClientの`networkInterceptors`に追加します。
例えば、Retrofit + Glide or Picassoなど複数でOkHttpClientを利用している場合は
それぞれのOkHttpClientインスタンスに指定しなければ正常に取得できません。

```java
OkHttpClient client = new OkHttpClient();
client.networkInterceptors().add(new StethoInterceptor());
```

* Retrofitの場合

```java
return new RestAdapter.Builder()
  .setEndpoint("http://wasabeef.jp")
  .setClient(new OkClient(client))
  .build();
```

* Glideの場合

```java
OkHttpUrlLoader.Factory factory = new OkHttpUrlLoader.Factory(client);

// 3.4以下
Glide.get(this).register(GlideUrl.class, InputStream.class, factory);

// 3.5以上
public class MyGlideModule extends OkHttpGlideModule {
  @Override
  public void registerComponents(Context context, Glide glide) {
    glide.register(GlideUrl.class, InputStream.class, factory);
  }
}
```

* Picassoの場合

```java
Picasso picasso = new Picasso.Builder(this).downloader(new OkHttpDownloader(client)).build();
Picasso.setSingletonInstance(picasso);
```

カスタムダンプを利用する場合は、このように指定します。

標準のStethoが出力するデータでは、物足りない場合は、カスタムのProviderを作ります。
説明しきれないので、[Sample](https://github.com/facebook/stetho/tree/master/stetho-sample)を確認して下さい。


```java
Stetho.initialize(Stetho.newInitializerBuilder(context)
    .enableDumpapp(new MyDumperPluginsProvider(context))
    .build())

private static class MyDumperPluginsProvider implements DumperPluginsProvider {
  public Iterable<DumperPlugin> get() {
    ArrayList<DumperPlugin> plugins = new ArrayList<DumperPlugin>();
    for (DumperPlugin defaultPlugin : Stetho.defaultDumperPluginsProvider(mContext).get()) {
      plugins.add(defaultPlugin);
    }
    plugins.add(new MyDumperPlugin());
    return plugins;
  }
}
```

## Features

Javascriptの開発をしてる方は、慣れ親しんだものだと思います
Chrome DevToolsで、確認していきます。

端末をPCに接続して、Chrome DevTools > inspectを起動します。
![inspector-discovery.png](https://qiita-image-store.s3.amazonaws.com/0/12099/7882a324-0cbf-89ae-0b06-2d19ae1bea0f.png)

Networkを確認するとImage, Jsonデータは勿論で、データサイズ、レスポンス時間も確認できます。
![inspector-network.png](https://qiita-image-store.s3.amazonaws.com/0/12099/65327a69-70e4-db0e-c869-7bf37eb054e5.png)

Resourceを確認すると、例えばActiveAndroidのORMなどでSQLiteを利用している場合は
DBのデータ状況を素早く簡単に確認できます。
![inspector-sqlite.png](https://qiita-image-store.s3.amazonaws.com/0/12099/c9150a2e-691f-70ff-bec4-340824071268.png)

# 雑感
便利すぎたので、皆様と分かち合えればと思います。
何かあれば[@wasabeef_jp](https://twitter.com/wasabeef_jp)まで(੭ु๑•ૅω•´)੭ु⁾⁾