前言

在 Android 應用開發過程中，網絡請求的調試一直是一個重要但具有挑戰性的環節。Facebook 開發的 Stetho 是一個強大的調試工具，當它與 OkHttp 結合使用時，可以為我們提供前所未有的網絡請求洞察能力。本文將詳細介紹如何將這兩者結合使用，并展示如何利用這套工具鏈來提升開發效率。

一、Stetho 簡介

1. Stetho 是什么？

Stetho 是 Facebook 開發的一個 Android 調試橋梁，主要功能包括：

• 通過 Chrome DevTools 檢查應用數據庫

• 查看和編輯 SharedPreferences

• 可視化網絡請求監控

• JavaScript 控制臺實時交互

• 視圖層次檢查

2. 為什么選擇 Stetho + OkHttp？

• 可視化網絡監控：直接在 Chrome 中查看完整的請求/響應周期

• 無侵入式調試：不需要修改應用邏輯代碼

• 強大的審查能力：查看請求頭、響應體、時間線等詳細信息

• 與 OkHttp 深度集成：通過簡單攔截器即可啟用

二、基礎集成與配置

1. 添加依賴

在模塊的?build.gradle?中添加以下依賴：

gradle

// Stetho 核心庫
implementation 'com.facebook.stetho:stetho:1.6.0'// OkHttp 網絡攔截器
implementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'// 可選：JavaScript 控制臺支持
implementation 'com.facebook.stetho:stetho-js-rhino:1.6.0'

2. 初始化 Stetho

在?Application?類中進行初始化：

class MyApplication : Application() {override fun onCreate() {super.onCreate()// 僅在 debug 版本初始化if (BuildConfig.DEBUG) {Stetho.initializeWithDefaults(this)}}
}

3. 配置 OkHttp 客戶端

val okHttpClient = OkHttpClient.Builder().addNetworkInterceptor(StethoInterceptor()) // 添加 Stetho 網絡攔截器.connectTimeout(30, TimeUnit.SECONDS).readTimeout(30, TimeUnit.SECONDS).build()

三、使用 Stetho 調試網絡請求

1. 連接 Chrome DevTools

1. 運行你的應用

2. 在 Chrome 地址欄輸入：chrome://inspect

3. 在 "Devices" 部分找到你的設備和應用

4. 點擊 "Inspect" 按鈕打開調試面板

2. 網絡請求監控

在 Chrome DevTools 中：

1. 切換到 "Network" 標簽頁

2. 執行應用中的網絡請求操作

3. 查看捕獲的請求列表，包括：

   • 請求方法和URL

   • 狀態碼和響應時間

   • 請求/響應頭

   • 請求/響應體

   • 時間線（DNS、連接、SSL、發送、等待、接收等階段）

3. 查看請求詳情

點擊任意請求可以查看詳細信息：

• Headers：完整的請求和響應頭

• Preview：格式化后的響應預覽

• Response：原始響應數據

• Timing：請求各階段耗時分析

• Cookies：請求攜帶的Cookie信息

四、高級調試技巧

1. 結合其他攔截器使用

val okHttpClient = OkHttpClient.Builder().addInterceptor(HttpLoggingInterceptor().apply {level = HttpLoggingInterceptor.Level.BASIC}).addNetworkInterceptor(StethoInterceptor()) // 必須作為網絡攔截器.addInterceptor(AuthInterceptor()).build()

注意：StethoInterceptor?必須作為網絡攔截器(addNetworkInterceptor)添加，而不是普通攔截器(addInterceptor)，這樣才能捕獲到完整的請求和響應信息。

2. 調試 HTTPS 請求

Stetho 默認支持 HTTPS 請求調試，但需要設備信任 Stetho 的證書：

1. 在 Chrome 中打開：chrome://flags/#allow-insecure-localhost

2. 將該選項設置為 "Enabled"

3. 重啟 Chrome

3. 查看數據庫和 SharedPreferences

除了網絡請求，Stetho 還可以調試：

• 數據庫：在 "Resources" > "Web SQL" 中查看和編輯

• SharedPreferences：在 "Resources" > "Local Storage" 中查看

• 視圖層次：在 "Elements" 標簽頁中檢查

4. 使用 JavaScript 控制臺

// 在 Application 初始化時添加
Stetho.initialize(Stetho.newInitializerBuilder(this).enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this)).enableDumpapp(Stetho.defaultDumperPluginsProvider(this)).enableJavascriptConsole(Stetho.defaultJavaScriptInspectorModulesProvider(this)).build()
)

