Android调试神器stetho使用详解和改造

本文由云+社区发表

作者：naoh

概述

---

stetho是facebook开源的一个android调试工具，项目地址：facebook/stetho 通过stetho，开发者可以使用chrome的inspect功能，对android应用进行调试和查看。 功能概述

stetho提供的功能主要有：

• network inspection：网络抓包，如果你使用的是当前流行的okhttp或者android自带的 httpurlconnection，你可以轻松地在chrome inspect窗口的network一栏抓到所有的网络请求和回包，还用啥postman，还用啥fiddler哦（开个玩笑，一些场合还是需要用的，毕竟stetho network inspection 只是用来查看回报和发送数据是否有误，在开发初期，调试api还是用postman快一点）
• database inspection：数据库查看，可以直接看到当前应用的sqlite数据库，而且是可视化的，不需要再下什么奇怪的工具或者用命令行看了。这个确实非常棒！
• view hierarchy：布局层级查看，免去使用查看布局边界的花花绿绿带来的痛苦和卡顿，而且能看到每个view和layout的各类属性。
• dump app：命令行拓展，构造了一个命令行与android app的交互通道，在命令行输入一行命令，app可以收到并且在命令行上进行反馈输出。
• javascript console：javascript控制台，在inspect的console窗口，输入javascript可以直接进行java调用。使用这个功能，得先引入facebook/stethostetho-js-rhino和mozilla/rhino。

在这里，笔者先承认这个文章有点标题党了——在我实际使用体验过后，第一感觉是：这个所谓神器也没有特别神的感觉…造成首次使用感觉不太好的原因在于：

• 使用教程不太全，尤其是dump app的使用，不管是在readme还是wiki中都没有太多的叙述。
• network inspection 抓包只封装了okhttp和httpurlconnection的，然而大多数情况下，各个应用开发者可能都会有自己的一套网络请求库，它提供的接口这时候就不太友好了，得自己包装一下。
• view hierarchy 用起来有一丝丝的不方便，因为调试视图还包括了android系统自带的状态栏布局之类的，导致activity的布局天然处于一个比较深的节点，每次还要手动一层一层展开（其实这里有一个技巧，后面会提到）。
• javascript console 感觉是最鸡肋的功能，因为自带的console只能关联到application的context，能进行的操作非常有限，且在控制台写js调用java层的函数是没有自动补全的，容易写错不说，要换成js的语法也是相当费劲。就算解决这几个问题，也还是想不到什么合适的使用场景。

后面将会对dump app和network inspection进行详细介绍（其他的几个功能都比较简单）。

初始化stetho

首先引入在安卓项目中引用必要的依赖包，可以使用gradle，也可以直接下载jar包。

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

需要注意的是如果使用javascript console需要额外引入facebook/stethostetho-js-rhino和mozilla/rhino。 然后在应用的application初始化时，进行stetho初始化。这些都在官网有详细的说明，不再赘述了。

开始使用

由于大部分功能依赖于chrome devtools 所以第一步你需要先打开chrome，然后在浏览器地址栏输入：chrome://inspect 接触过前端开发或者webview开发的捧油应该是很熟悉这个套路了。你会看到一个如下界面：

inspect界面

你会发现这里有两项，是因为我的这个示例应用有两个进程。由于app的每个进程都会单独创建一个application，所以在应用包含多个进程时，stetho也会为每个进程都初始化一次。那么这里我要调试的是主进程，就点击第一项inspect就行了。 接下来我们就开始搞事情了：

view hierarchy

查看布局层级没啥好说的，但是之前提到，由于系统的view层级也包括进来了，所以我们activity的layout层级都很深，每次一层一层点开很难找，这里提供一个简便方法，在elements面板，按ctrl + f，搜索 @android:id/content 即可快速定位到我们当前界面根布局，例如这里的constraintlayout:

database inspection

点击resource-web sql即可查看app的数据库：

javascript console

在console面板，输入context可以看到目前的applicationcontext：

输入如下代码弹出toast：

importpackage(android.widget);
importpackage(android.os);
var handler = new handler(looper.getmainlooper());
handler.post(function() { toast.maketext(context, "hello from javascript", toast.length_long).show() });

应用场景比较有限，但是mozilla/rhino这个javascript引擎倒是挺有意思的，可以用来做一些有趣的事情，以后有机会再分享一下。

dump app

