本文由雲+社群發表
作者：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
此文已由騰訊雲+社群在各渠道釋出
獲取更多新鮮技術乾貨，可以關注我們騰訊雲技術社群-雲加社群官方號及知乎機構號