Stetho — それは何か、Chrome DevToolsによるAndroidのデバッグ

Stethoとは何か、どう動くのか

Stetho は、Androidアプリの内部でローカルなWebSocketサーバーを起動するJavaライブラリです。Chrome DevToolsはadbポート経由でこのサーバーに接続し、アプリの内部コンポーネント（データベース、ネットワークリクエスト、preferences、view階層）へのアクセスを取得します。すべての通信はChrome DevTools Protocolプロトコルを通じて行われ、追加ソフトウェアをインストールせずにブラウザの標準ツールを使用できます。

アーキテクチャとコンポーネント

ライブラリはモジュールで構成されています:stetho（コア）、stetho-okhttp（OkHttp経由のトラフィック傍受）、stetho-urlconnection（HttpURLConnection経由の傍受）、stetho-js-rhino（JavaScriptプラグインのサポート）。コアはUNIXソケットを開き、Chromeはadb forward経由で接続します。各インスペクターは独立したプラグインとして実装され、Stethoの初期化時に登録されます。

要件と制限

StethoはAndroid 4.4+（API 19）をサポートし、debugビルドでのみ動作します。Android 11+のデバイスではマニフェストに明示的なINTERNET権限が必要です。2020年以降、このライブラリはFacebookの公式サポート対象外ですが、コードはオープンのままでレガシープロジェクトで使用されています。新しいプロジェクトでは、GoogleはAndroid Studio ProfilerとNetwork Inspectorを推奨しています。

AndroidプロジェクトでのStethoの接続と設定

接続は、Stethoがdebugビルドでのみ動作するようにdebugImplementationフラグ付きのGradle依存関係を通じて行われます。初期化はApplication.onCreate()メソッドで、単一のStetho.initializeWithDefaults(this)呼び出しで行われます。Network Inspectorには、Interceptorを通じたOkHttpとの統合が必要です。

// build.gradle（app）— Stethoの追加
dependencies {
    debugImplementation 'com.facebook.stetho:stetho:1.6.0'
    debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
}

// Applicationクラスでの初期化
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Network Interceptorの設定

OkHttp経由でネットワークリクエストを傍受するには、インターセプターチェーンにStethoInterceptorを追加します。StethoはURL、リクエストとレスポンスのヘッダー、ステータスコード、実行時間を自動的にログに記録します。データは、chrome://inspect経由でデバイスに接続した後、Chrome DevToolsのNetworkタブに表示されます。

Network Inspector: HTTPトラフィックの傍受

StethoのNetwork Inspectorは、アプリのすべてのHTTPリクエストを時系列で表示します。各リクエストについて、メソッド、URL、ステータスコード、リクエストとレスポンスのヘッダー、リクエストとレスポンスのボディ（JSONとバイナリデータを含む）が利用可能です。Previewタブはレスポンスボディをフォーマットされた形で表示します。

リクエストのフィルタリングと検索

Chrome DevToolsは、タイプ（XHR、JS、CSS、Doc）、ステータスコード、ドメインによるリクエストのフィルタリングをサポートします。検索フィールドはURLとコンテンツでフィルタリングします。モバイル開発では、APIドメインごとにリクエストをグループ化し、アプリの画面をテストする際に呼び出しの順序を確認すると便利です。

// Stetho interceptor付きのOkHttpクライアント
OkHttpClient client = new OkHttpClient.Builder()
    .addNetworkInterceptor(new StethoInterceptor())
    .build();

// リクエストの実行
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: SQLiteの操作

StethoのDatabase Inspectorは、Chrome DevTools経由でアプリのSQLiteデータベースに接続します。Resources → Web SQLタブには、開いているすべてのデータベース、そのテーブルと内容が表示されます。テーブルの構造、インデックスの表示、任意のSQLクエリの実行が可能です。

DevTools経由でのSQLクエリの実行

Chrome DevToolsのコンソールで、アプリのデータベースに直接SQLクエリを実行できます: SELECT、INSERT、UPDATE、DELETE。これは、テスト前のデータのクリーンアップ、マイグレーションの正確性の確認、アプリを再ビルドせずに誤ったレコードを手動で修正するのに便利です。すべての変更はデバイス上で即座に表示されます。

Dumpappとカスタムプラグイン

Dumpapp は、adb経由でカスタムコマンドを実行できるStethoのシェルインターフェースです。DumpappプラグインはStethoの初期化時に登録され、アプリの任意の状態（キャッシュ、設定、DIコンテナの状態）をエクスポートできます。コマンドはadb forward tcp:12345 localabstract:stetho_dumpappとして実行されます。

