Android进阶之路 - 使用Stetho查看真机数据库

起因：维护老项目，需查看本地数据库数据，起初使用了DDMS调试，但使用时发现真机需Root、而我又不想使用模拟器，在此基础下我发现了Stetho三方框架能实现我的需求，故在使用真实有效的基础下总结此篇，包括遇到的每一个问题~

搭档篇

DDMS调试之旅
使用Stetho查看真机数据库
Android Debug Database 本地数据库调试工具
Android Studio - Database Inspector 调试数据库

走起 ~

stetho基本了解
- 内置功能
- 监控Network
- dumpapp插件
- console配置
项目配置
- 依赖注入
- Application 注册
游览器工具
- 唤出工具
- 使用工具
- 完美状态
崎岖道路一路错
- 无法打开 chrome://inspect/#devices
- 使用Chrome后依旧无法打开 chrome://inspect/#devices
- 不显示手机型号、包名、项目名等数据
- Inspect点击之后出现空白界面
- Elements正常显示，但Resources显示空白

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'

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() {@Overridepublic 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() });

项目配置

以下俩步的实现只是为了让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);

如此这般

     @Overridepublic 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

这个原因请私信我 > <

不显示手机型号、包名、项目名等数据

查看Android项目是否配置完毕
查看手机是否已经打开App
这个原因请私信我

Inspect点击之后出现空白界面

确定是否为Chrome 浏览器
查看Chrome 是否为最新版本
这个原因请私信我（第一次需要这样，后面不需要）

Elements正常显示，但Resources显示空白

确定游览器为Chrome
切入到Resources后，稍等俩分钟，最多俩分钟，即使数据传输慢，但是俩分钟后还没加载出来，那么肯定是有问题
刷新当前界面 - F5
尝试切换为网络环境（这个原因请私信我）
操作右上角手机图标，同步显示手机当前状态
开启一个新的Chrome 浏览器窗口，然后根据 chrome://inspect/#devices → inspect → Resources 操作，我是重复尝试到第三次的时候成功获取到了Resources内存的数据信息 ~