借助Stetho在Chrome上调试Android网络&数据库

先来谈谈我的数据库调试历程

第一阶段：

这个熟悉的界面，记得那是13年初的时候，想要查看sqlite里面的数据都要通过这个Android Device Monitor找到/data/data/com.xxx.xxx/databases里面的db文件，然后导出到PC上，最后用PC上的数据库工具打开来查看。

还会遇到data文件夹死活打不开的情况（权限问题），说多了都是泪

第二阶段：

后来手机上出现了一些资源查看的App(需要root权限)，可以直接在手机上查看数据库啦~(上图为RE文件管理器的截图)

这比上面那种方式真是方便太多了，但也有很多不足之处，比如需要两个应用切换来切换去、当数据量比较大的时候会比较卡。

第三阶段：

下面就是本文的重点啦~通过chrome来查看android数据库。

主角：Facebook推出的Stetho，官网

集成步骤：

1. 引入依赖包

   compile 'com.facebook.stetho:stetho:1.3.1'
   

2. 初始化一下

   public class MyApplication extends Application {
     public void onCreate() {
       super.onCreate();
       Stetho.initializeWithDefaults(this);
     }
   }
   

3. 运行App, 打开Chrome输入chrome://inspect/#devices（别忘了用数据线把手机和电脑连起来哦）

如上图，chrome会检测到我们的app，点击inspect进入查看页面

注：有读者反馈第一次打开有遇到空白的情况，这时只要翻个墙就好了（20160817更新）

做过Web前端开发的小伙伴们对这个界面应该再熟悉不过了，此时如果你的app中有数据库存在的话就可以在Resources下的Web SQL中找到你的数据库文件查看数据库中的内容啦~

如果想要修改的话，可以点击数据库文件名就进入cmd模式了，可以通过sql命令来增删改查啦~_(≧▽≦)/

完整测试代码，将在文末给出(^o)/

再来谈谈我的网络调试历程

第一阶段：

用的最挫的方式，那就是想要看返回结果什么的时候，自己用Log打印出来看咯

打印对象的话，可以用下FastJson：JSON.toJSONString(object);

第二阶段：

一些第三方的网络请求库，都可以添加拦截器，然后就可以在拦截器中把

Request Url

Request Headers

Request Body

Response Body

Response Code

之类都打印出来看

如OkHttp：

OkHttpClient client = new OkHttpClient.Builder()
                .addInterceptor(new Interceptor() {
            @Override
            public Response intercept(Chain chain) throws IOException {
                Request request = chain.request();

                LogUtils.i("url:" + request.url());
                LogUtils.i("request headers" + JSON.toJSONString(request.headers()));
                LogUtils.i("request body:" + bodyToString(request));
                long t1 = System.nanoTime();
                Response response = chain.proceed(request);
                long t2 = System.nanoTime();

                double time = (t2 - t1) / 1e6d;
                LogUtils.i("time:" + time);
                LogUtils.i("code:" + response.code());

                return response;
            }
        }).build();
        
        
    private String bodyToString(final Request request){
        try {
            final Request copy = request.newBuilder().build();
            final Buffer buffer = new Buffer();
            copy.body().writeTo(buffer);
            return buffer.readUtf8();
        } catch (final IOException e) {
            return "did not work";
        }
    }

也用一些抓包工具，如PC上的Fidder，Mac上的Charles。

但有时候只是想看看请求的数据和返回的数据，设置代理什么的感觉也挺麻烦的。

第三阶段

通过Stetho来实现，chrome调试Android网络请求。

注：这里的例子是基于采用okhttp来发请求的，如果是HttpURLConnection可以到Stetho官网查看相关配置

步骤：

1. 引入依赖包

   compile 'com.facebook.stetho:stetho:1.3.1'
   compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'
   compile 'com.squareup.retrofit2:retrofit:2.0.0-beta4'
   compile 'com.squareup.okhttp3:okhttp:3.2.0'
   compile 'com.squareup.retrofit2:converter-gson:2.0.0-beta4'
   

2. 初始化一下

   public class MyApplication extends Application {
     public void onCreate() {
       super.onCreate();
       Stetho.initializeWithDefaults(this);
     }
   }
   

3. 添加拦截器

   OkHttpClient client = new OkHttpClient.Builder()
               .addNetworkInterceptor(new StethoInterceptor())
               .build();
   

注：是addNetworkInterceptor不是addInterceptor

4. 运行App, 打开Chrome输入chrome://inspect/#devices（跟上文查看数据库内容的步骤一样）

   点击inspect进入查看页面，然后在app用okhttp发起一个请求，就可以在Network下拦截到请求的相关数据了。

   

   nice~

小贴士：用Chrome开发者工具抓包的时候，会发现如果页面跳转了，那么上一个页面的请求信息就没有了。这个只要勾选上Preserve log就不会了。

有个小问题, Response返回的json数据没法自动格式化显示=_=，有解决过这个问题的朋友还请留言告知，3Q~

One more thing

界面UI树状结构也能抓的到呀！！！

Elements下查看~

普通text信息还可以直接修改并在手机上预览效果。_(≧▽≦)/

全部测试代码下载地址:

https://github.com/hellsam/StethoTest

欢迎留言交流，如有描述不当或错误的地方还请留言告知！

觉得还不错的话，点个赞支持一下呗O(∩_∩)O