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

最新推荐文章于 2021-05-26 18:43:01 发布

Star's wing

最新推荐文章于 2021-05-26 18:43:01 发布

阅读量696

点赞数

先来谈谈我的数据库调试历程
第一阶段：

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

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

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

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

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

主角：Facebook推出的Stetho，官网

集成步骤：

引入依赖包

compile ‘com.facebook.stetho:stetho:1.3.1’
初始化一下

public class MyApplication extends Application {
public void onCreate() {
super.onCreate();
Stetho.initializeWithDefaults(this);
}
}
运行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官网查看相关配置
步骤：

引入依赖包

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’
初始化一下

public class MyApplication extends Application {
public void onCreate() {
super.onCreate();
Stetho.initializeWithDefaults(this);
}
}
添加拦截器

OkHttpClient client = new OkHttpClient.Builder()
.addNetworkInterceptor(new StethoInterceptor())
.build();
注：是addNetworkInterceptor不是addInterceptor
运行App, 打开Chrome输入chrome://inspect/#devices（跟上文查看数据库内容的步骤一样）

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

nice~

小贴士：用Chrome开发者工具抓包的时候，会发现如果页面跳转了，那么上一个页面的请求信息就没有了。这个只要勾选上Preserve log就不会了。
有个小问题, Response返回的json数据没法自动格式化显示=_=，有解决过这个问题的朋友还请留言告知，3Q~

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

Elements下查看~

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