官方对dump app的使用说明实在太少了，感觉非常捉急。研究了一番，大概知道了使用流程，即首先需要在app内，通过enabledumpapp方法注册自己的插件： stetho.initialize(stetho.newinitializerbuilder(context)

.enabledumpapp(new dumperpluginsprovider() {
  @override
  public iterable<dumperplugin> get() {
    return new stetho.defaultdumperpluginsbuilder(context)
        .provide(new mydumperplugin())
        .finish();
  }
})
.enablewebkitinspector(stetho.defaultinspectormodulesprovider(context))
.build())

也可以使用默认的插件： stetho.initialize(stetho.newinitializerbuilder(this)

            .enabledumpapp(new dumperpluginsprovider() {
                public iterable<dumperplugin> get() {
                    return (new stetho.defaultdumperpluginsbuilder(stethonetworkapplication.this)).finish();
                }
            }).enablewebkitinspector(stetho.defaultinspectormodulesprovider(context))
.build())

然后，stetho的github项目地址下有一个script文件夹：facebook/stetho-script 把这个文件夹下到本地，发现里面有几个文件： .gitignore dumpapp hprof_dump.sh stetho_open.py 说实话第一眼看上去根本不知道这东西干啥用的，dumpapp这文件看起来就跟可执行文件似的，但事实上它又不是exe，用记事本打开一看，是python3的文件，我也是醉了…

所以使用python3.x来运行这个文件即可。（由于他还引用了stetho_open.py，为了看起来不那么别扭，我把几个文件都整合在一齐，搞了一个dump.py） 这里我并没有注册任何插件，但是由于stetho自带了几个插件，我们可以看看他们的实现：

例如files插件，来试用一下：

即用户发送命令时，plugin的dump方法会被调用，plugin通过dumpcontext.getstdout()来获取输出流，将反馈输出到命令行：

public void dump(dumpercontext dumpcontext) throws dumpexception {
        iterator<string> args = dumpcontext.getargsaslist().iterator();
        string command = argshelper.nextoptionalarg(args, "");
        if("ls".equals(command)) {
            this.dols(dumpcontext.getstdout());
        } else if("tree".equals(command)) {
            this.dotree(dumpcontext.getstdout());
        } else if("download".equals(command)) {
            this.dodownload(dumpcontext.getstdout(), args);
        } else {
            this.dousage(dumpcontext.getstdout());
            if(!"".equals(command)) {
                throw new dumpusageexception("unknown command: " + command);
            }
        }

    }

network inspection

其实这也是重点之一了。我在这里添加了一个okhttp的inspector。 注意：此处有坑，因为你会发现用gradle添加的stetho依赖中没有stethointerceptor这个类，你可以到stetho的github页面下载一下，同事需要跟你的okhttp版本对应，因为2.x跟3.x对应的stethointerceptor还有差异）： 下载地址： facebook/stetho-okhttp3 facebook/stetho-okhttp 代码示例如下： public void testokhttp(){

thread thread = new thread(new runnable() {
    @override
    public void run() {
        string url = "http://www.zhihu.com/";
        okhttpclient.builder builder = new okhttpclient.builder()

.addnetworkinterceptor(new stethointerceptor());

        okhttpclient client = builder.build();
        request request = new request.builder()
                .url(url)
                .get()
                .build();
        try {

            response response = client.newcall(request).execute();
        } catch (ioexception e) {
            e.printstacktrace();
        }
    }
});
thread.start();

}

运行这个函数，可以看到network一栏的请求，每项网络请求发出时，status处于pending状态，收到回包后，status等栏目都会变化，展示httpcode，请求耗时、回包数据类型等信息。

当然这不是重点。重点是我们要对这个东西改造一下，他是如何抓下包来发送给chrome的呢？ 看一下stethointerceptor的intercept函数，写了些注释：

private final networkeventreporter meventreporter = 
    networkeventreporterimpl.get();
