起因：维护老项目，需查看本地数据库数据，起初使用了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内存的数据信息 ~
