调试工具Stetho使用教程

前言

Stetho是Facebook开源的Android调试工具 GIthub点这里 它可以：

1. 网络监控：包括图片预览、网络请求监控、以及将网络数据整理成HAR格式
2. 数据存储：查看数据库、Sharedpreference等（无需root设备）
3. View视图查看（要求API15+）
4. DumpAPP
5. Java Script交互

实战

1.基本使用

1.1在gradle中添加依赖

 // Gradle dependency on Stetho 
  dependencies { 
    debugCompile 'com.facebook.stetho:stetho:1.5.1' 
    //下面的两个依赖是非必须的，只有在需要监控网络的时候需要添加
    debugCompile 'com.facebook.stetho:stetho-urlconnection:1.5.1'
    debugCompile 'com.facebook.stetho:stetho-okhttp3:1.5.1'
  } 

1.2在application中进行初始化

一般情况下，我们只在debug模式下进行stetho的初始化，

public class MyApplication extends Application {
  public void onCreate() {
    super.onCreate();
    Stetho.initializeWithDefaults(this);
  }
}

1.3添加网络监控

new OkHttpClient.Builder()
    .addNetworkInterceptor(new StethoInterceptor())
    .build();

如果是Retrofit，只需要将上面的okhttpclient作为参数传入retrofit构造即可

 sRetrofit = new Retrofit.Builder()
        .baseUrl(baseUrl)
        .client(sClient)
        .build();

1.4 Chrome操作

爱奇艺极速版已经默认集成了Stetho，我们只需要： 在Chrome地址栏输入chrome://inspect回车，我们即可看到我们设备的型号，以及当前已经装了Stetho运行中的进程

我们选择主进程，点击inspect

1.4.1布局视图

 

当我们选中element的某一个标签后，设备（真机 or 模拟器）上对应的视图会用相对应的蓝色高亮显示，我们选择右侧的properties视图，可以看到该view的属性：

 

1.4.2 网络视图

在网络视图里，我们可以看到当前设备发起的所有请求：

我们可以选择其中的一条请求，查看其具体的请求信息及其response：

 

 

其中，preview视图可以看到一个整理过的JSON数据，而response带有原始数据

1.4.3 数据存储视图

Stetho比较强大的一点是我们无需root设备就可以查看设备的数据存储，包括SQL Database和SharedPreference：

 此外，我们可以通过SQL语句直接对数据库的内容进行操作：

 

2.高级使用

2.1DumpAPP

Dumpapp 为应用提供了一个可扩展的命令行交互接口，提供了一组默认的插件;dumpapp 就在工程的 scripts/dumpapp 下，遗憾的是目前在 Windows 下还用不了，因为它只提供了 Linux/Mac 下的执行脚本。

 

常用命令（插件）： 列出所有 Plugin ：./scripts/dumpapp -p com.facebook.stetho.sample -l 打印 SharedPreferences : ./scripts/dumpapp prefs print 写 SharedPreferences : ./scripts/dumpapp prefs write

dumpapp 默认提供的插件就在 com.facebook.stetho.dumpapp.plugins.*，具体使用方法可以参考源码中的说明。

2.2启用JavaScript Console

启用 JavaScript Console 只需在 build.gradle 中添加如下依赖即可

compile "com.facebook.stetho:stetho-js-rhino:1.4.1"

启动 app，在 Chrome 开发者工具的 Console 输入下面代码使 app 打印一个Toast:

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

 

importPackage(android.widget) 等于 java 中 import android.widget.*;，JavaScript 中使用 var 定义变量，这段代码就是创建了一个 handler 并调用 post 方法在 ui 线程弹一个 Toast。