Androidのhierarchy viewerをStetho使ってChromeで見られるようになった

Stethoが1.1.0に更新され、CHANGELOGも更新されました。

大きな機能追加としては、hierarchy viewerの追加でしょうか。今までだと、 uiautomatorviewer を単品で使うかAndroid Device Monitorを使う必要があるため、確認が少し面倒でした。

これにより、Chromeブラウザがあれば同様の機能を見ることができます。API Level18以上だと、選択した箇所がハイライトもされます。

個人的には、これでAppiumのシナリオ書くときなんかも、Chrome見れば十分、というのが良いですね。Androidの開発環境が十分でないときでも、シナリオを増強できる。ちなみに、これ有効にしていると、Chromeでviewを読み込むための時間が必要になるのでアプリの動作が若干緩慢になりました。

XPathをコピーすると //*[@id="@id/example_path"] のような値が取得できるのですが、これはXPath strategyでは正しく識別できない。このidはresource_idなので、 //*[@resource-id="packagename:id/example_path"] のように指定する必要がありますね。

example_pathちょっとコードを追ってみる。

  • 対象バージョン
    • Stetho 1.1.0

Stethoの開発に使っている依存関係。
なるほど。junit4.12使っているのか。

https://github.com/facebook/stetho/blob/master/stetho/build.gradle#L18

dependencies {
    compile 'commons-cli:commons-cli:1.2'
    compile 'com.google.code.findbugs:jsr305:2.0.1'

    testCompile 'junit:junit:4.12'
    testCompile('org.robolectric:robolectric:2.4') {
        exclude module: 'commons-logging'
        exclude module: 'httpclient'
    }
    testCompile 'org.powermock:powermock-api-mockito:1.6.1'
    testCompile 'org.powermock:powermock-module-junit4:1.6.1'
}

Stetho.java

https://github.com/facebook/stetho/blob/master/stetho/src/main/java/com/facebook/stetho/Stetho.java

デフォルトで読み込まれるPluginの中は以下で追加している。HprofDumperPluginとCrashDumperPluginは今回の更新で入ったものかな。このようにplugins.addで、このほかにも独自Pluginを導入する方法もreadmeに書かれている。

  public static DumperPluginsProvider defaultDumperPluginsProvider(final Context context) {
    return new DumperPluginsProvider() {
      @Override
      public Iterable<DumperPlugin> get() {
        ArrayList<DumperPlugin> plugins = new ArrayList<DumperPlugin>();
        plugins.add(new HprofDumperPlugin(context));
        plugins.add(new SharedPreferencesDumperPlugin(context));
        plugins.add(new CrashDumperPlugin());
        return plugins;
      }
    };
  }

以下は、Chromeのinspectorで表示するためのものを読み込んでいるっぽい。
なるほど。

  public static InspectorModulesProvider defaultInspectorModulesProvider(final Context context) {
    return new InspectorModulesProvider() {
      @Override
      public Iterable<ChromeDevtoolsDomain> get() {
        ArrayList<ChromeDevtoolsDomain> modules = new ArrayList<ChromeDevtoolsDomain>();
        modules.add(new Console());
        modules.add(new CSS());
        modules.add(new Debugger());
        if (Build.VERSION.SDK_INT >= AndroidDOMConstants.MIN_API_LEVEL) {
          modules.add(new DOM(new AndroidDOMProviderFactory((Application)context.getApplicationContext())));
        }
        modules.add(new DOMStorage(context));
        modules.add(new HeapProfiler());
        modules.add(new Inspector());
        modules.add(new Network(context));
        modules.add(new Page(context));
        modules.add(new Profiler());
        modules.add(new Runtime());
        modules.add(new Worker());
        if (Build.VERSION.SDK_INT >= DatabaseConstants.MIN_API_LEVEL) {
          modules.add(new Database(context, new DefaultDatabaseFilesProvider(context)));
        }
        return modules;
      }
    };
  }

全体的に軽く眺めただけなのですが、まだ経験の浅い私からすると色々参考になる。アノテーションの使い方とかも。

あと、Stetho、使いやすいので不具合あったときは積極的にコミットしていきたい。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中