概述

stetho是Facebook開(kāi)源的一個(gè)Android調(diào)試工具。通過(guò)stetho，開(kāi)發(fā)者可以使用chrome的inspect功能，對(duì)Android應(yīng)用進(jìn)行調(diào)試和查看。
主要功能是可以查看接口查詢(xún)，數(shù)據(jù)庫(kù)內(nèi)容，UI布局層次以及SP存儲(chǔ)等等基本功能。

本文將會(huì)從如下幾個(gè)方面對(duì)Stetho進(jìn)行說(shuō)明

1. 配置：將Stetho配置進(jìn)項(xiàng)目中
2. 使用：如何界面化的使用Stetho。
3. 問(wèn)題：使用過(guò)程中可能出現(xiàn)的問(wèn)題及解決辦法。
4. 其他說(shuō)明及參考文章。

配置

使用Stetho主要配置工作包括如下幾步：

1. 引入Stetho包
2. 在application中初始化
3. 在網(wǎng)絡(luò)請(qǐng)求中添加Stetho攔截器

1. 包引入

可以按照GitHub上進(jìn)行一步步的進(jìn)行設(shè)置，可以引入如下的包內(nèi)容：

implementation'com.facebook.stetho:stetho:1.5.1'
implementation'com.facebook.stetho:stetho-okhttp3:1.5.1'
implementation'com.facebook.stetho:stetho-urlconnection:1.5.1'

2. 在A(yíng)pplication中進(jìn)行初始化

在應(yīng)用的Application中初始化Stetho,示例代碼如下：

class TestMVPApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        Stetho.initializeWithDefaults(this)
    }

3. 在網(wǎng)絡(luò)請(qǐng)求上添加攔截器

最后如果需要對(duì)網(wǎng)絡(luò)接口進(jìn)行訪(fǎng)問(wèn)，還需要在網(wǎng)絡(luò)請(qǐng)求上添加攔截器。

示例代碼以Retrofit+okhttp為例。

override fun <T> createService(api: Class<T>, interceptors: List<Interceptor>): T {
        var httpClient = OkHttpClient.Builder()
        setHttpDefaultClient(httpClient)
        httpClient.addInterceptor(setDefaultInterceptor())
        //添加Stetho攔截器
        httpClient.addNetworkInterceptor(StethoInterceptor())
        interceptors?.forEach {
            httpClient.addInterceptor(it)
        }
        ...
    }

4. 總結(jié)

Stetho的配置相對(duì)比較簡(jiǎn)單，完成上述三個(gè)步驟之后就可以使用Stetho了。

使用

使用Stetho工具，需要使用Chrome瀏覽器或者具有Chrome內(nèi)核的瀏覽器，本文以Chrome瀏覽器為例進(jìn)行說(shuō)明。

1. 調(diào)試地址

Stetho的調(diào)試地址可以在瀏覽器上輸入如下地址：
chrome://inspect/#devices

可以看到電腦進(jìn)入到如下界面：

image1.png

查看Devices中可以發(fā)現(xiàn)當(dāng)前連接到PC上的設(shè)備及可以調(diào)試的應(yīng)用名稱(chēng)。使用調(diào)試即可點(diǎn)擊inspect按鍵直接打開(kāi)調(diào)試，具體調(diào)試模塊如下：

image.png

注意，使用Stetho必須要首次翻墻并等待各個(gè)模塊全部加載完畢，電腦重啟之后需要重新翻墻。

2. 模塊說(shuō)明

常用的模塊主要包括如下幾個(gè)：

1. Elements.
2. NetWork
3. Resources

下面針對(duì)幾個(gè)模塊進(jìn)行簡(jiǎn)單說(shuō)明：

1. Elements

Elements模塊主要是UI展示以及相應(yīng)的UI層級(jí)顯示，會(huì)包含一些簡(jiǎn)單的margin和寬高等等。在Event listener欄中還能夠查看到部分事件監(jiān)聽(tīng)例如點(diǎn)擊事件等。

image3.png

2. NetWork

NetWork主要是一些網(wǎng)絡(luò)請(qǐng)求的查看，可以查看到請(qǐng)求參數(shù)及返回參數(shù)，請(qǐng)求是否成功等等網(wǎng)絡(luò)基本信息。

image.png

3. Resources

Resources模塊主要是可以查看一些資源，例如SP資源或者SQL的一些數(shù)據(jù)均可以通過(guò)當(dāng)前的數(shù)據(jù)進(jìn)行查看訪(fǎng)問(wèn)，無(wú)需單獨(dú)導(dǎo)出進(jìn)行查看。并且在一定程度上得到的數(shù)據(jù)是實(shí)時(shí)的，十分方便。

image4.png

問(wèn)題

使用Stetho可能會(huì)遇到如下幾個(gè)相對(duì)常見(jiàn)的問(wèn)題，我這邊簡(jiǎn)單整理了一下，如果有不正確的地方歡迎指正，后續(xù)如果有其他問(wèn)題會(huì)繼續(xù)進(jìn)行添加。

問(wèn)題一：程序突然間無(wú)法debug或者打開(kāi)Stetho之后無(wú)法找到程序

解答：

方案1：使用stetho的時(shí)候請(qǐng)不要使用debug斷點(diǎn)調(diào)試，反之同樣在debug的使用也不要使用stetho，同時(shí)的話(huà)請(qǐng)使用其中一項(xiàng)即可。

方案2：部分過(guò)早的版本的設(shè)備可能無(wú)法觸發(fā)調(diào)試，請(qǐng)更換設(shè)備。

問(wèn)題二：打開(kāi)之后顯示錯(cuò)誤404.

解答：

HTTP/1.1 404 Not Found

如果顯示的是是上述錯(cuò)誤，則說(shuō)明你沒(méi)有觸發(fā)首次翻墻的狀態(tài)，各個(gè)組件無(wú)法初始化。

解決辦法一： 翻墻一次直至所有的調(diào)試組件都加載完畢。

解決辦法二：在Google瀏覽器添加Ghelper插件，使用Chrome瀏覽器在Ghelper打開(kāi)的情況下訪(fǎng)問(wèn)如下網(wǎng)站，等待能夠打開(kāi)此界面有數(shù)據(jù)顯示為止，再次打開(kāi)Stetho等待一些時(shí)間（需要多試幾次），有大概率能夠進(jìn)行調(diào)試。

chrome-devtools-frontend.appspot.com

參考文章

Stetho Github官方網(wǎng)站