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

此文已由騰訊雲+社區在各渠道發佈

獲取更多新鮮技術乾貨，能夠關注咱們騰訊雲技術社區-雲加社區官方號及知乎機構號