Android—App—必备开发组件—调试工具篇—Stetho［配合OkHttp框架使用］

一、First and Foremost ：

测试同学，在测试Android—App时，所需要的其中一个重要的技能即判断页面数据错误后，能迅速定位是服务器接口问题，还是APP逻辑问题。此时就需要知道服务器接口返回给APP的原始数据是什么样子滴。
牛逼的测试同学，一般会在电脑使用抓包工具（如Fiddler、Wireshark、Charles等）进行一大堆配置，通过手机配置代理后，获取抓包数据。
为简化上述测试同学的工作量。本文引入一个牛逼的调试工具—Stetho

二、No picture，You say a JB：

必须在Chrome浏览器，才能使用呢

Android—App—必备开发组件—调试工具篇—Stetho［配合OkHttp框架使用］_第1张图片

chrome://inspect/#devices首页说明

Android—App—必备开发组件—调试工具篇—Stetho［配合OkHttp框架使用］_第2张图片

通过Preview查看Http响应数据

Android—App—必备开发组件—调试工具篇—Stetho［配合OkHttp框架使用］_第3张图片

通过Headers查看Http请求／响应数据（带Form表单数据）

Android—App—必备开发组件—调试工具篇—Stetho［配合OkHttp框架使用］_第4张图片

通过Headers查看Http请求／响应数据（带Request Payload数据）

Android—App—必备开发组件—调试工具篇—Stetho［配合OkHttp框架使用］_第5张图片

查看App存储数据

Android—App—必备开发组件—调试工具篇—Stetho［配合OkHttp框架使用］_第6张图片

修改TextView值，查看展示效果

三、Show Me Code：

使用开源框架stetho［该框架为Facebook开源，配合OkHttp使用］
项目地址：https://github.com/facebook/stetho

1. 在build.gradle中引入

compile 'com.facebook.stetho:stetho:1.4.2'
compile 'com.facebook.stetho:stetho-okhttp3:1.4.2’

2. 在BaseApplication的onCreate()方法中添加初始化代码：

注意既然是调试工具，上线版本就不需要了，不然看上面的图片好多信息容易泄漏，所以需要判断 isDebug模式下

public class BaseApplication extends Application {  
  public void onCreate() {  
    super.onCreate();  
    initDebugTool();// 初始化调试工具  
  }  
  // 初始化调试工具  
  private void initDebugTool() {  
    if (ReleaseConstant.ISDEBUG) {// 开发模式下  
        Stetho.initializeWithDefaults(this);  
    }  
  }  
}

3. 在OkHttp生成client的地方，加入拦截器

new OkHttpClient.Builder()  
    .addNetworkInterceptor(new StethoInterceptor())  
    .build()

四、Ok，Anyway：

1. 优点：

方便Android开发同学直接修改TextView值进行产品需求演示，无需重新编译，其他控件没有研究，待诸位看官发现了。
简洁，不需要测试同学额外安装软件＋配置代理网络，仅仅一个Chrome浏览器，一根USB／Type-C线，即用即走～
无需Root，即可查看手机APP中的缓存数据
方便其他非测试同学，也能随时查看Http请求／响应数据。

2. 缺点：

目前只能配合OkHttp使用
必须配合Chrome浏览器使用，谁让Android、Chrome是一家呢
此种方式仅适用Android手机，iOS的话，由iOS同学发掘其他工具喽，实在没有，只能使用抓包工具了。