Stetho简化Android调试(一)

由于本人能力有限，文中若有错误之处，欢迎指正。
转载请注明出处：http://www.jianshu.com/p/42303aa8299a

在开发 Android 应用的时候，有时候我们需要查看数据库、SharePreference等。通常的做法是把相关文件pull出来，而前提必须是手机得root。如果没有root，那就只能通过打印或其它方式查看，整个过程非常麻烦。

Chrome的Developer Tools给Web前端开发带来很大便捷。Stetho是Facebook开源的一个工具，我们借助Stetho结合Developer Tools，能够很轻松直观的调试、查看 Android 应用中的数据。

使用步骤

---

1. 添加依赖

dependencies { 
    compile 'com.facebook.stetho:stetho:1.3.1' 
    // 如果需要查看网络请求信息(根据需要，选择依赖)
    compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'  // 使用okhttp3作为网络底层库
    compile 'com.facebook.stetho:stetho-okhttp:1.3.1' // 使用okhttp作为网络底层库 
    compile 'com.facebook.stetho:stetho-urlconnection:1.3.1' // 使用urlconnection作为网络底层库
} 

2. 在Application中初始化

public class MyApplication extends Application {
  
  public static OkHttpClient okHttpClient;

  public void onCreate() {
    super.onCreate();
    //  一般使用默认初始化配置足够使用
    Stetho.initializeWithDefaults(this);
    // 如果需要查看网络请求相关信息(以使用okhttp3为例)
    initOkHttpClient();
  }

  private void initOkHttp() {
      okHttpClient =  new OkHttpClient()
            .newBuilder()
            .addNetworkInterceptor(new StethoInterceptor()) // 这里添加一个拦截器即可
            .build();
  }

}

至此，我们的应用配置完毕。是不是超级简单？
接下来看怎么使用Developer Tools查看应用的各种信息。

3. 打开Chrome输入chrome://inspect

inspect

如果第1、2步配置正确的话，就可以看到以上页面。点击inspec：

Developer Tools

注意：如果第一次启动，这个页面有可能会一片空白。因为Developer Tools在连接远程服务器，这个连接需要科学上网。如果页面加载成功后再次打开，就不需要科学上网了。

Developer Tools功能说明

---

1. Elements

Elements

就像uiautomatorviewer.bat工具一样，可以查看页面视图的层级结构。

2. Network

Network

网络请求的会话信息都包含在这里，可以点击单个会话到详情，查看具体的报文信息。如下：

Network Detail

3. Resources

Resources

在这个选项卡里面，就可以查看应用保存的信息，包括SharePreference、数据库，并且可以执行SQL语句，直接修改SharePreference的内容。如下：

Web SQL SharePreference

4. Console

Console

该控制台允许使用JavaScript代码与应用程序或Android SDK交互。如下:

Console Result

context.getResources().getString(R.string.app_name);

运行以上代码可以得到应用下对应的字符串资源。

importPackage(android.util);
Log.d("WaitingAnd", "chuang");

运行以上代码可以在Logcat打印一条日志。

importPackage(android.widget);
importPackage(android.os);
var handler = new Handler(Looper.getMainLooper());
handler.post(function() { Toast.makeText(context, "Hello Stetho", Toast.LENGTH_LONG).show() });

运行以上代码可以在应用中直接显示Toast。

注意：使用Console功能需要添加依赖，否则会提示Not supported without stetho-js-rhino dependency

compile 'com.facebook.stetho:stetho-js-rhino:1.4.2'

5. Screencast

Screencast

赶快用起来吧！^_