Android調(diào)試神器stetho使用詳解和改造
概述
stetho是Facebook開源的一個Android調(diào)試工具,項目地址:facebook/stetho 通過Stetho,開發(fā)者可以使用chrome的inspect功能,對Android應(yīng)用進(jìn)行調(diào)試和查看。 功能概述
stetho提供的功能主要有:
- Network Inspection:網(wǎng)絡(luò)抓包,如果你使用的是當(dāng)前流行的OkHttp或者Android自帶的 HttpURLConnection,你可以輕松地在chrome inspect窗口的network一欄抓到所有的網(wǎng)絡(luò)請求和回包,還用啥Postman,還用啥Fiddler哦(開個玩笑,一些場合還是需要用的,畢竟Stetho Network Inspection 只是用來查看回報和發(fā)送數(shù)據(jù)是否有誤,在開發(fā)初期,調(diào)試API還是用Postman快一點)
- Database Inspection:數(shù)據(jù)庫查看,可以直接看到當(dāng)前應(yīng)用的sqlite數(shù)據(jù)庫,而且是可視化的,不需要再下什么奇怪的工具或者用命令行看了。這個確實非常棒!
- View Hierarchy:布局層級查看,免去使用查看布局邊界的花花綠綠帶來的痛苦和卡頓,而且能看到每個view和layout的各類屬性。
- Dump App:命令行拓展,構(gòu)造了一個命令行與Android App的交互通道,在命令行輸入一行命令,App可以收到并且在命令行上進(jìn)行反饋輸出。
- Javascript Console:Javascript控制臺,在inspect的console窗口,輸入Javascript可以直接進(jìn)行Java調(diào)用。使用這個功能,得先引入facebook/stethostetho-js-rhino和mozilla/rhino。
在這里,筆者先承認(rèn)這個文章有點標(biāo)題黨了——在我實際使用體驗過后,第一感覺是:這個所謂神器也沒有特別神的感覺…造成首次使用感覺不太好的原因在于:
- 使用教程不太全,尤其是Dump App的使用,不管是在README還是wiki中都沒有太多的敘述。
- Network Inspection 抓包只封裝了OkHttp和HttpURLConnection的,然而大多數(shù)情況下,各個應(yīng)用開發(fā)者可能都會有自己的一套網(wǎng)絡(luò)請求庫,它提供的接口這時候就不太友好了,得自己包裝一下。
- View Hierarchy 用起來有一絲絲的不方便,因為調(diào)試視圖還包括了Android系統(tǒng)自帶的狀態(tài)欄布局之類的,導(dǎo)致Activity的布局天然處于一個比較深的節(jié)點,每次還要手動一層一層展開(其實這里有一個技巧,后面會提到)。
- Javascript Console 感覺是最雞肋的功能,因為自帶的console只能關(guān)聯(lián)到application的context,能進(jìn)行的操作非常有限,且在控制臺寫js調(diào)用Java層的函數(shù)是沒有自動補全的,容易寫錯不說,要換成Js的語法也是相當(dāng)費勁。就算解決這幾個問題,也還是想不到什么合適的使用場景。
后面將會對Dump App和Network Inspection進(jìn)行詳細(xì)介紹(其他的幾個功能都比較簡單)。
初始化Stetho
首先引入在安卓項目中引用必要的依賴包,可以使用gradle,也可以直接下載jar包。
dependencies {
compile 'com.facebook.stetho:stetho:1.5.0'
}
需要注意的是如果使用Javascript Console需要額外引入facebook/stethostetho-js-rhino和mozilla/rhino。 然后在應(yīng)用的Application初始化時,進(jìn)行Stetho初始化。這些都在官網(wǎng)有詳細(xì)的說明,不再贅述了。
開始使用
由于大部分功能依賴于Chrome DevTools 所以第一步你需要先打開Chrome,然后在瀏覽器地址欄輸入:chrome://inspect 接觸過前端開發(fā)或者Webview開發(fā)的捧油應(yīng)該是很熟悉這個套路了。你會看到一個如下界面:

inspect界面

你會發(fā)現(xiàn)這里有兩項,是因為我的這個示例應(yīng)用有兩個進(jìn)程。由于App的每個進(jìn)程都會單獨創(chuàng)建一個Application,所以在應(yīng)用包含多個進(jìn)程時,Stetho也會為每個進(jìn)程都初始化一次。那么這里我要調(diào)試的是主進(jìn)程,就點擊第一項inspect就行了。 接下來我們就開始搞事情了:
View Hierarchy
查看布局層級沒啥好說的,但是之前提到,由于系統(tǒng)的view層級也包括進(jìn)來了,所以我們Activity的Layout層級都很深,每次一層一層點開很難找,這里提供一個簡便方法,在Elements面板,按Ctrl + F,搜索 @android:id/content 即可快速定位到我們當(dāng)前界面根布局,例如這里的Constraintlayout:

Database Inspection
點擊Resource-Web SQL即可查看App的數(shù)據(jù)庫:

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() });
應(yīng)用場景比較有限,但是mozilla/rhino這個Javascript引擎倒是挺有意思的,可以用來做一些有趣的事情,以后有機會再分享一下。
Dump App
官方對dump app的使用說明實在太少了,感覺非常捉急。研究了一番,大概知道了使用流程,即首先需要在App內(nèi),通過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())
也可以使用默認(rèn)的插件: 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 把這個文件夾下到本地,發(fā)現(xiàn)里面有幾個文件: .gitignore dumpapp hprof_dump.sh stetho_open.py 說實話第一眼看上去根本不知道這東西干啥用的,dumpapp這文件看起來就跟可執(zhí)行文件似的,但事實上它又不是exe,用記事本打開一看,是Python3的文件,我也是醉了…