public response intercept(chain chain) throws ioexception {
    // 构造一个独特的eventid，一对网络事件（请求和回包）对应一个eventid
    string requestid = meventreporter.nextrequestid();

    request request = chain.request();
    
    // 准备发送请求
    requestbodyhelper requestbodyhelper = null;
    if (meventreporter.isenabled()) {
      requestbodyhelper = new requestbodyhelper(meventreporter, requestid);
      okhttpinspectorrequest inspectorrequest =
          new okhttpinspectorrequest(requestid, request, requestbodyhelper);
      // 请求即将发送，构造一个okhttpinspectorrequest，报告给chrome，此时network会显示一条请求，处于pending状态
      meventreporter.requestwillbesent(inspectorrequest);
    }

    response response;
    try {
      // 发送请求，获得回包
      response = chain.proceed(request);
    } catch (ioexception e) {
      // 如果发生了io exception，则通知chrome网络请求失败了，显示对应的错误信息
      if (meventreporter.isenabled()) {
        meventreporter.httpexchangefailed(requestid, e.tostring());
      }
      throw e;
    }

    if (meventreporter.isenabled()) {
      if (requestbodyhelper != null && requestbodyhelper.hasbody()) {
        requestbodyhelper.reportdatasent();
      }

      connection connection = chain.connection();
      
      // 回包的header已收到，构造一个okhttpinspectorresponse,发送给chrome用于展示
      meventreporter.responseheadersreceived(
          new okhttpinspectorresponse(
              requestid,
              request,
              response,
              connection));

      // 展示回包信息
      responsebody body = response.body();
      mediatype contenttype = null;
      inputstream responsestream = null;
      if (body != null) {
        contenttype = body.contenttype();
        responsestream = body.bytestream();
      }

      responsestream = meventreporter.interpretresponsestream(
          requestid,
          contenttype != null ? contenttype.tostring() : null,
          response.header("content-encoding"),
          responsestream,
          new defaultresponsehandler(meventreporter, requestid));
      if (responsestream != null) {
        response = response.newbuilder()
            .body(new forwardingresponsebody(body, responsestream))
            .build();
      }
    }

    return response;
  }

所以整个流程我们可以简化为：发送请求时，给chrome发了条消息，收到请求时，再给chrome发条消息（具体怎么发的可以看networkeventreporterimpl的实现） 两条消息通过eventid联系起来，它们的类型分别是okhttpinspectorrequest 和 okhttpinspectorresponse，两者分别继承自networkeventreporter.inspectorrequest和networkeventreporter.inspectorresponse。我们只要也继承自这两个类，在自己的网络库发送和收到请求时，构造一个request和response并发送给chrome即可。 发送部分示例：

pulseinspectorrequest 继承自networkeventreporter.inspectorrequest
   public void reportrequestsend(pulseinspectorrequest request){
        string requestid = request.id();

        // request will be sent
        requestbodyhelper requestbodyhelper = null;
        if (meventreporter.isenabled()) {
            requestbodyhelper = new requestbodyhelper(meventreporter, requestid);
            meventreporter.requestwillbesent(request);

            // report request send
            if (requestbodyhelper.hasbody()) {
                requestbodyhelper.reportdatasent();
            }
        }

    }

回包获取成功：

public void reportrequestsuccess(pulseinspectorresponse response){
    meventreporter.responseheadersreceived(response);
    meventreporter.responsereadfinished(response.requestid());

    string requestid = response.requestid();
    string contenttype = "application/json";
    string encoding = null;
    inputstream responsestream = new bytearrayinputstream(response.getresponsebody().getbytes());

    inputstream responsehandlinginputstream = meventreporter.interpretresponsestream(
            requestid,
            contenttype,
            encoding,
            responsestream,
            new defaultresponsehandler(meventreporter, requestid));
    try {
        if (responsehandlinginputstream == null) return;
        // 重点在这，这两行代码一定要加上,stethointerceptor之所以不需要加，
        // 是因为okhttp本身对请求采取了职责链式的处理，
        // 虽然在stethointerceptor的intercept函数里没有进行read和close
        // 但是后续的interceptor会进行这个操作，实际上这里，才把回包数据发送给了chrome
        responsehandlinginputstream.read(response.getresponsebody().getbytes());
        responsehandlinginputstream.close();
    } catch (ioexception e) {
        e.printstacktrace();
    }
}

回包获取失败

public void reportrequestfail(string eventid,string errmsg){
        meventreporter.httpexchangefailed(eventid, errmsg);
}

至于pulseinspectorresponse 和pulseinspectorrequest如何实现，就依赖实际使用场景了。

总结

stetho 为开发者提供了一个很好的调试手段，但是自带的基础功能还比较弱，开发者可以根据自己的需求去改造。（不过官网文档是有点太少了……） 如果说这个工具有啥亮点，想来想去，大概app跟chrome的通信，火狐的rhino引擎更可以被称之为亮点= .=|||3

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货，可以关注我们

如对本文有疑问， 点击进行留言回复！！