カスタムDumpappプラグインの作成

プラグインはDumperContextインターフェースを実装し、カスタムのInspectorModulesを使ってStetho.initialize経由で登録されます。下の例はSharedPreferencesのダンプ用プラグインを示しています:データはJSONにシリアライズされ、adbコマンド経由でターミナルに出力されます。

// SharedPreferences用のカスタムDumpappプラグイン
public class PrefsDumper implements DumperContext {
    @Override
    public String getName() {
        return "prefs";
    }
    @Override
    public void dump(DumperContext ctx) {
        SharedPreferences sp = ctx.getContext()
            .getSharedPreferences("app_prefs", Context.MODE_PRIVATE);
        ctx.getStdout().println(sp.getAll().toString());
    }
}

StethoとAndroid Studio Inspectorの比較

Android Studioは、Android Studio 4.1+で登場した組み込みのプロファイリングツール（Network Profiler、Database Inspector、View Inspector）を提供します。Stethoはこれらのツールが導入される前は人気があり、OkHttpを使用しChrome DevToolsとの統合を必要とするプロジェクトで今も重要です。

Stethoを選ぶべき時

Stethoは、OkHttpがすでに使用され、チームがChrome DevToolsに慣れているレガシープロジェクトで正当化されます。新しいプロジェクトでは、Android Studio Inspectorがほとんどのデバッグシナリオをカバーします。ただし、SQLiteクエリにはChrome DevToolsの方が依然として便利です:SQLのオートコンプリート付きの組み込みコンソールは、IDEでの連続クリックより速いからです。

StethoによるView Hierarchyの検査

StethoのView Hierarchyは、Chrome DevToolsのElementsタブにDOMのようなツリーとして表示されます。各Viewは属性付きのHTML要素として表されます:id、layout_width、layout_height、padding、margin、visibility、テキスト。ツリーの変更は、画面の回転やUIの更新時にリアルタイムで同期されます。

プロパティの表示と変更

ツリーで要素を選択すると、Stylesパネルでそのプロパティを表示できます。これはウェブページの検査に似ています。Stethoは、計算されたサイズ、パディング、背景色、状態（pressed、focused、enabled）を表示します。DevToolsでのいくつかのプロパティの変更は即座にアプリに適用され、再ビルドなしでUIパラメータの選択を高速化します。

View Inspectorによるメモリリークの検出

Stethoは、Viewに関連するメモリリークの発見に役立ちます:Activityがfinish()の後に破棄されない場合、そのルートViewはツリーに残ります。Elementsタブを定期的に確認することで、幽霊のようなActivityに気づき、リークの原因（通常はContextへの静的参照や閉じられていないダイアログ）を見つけることができます。

実践的なデバッグ手法

Stethoは、サーバーに送信する前にJSONシリアライゼーションを確認するのに効果的です。Network Inspectorを開き、リクエストを見つけて、データ構造とフィールドの正確性を確認するためにボディをRawモードで表示します。

SQLiteOpenHelperのデバッグ

StethoはSQLiteOpenHelperを通じて作成されたすべてのデータベースを表示します。データベースがChrome DevToolsに表示されない場合、アプリのコードでgetWritableDatabase()が少なくとも1回呼び出されているか確認してください。

OkHttpでのInterceptorの順序

変更されたリクエストを確認するには、StethoがOkHttpチェーンで最後のinterceptorである必要があります。正しい順序:最初にAuthInterceptor、次にLoggingInterceptor、最後にStethoInterceptor。

Stethoを使った実践的なデバッグ手法

Stethoは、サーバーに送信する前にJSONシリアライゼーションの正確性を確認するのに効果的です。Network Inspectorを開き、リクエストを見つけて、フィールド構造とデータ型の正確性を確認するためにリクエストボディをRawモードで表示します。

SQLiteOpenHelperとContentProviderのデバッグ

StethoはSQLiteOpenHelperを通じて作成されたすべてのデータベースを表示します。データベースがChrome DevToolsに表示されない場合、アプリのコードでgetWritableDatabase()メソッドが少なくとも1回呼び出されているか確認してください。マイグレーションの場合は、SQLコンソール経由でALTER TABLEを実行し、SELECTクエリで結果を確認してください。

OkHttpチェーンでのInterceptorの順序

最終的な変更済みリクエストを表示するには、StethoがOkHttpチェーンで最後のinterceptorである必要があります。正しい順序:正しいロギングのためにAuthInterceptorを最初に、次にLoggingInterceptor、最後にStethoInterceptor。