所以使用Python3.x來運行這個文件即可。(由于他還引用了stetho_open.py,為了看起來不那么別扭,我把幾個文件都整合在一齊,搞了一個dump.py) 這里我并沒有注冊任何插件,但是由于Stetho自帶了幾個插件,我們可以看看他們的實現(xiàn):
例如files插件,來試用一下:

即用戶發(fā)送命令時,Plugin的dump方法會被調(diào)用,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。 注意:此處有坑,因為你會發(fā)現(xiàn)用gradle添加的stetho依賴中沒有StethoInterceptor這個類,你可以到stetho的github頁面下載一下,同事需要跟你的OkHttp版本對應(yīng),因為2.x跟3.x對應(yīng)的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();
}
運行這個函數(shù),可以看到Network一欄的請求,每項網(wǎng)絡(luò)請求發(fā)出時,Status處于Pending狀態(tài),收到回包后,Status等欄目都會變化,展示httpcode,請求耗時、回包數(shù)據(jù)類型等信息。


當(dāng)然這不是重點。重點是我們要對這個東西改造一下,他是如何抓下包來發(fā)送給Chrome的呢? 看一下StethoInterceptor的intercept函數(shù),寫了些注釋:
private final NetworkEventReporter mEventReporter =
NetworkEventReporterImpl.get();
public Response intercept(Chain chain) throws IOException {
// 構(gòu)造一個獨特的eventID,一對網(wǎng)絡(luò)事件(請求和回包)對應(yīng)一個eventID
String requestId = mEventReporter.nextRequestId();
Request request = chain.request();
// 準(zhǔn)備發(fā)送請求
RequestBodyHelper requestBodyHelper = null;
if (mEventReporter.isEnabled()) {
requestBodyHelper = new RequestBodyHelper(mEventReporter, requestId);
OkHttpInspectorRequest inspectorRequest =
new OkHttpInspectorRequest(requestId, request, requestBodyHelper);
// 請求即將發(fā)送,構(gòu)造一個OkHttpInspectorRequest,報告給Chrome,此時Network會顯示一條請求,處于Pending狀態(tài)
mEventReporter.requestWillBeSent(inspectorRequest);
}
Response response;
try {
// 發(fā)送請求,獲得回包
response = chain.proceed(request);
} catch (IOException e) {
// 如果發(fā)生了IO Exception,則通知Chrome網(wǎng)絡(luò)請求失敗了,顯示對應(yīng)的錯誤信息
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已收到,構(gòu)造一個OkHttpInspectorResponse,發(fā)送給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;
}
所以整個流程我們可以簡化為:發(fā)送請求時,給Chrome發(fā)了條消息,收到請求時,再給Chrome發(fā)條消息(具體怎么發(fā)的可以看NetworkEventReporterImpl的實現(xiàn)) 兩條消息通過EventID聯(lián)系起來,它們的類型分別是OkHttpInspectorRequest 和 OkHttpInspectorResponse,兩者分別繼承自NetworkEventReporter.InspectorRequest和NetworkEventReporter.InspectorResponse。我們只要也繼承自這兩個類,在自己的網(wǎng)絡(luò)庫發(fā)送和收到請求時,構(gòu)造一個Request和Response并發(fā)送給Chrome即可。 發(fā)送部分示例:
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本身對請求采取了職責(zé)鏈?zhǔn)降奶幚恚?
// 雖然在StethoInterceptor的intercept函數(shù)里沒有進(jìn)行read和close
// 但是后續(xù)的Interceptor會進(jìn)行這個操作,實際上這里,才把回包數(shù)據(jù)發(fā)送給了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如何實現(xiàn),就依賴實際使用場景了。
stetho 為開發(fā)者提供了一個很好的調(diào)試手段,但是自帶的基礎(chǔ)功能還比較弱,開發(fā)者可以根據(jù)自己的需求去改造。(不過官網(wǎng)文檔是有點太少了……) 如果說這個工具有啥亮點,想來想去,大概App跟Chrome的通信,火狐的rhino引擎更可以被稱之為亮點= .=|||3
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
Android實現(xiàn)RecyclerView下拉刷新效果
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)RecyclerView下拉刷新效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
Eclipse下配置Ant腳本并自動打包帶簽名的Android apk
這篇文章主要介紹了Eclipse下配置Ant腳本并自動打包帶簽名的Android apk的相關(guān)資料,需要的朋友可以參考下2016-03-03
Android仿知乎懸浮功能按鈕FloatingActionButton效果
前段時間在看屬性動畫,恰巧這個按鈕的效果可以用屬性動畫實現(xiàn),下面通過本文給大家分享adroid仿知乎懸浮功能按鈕FloatingActionButton效果,需要的朋友參考下吧2017-04-04
Android ViewPager相冊橫向移動的實現(xiàn)方法
本篇文章小編為大家介紹,Android ViewPager相冊橫向移動的實現(xiàn)方法。需要的朋友參考下2013-04-04
Android開發(fā)實現(xiàn)webview中img標(biāo)簽加載本地圖片的方法
這篇文章主要介紹了Android開發(fā)實現(xiàn)webview中img標(biāo)簽加載本地圖片的方法,結(jié)合實例形式分析了webview加載本地圖片的步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
Android編程實現(xiàn)動態(tài)支持多語言的方法
這篇文章主要介紹了Android編程實現(xiàn)動態(tài)支持多語言的方法,涉及Android資源、控件及屬性相關(guān)操作技巧,需要的朋友可以參考下2017-06-06

