使用 Chrome 来调试你的 Android App

Question

个人一直对 Chrome 情有独钟，Chrome 除了更快之外，对开发者的支持更友好。内置强大的 Developer Tools，相信 Web 开发简直爱不释手！而且 Chrome Store 里提供各种各样的插件，没有你用不到，只有你想不到。现在任何事基本 Chrome 全部办的到，有时候就在想，如果可以用 Chrome 调试 Android App 该多方便，而如今 Facebook 刚刚开源了一个工具 Stetho ，从此 Chrome 调试 Android 不再是梦。

调试工具

在 Android 开发中除了一些官方自带的一些调试工具外，还有两个工具我认为是必备的。

抓包工具

windows 平台最好用的应该是 Fiddle， mac 上最好用的应该是 Charles。这个应该是 App 开发必备，不管是 Android 还是 iOS。

Sqlite 查看

这个工具就多了，除了自带的 sqlite3 工具之外，还是需要一些 GUI 方面的工具更方便，就不一一列举了，大家自行搜索找到自己喜欢的工具就行了，有一些浏览器插件，也有一些各个平台的客户端。需要知道的是如果想查看 App 内的 sqlite 文件需要 root。

Stetho

抓包工具虽然好用，但是每次都要在手机设置代理，也挺麻烦的，查看 sqlite 文件必须要 root 这点更麻烦。但是有了 stetho，这些工具全部自带了，使用方便，无须 root，下面就来看下官方 demo 介绍的使用用法。

首先 Gradle 进行依赖

dependencies {
  compile 'com.facebook.stetho:stetho:1.0.1'
}

然后在你的 App 的 Application 类里进行配置

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

然后就可以运行 App 进行调试，基本上可以满足调试需求了。

Chrome 调试

打开 Chrome，输入 chrome://inspect 然后就可以在列表里看到有你的 app 可以用 stetho 进行调试的 app，facebook 官方也提供了一个基本的 sample，以下是它的 sample 提供的调试截图

基本功能使用

检测网络状态

查看 App 本地数据库并且可以直接执行 SQL

查看 App 本地的 SharedPreference 文件并可以直接编辑

注意事项

值得注意的是如果你只是简单的进行配置下，检测网络状态的是没法查看，有两种方式：

使用 OkHttp

这是最简单的一种方式，要求 OkHttp 的版本在 2.2.x+，只需要添加如下代码, 这也是目前最简单的方法

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

使用 HttpURLConnection

如果你使用的自己写的或者其他 http library 底层是用 HttpURLConnection 实现的，你需要使用 StethoURLConnectionManager 来进行集成。然后必 须声明 Accept-Encoding: gzip 的请求 headers。具体用法见 facebook stetho 源码的 sample。

其中你可能会依赖如下 network helpers.

dependencies {
  compile 'com.facebook.stetho:stetho-okhttp:1.0.1'
}

或者

dependencies {
  compile 'com.facebook.stetho:stetho-urlconnection:1.0.1'
}

最后，提供一个 facebook stetho demo 的一个下载。

Stetho Sample