然后在 "Console" 標簽頁中可以直接執行 JavaScript 代碼與你的應用交互。

五、實際應用場景

1. 調試 API 請求問題

當 API 返回意外結果時，可以：

1. 查看完整請求內容，確認發送的參數是否正確

2. 檢查響應頭中的狀態碼和元數據

3. 分析響應體內容，定位問題原因

2. 性能優化分析

通過 "Timing" 面板可以：

1. 識別網絡請求的瓶頸階段（DNS、連接、等待等）

2. 比較不同請求的耗時情況

3. 驗證緩存是否生效

3. 認證問題排查

當遇到 401/403 錯誤時，可以：

1. 檢查請求頭中的認證信息是否正確

2. 查看服務器返回的 WWW-Authenticate 頭

3. 跟蹤重定向過程中的頭信息變化

六、自定義與擴展

1. 自定義 Stetho 初始化

Stetho.initialize(Stetho.newInitializerBuilder(this).enableWebKitInspector { context ->// 自定義 Inspector 模塊Stetho.defaultInspectorModulesProvider(context).plus(CustomInspectorModule(context))}.enableDumpapp { context ->// 自定義 Dumper 插件Stetho.defaultDumperPluginsProvider(context).plus(CustomDumperPlugin())}.build()
)

2. 創建自定義 Inspector 模塊

class CustomInspectorModule(context: Context) : InspectorModulesProvider {override fun get(): Iterable<ChromeDevtoolsDomain> {return listOf(// 實現你的自定義域MyCustomDomain())}
}class MyCustomDomain : ChromeDevtoolsDomain {// 實現自定義功能
}

3. 過濾敏感信息

如果請求中包含敏感信息，可以創建過濾攔截器：

class SensitiveInfoFilterInterceptor : Interceptor {override fun intercept(chain: Interceptor.Chain): Response {val request = chain.request()// 過濾敏感頭val filteredRequest = request.newBuilder().removeHeader("Authorization").build()return chain.proceed(filteredRequest)}
}// 在 Stetho 攔截器之前添加
val okHttpClient = OkHttpClient.Builder().addInterceptor(SensitiveInfoFilterInterceptor()).addNetworkInterceptor(StethoInterceptor()).build()

七、常見問題與解決方案

1. Stetho 不顯示網絡請求

可能原因：

• 未正確添加?StethoInterceptor

• 攔截器添加順序有問題

• 不是 debug 構建變體

解決方案：

1. 確認使用?addNetworkInterceptor()?而不是?addInterceptor()

2. 確保在 Application 中初始化了 Stetho

3. 檢查是否為 debug 版本

2. HTTPS 請求顯示不安全

解決方案：

1. 在 Chrome 中啟用?chrome://flags/#allow-insecure-localhost

2. 在設備上安裝并信任 Stetho 的證書

3. 請求體顯示為亂碼

解決方案：

1. 檢查響應頭中的 Content-Type 是否正確

2. 如果是壓縮響應，確保 Stetho 能正確解壓

八、替代方案比較

九、總結與最佳實踐

Stetho 與 OkHttp 的結合為 Android 開發者提供了強大的網絡調試能力。通過本文的介紹，我們了解到：

1. 基礎集成：如何快速將 Stetho 集成到項目中

2. 網絡監控：利用 Chrome DevTools 全面分析網絡請求

3. 高級技巧：HTTPS 調試、性能分析等進階用法

4. 自定義擴展：如何根據需求定制 Stetho 功能

最佳實踐建議：

1. 僅在 debug 版本啟用：通過 BuildConfig.DEBUG 控制初始化

2. 保護敏感信息：使用攔截器過濾認證頭等敏感數據

3. 結合其他工具：與 LoggingInterceptor 等配合使用

4. 團隊標準化：統一團隊的調試工具鏈配置

5. 性能監控：定期檢查網絡請求耗時，優化性能瓶頸

Stetho 作為一款成熟的調試工具，與 OkHttp 的集成幾乎是無縫的，能夠顯著提升網絡請求相關問題的排查效率。合理使用這套工具組合，可以讓你的開發調試工作事半功倍。