Android Stetho使用及常见问题解决

概述

stetho是Facebook开源的一个Android调试工具。通过stetho，开发者可以使用chrome的inspect功能，对Android应用进行调试和查看。
主要功能是可以查看接口查询，数据库内容，UI布局层次以及SP存储等等基本功能。

本文将会从如下几个方面对Stetho进行说明

1. 配置：将Stetho配置进项目中
2. 使用：如何界面化的使用Stetho。
3. 问题：使用过程中可能出现的问题及解决办法。
4. 其他说明及参考文章。

配置

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

1. 引入Stetho包
2. 在application中初始化
3. 在网络请求中添加Stetho拦截器

1. 包引入

可以按照GitHub上进行一步步的进行设置，可以引入如下的包内容：

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. 在Application中进行初始化

在应用的Application中初始化Stetho,示例代码如下：

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

3. 在网络请求上添加拦截器

最后如果需要对网络接口进行访问，还需要在网络请求上添加拦截器。

示例代码以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. 总结

Stetho的配置相对比较简单，完成上述三个步骤之后就可以使用Stetho了。

使用

使用Stetho工具，需要使用Chrome浏览器或者具有Chrome内核的浏览器，本文以Chrome浏览器为例进行说明。

1. 调试地址

Stetho的调试地址可以在浏览器上输入如下地址：
chrome://inspect/#devices

可以看到电脑进入到如下界面：

image1.png

查看Devices中可以发现当前连接到PC上的设备及可以调试的应用名称。使用调试即可点击inspect按键直接打开调试，具体调试模块如下：

image.png

注意，使用Stetho必须要首次翻墙并等待各个模块全部加载完毕，电脑重启之后需要重新翻墙。

2. 模块说明

常用的模块主要包括如下几个：

1. Elements.
2. NetWork
3. Resources

下面针对几个模块进行简单说明：

1. Elements

Elements模块主要是UI展示以及相应的UI层级显示，会包含一些简单的margin和宽高等等。在Event listener栏中还能够查看到部分事件监听例如点击事件等。

image3.png

2. NetWork

NetWork主要是一些网络请求的查看，可以查看到请求参数及返回参数，请求是否成功等等网络基本信息。

image.png

3. Resources

Resources模块主要是可以查看一些资源，例如SP资源或者SQL的一些数据均可以通过当前的数据进行查看访问，无需单独导出进行查看。并且在一定程度上得到的数据是实时的，十分方便。

image4.png

问题

使用Stetho可能会遇到如下几个相对常见的问题，我这边简单整理了一下，如果有不正确的地方欢迎指正，后续如果有其他问题会继续进行添加。

问题一：程序突然间无法debug或者打开Stetho之后无法找到程序

解答：

方案1：使用stetho的时候请不要使用debug断点调试，反之同样在debug的使用也不要使用stetho，同时的话请使用其中一项即可。

方案2：部分过早的版本的设备可能无法触发调试，请更换设备。

问题二：打开之后显示错误404.

解答：

HTTP/1.1 404 Not Found

如果显示的是是上述错误，则说明你没有触发首次翻墙的状态，各个组件无法初始化。

解决办法一： 翻墙一次直至所有的调试组件都加载完毕。

解决办法二：在Google浏览器添加Ghelper插件，使用Chrome浏览器在Ghelper打开的情况下访问如下网站，等待能够打开此界面有数据显示为止，再次打开Stetho等待一些时间（需要多试几次），有大概率能够进行调试。

chrome-devtools-frontend.appspot.com

参考文章

Stetho Github官方网站