起因：維護老項目，需查看本地數據庫數據，起初使用了DDMS調試，但使用時發現真機需Root、而我又不想使用模擬器，在此基礎下我發現了Stetho三方框架能實現我的需求，故在使用真實有效的基礎下總結此篇，包括遇到的每一個問題~
走起 ~
stetho基本瞭解
stetho爲facebook於2015年開發的Android調試工具，Github顯示在2019年依舊有代碼更新，故此可以看出目前這個框架依舊有團隊在進行維護 ~ 同時在Github有很明白的框架使用描述，不過爲了兼顧像我一樣英文不太好的還是看我寫的吧，畢竟在我大白話的介紹下差不多可以滿足基本使用了 ~
內置功能
-
Elements:查看界面的視圖結構
開發中我一般使用 Component Tree、Layout Inspector、Hierarchy Viewer 或直接通過 DDMS調試 查看視圖結構 -
Network：監控網絡請求，包含請求狀態、請求參數、返回參數等等
開發中我一般使用 Fiddler抓包，既能抓到請求，又可以模擬弱網環境，從而優化我們的用戶體驗；對了，DDMS 也可以抓請求，不過我還是用fiddler居多 ~ -
Resources：查看本地數據，比如sqlite數據庫，sharepreference等；同時也可以執行sql語句
-
Console：在這裏執行js語句，可以在APP上彈出一個Toast
-
dumpapp： 目前只可在linux/mac上使用的命令行交互接口工具（都不能在Windows用，所以沒去研究）
監控Network
除了攔截Network之外，其餘功能直接操作，攔截Network還需要根據官網描述簡單配置一下 ~
- 添加對應依賴
implementation 'com.facebook.stetho:stetho-okhttp3:1.5.1'
or
implementation 'com.facebook.stetho:stetho-urlconnection:1.5.1'
- 添加攔截器
stetho開發團隊在此部分配置階段，有下面這樣一段原話，供大家參閱下：
請注意，okhttp 2.x也可以使用，但是語法略有不同，因此必須使用stetho-okhttp工件（不是stetho-okhttp3）。
由於攔截器可以修改請求和響應，因此請在所有其他攔截器之後添加Stetho攔截器，以準確瞭解網絡流量。
如果您使用HttpURLConnection，則可以使用StethoURLConnectionManager 來輔助集成，儘管您應該意識到這種方法有一些注意事項。特別是，您必須顯式添加 Accept-Encoding: gzip到請求標頭並手動處理壓縮的響應，以便Stetho報告壓縮的有效負載大小
如果你項目中的網絡框架是基於okhttp開發的，那麼在自己封裝的網絡基層內加入類似OkHttp 3.x 攔截配置中
.addNetworkInterceptor(new StethoInterceptor())的代碼，應該就可以實現攔截了 ~
OkHttp 2.x
OkHttpClient client = new OkHttpClient();
client.networkInterceptors().add(new StethoInterceptor());
OkHttp 3.x
個人覺得應該基本都是3.0的了，因爲官網現在都已經不顯示2.0這樣的配置了 - -
new OkHttpClient.Builder()
.addNetworkInterceptor(new StethoInterceptor())
.build()
dumpapp插件
這部分沒去研究，有想看的這裏跳轉這裏，這位朋友講的也還行，雖然不是很細 ~
配置方式
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())
console配置
個人感覺對於app是個雞肋功能…
- 添加依賴（啓用JavaScript控制檯）
implementation 'com.facebook.stetho:stetho-js-rhino:1.5.1'
- 配置方式
啓動 app，在 Chrome 開發者工具的 Console 輸入下面代碼使 app 打印一個Toast
importPackage(android.widget);
importPackage(android.os);
var handler = new Handler(Looper.getMainLooper());
handler.post(function() { Toast.makeText(context, "hello", Toast.LENGTH_LONG).show() });
Andorid項目配置
以下倆步的實現只是爲了讓stetho的遊覽器工具可以識別到我們的手機
依賴注入
build.gradle
implementation 'com.facebook.stetho:stetho:1.5.1'
或
<dependency>
<groupId>com.facebook.stetho</groupId>
<artifactId>stetho</artifactId>
<version>1.5.1</version>
</dependency>
Application 註冊
但凡一個正常的Android項目都有屬於自己的Application,首先他是程序執行的第一個入口，同時兼顧很多的配置；所以不論是三方的的配置，還是說Android本身的兼容問題都會使用到Application！關於Application的一些問題，我也會在本文後半場說明 ~
- Application 的 onCreate()生命週期內加入下方代碼
Stetho.initializeWithDefaults(this);
- 如此這般
@Override
public void onCreate() {
super.onCreate();
Stetho.initializeWithDefaults(this);
}
遊覽器工具
喚出工具
在此過程中你可能會遇到遊覽器 報404、識別不到設備、無inspect按鈕等問題，但無須擔心，在本文後半場都有解決方式 ~
將下方鏈接copy到谷歌遊覽器中（劃重點”谷歌遊覽器“，要考的 - - ~）
chrome://inspect/#devices
在Google遊覽器打開的正確效果如下 > < ~
使用工具
喚出DevTools工具後如Element可顯示佈局結構，那麼恭喜你成功第一步了
完美狀態
這裏你可能會遇到 WebSql 打開空白界面的情況，莫擔心本文後半場有詳解
菜單欄Resources下查看WebSql，打開內部的data - data 你就可以看到想念已久的數據庫信息了 ~
哦，對了，如果想同步查看手機中項目的當前效果，可直接點右上角的手機 ，同居會同步效果的 ~
崎嶇道路一路錯
無法打開 chrome://inspect/#devices
我曾嘗試使用baidu、360、火狐等遊覽器請求該鏈接，但是結果有的直接報404錯誤、有的直接空白界面等，反正就是各種打不開 ~
首先確定當前使用的遊覽器是否爲Chrome （谷歌），如果不是請及時下載Chrome ，下載之後使用Chrome 重新請求即可；
使用Chrome後依舊無法打開 chrome://inspect/#devices
這個原因請私信我 > <
不顯示手機型號、包名、項目名等數據
1.查看Android項目是否配置完畢
2.查看手機是否已經打開App
3.這個原因請私信我
Inspect點擊之後出現空白界面
1.確定是否爲Chrome 瀏覽器
2.查看Chrome 是否爲最新版本
3.這個原因請私信我（第一次需要這樣，後面不需要）
Elements正常顯示，但Resources顯示空白
1.確定遊覽器爲Chrome
2.切入到Resources後，稍等倆分鐘，最多倆分鐘，即使數據傳輸慢，但是倆分鐘後還沒加載出來，那麼肯定是有問題
3.刷新當前界面 - F5
4.嘗試切換爲網絡環境（這個原因請私信我）
5.操作右上角手機圖標，同步顯示手機當前狀態
6.開啓一個新的Chrome 瀏覽器窗口，然後根據 chrome://inspect/#devices → inspect → Resources 操作，我是重複嘗試到第三次的時候成功獲取到了Resources內存的數據信息 ~