[转]stetho使用介绍

最新推荐文章于 2020-10-30 10:45:08 发布

weixin_33762130

最新推荐文章于 2020-10-30 10:45:08 发布

阅读量166

点赞数

文章标签： javascript 数据库 java ViewUI

原文链接:
http://www.jianshu.com/p/c03a8959d1a5#

转载请注明来源,尊重作者成果

介绍

stetho是facebook开发的Android调试工具。它可以通过chrome的开发者工具来辅助安卓开发。
总的来说，提供了以下几个功能：

通过Elements标签查看界面的视图结构。
通过Network标签观察网络请求。
通过Resources标签查看本地数据，比如sqlite数据库，sharepreference等等。同时可以在这里执行sql语句。
通过Console标签，在这里执行js语句，可以在APP上弹出一个Toast。
dumpapp 是linux/mac上使用的命令行工具，可以修改app内部资源，暂时未详细了解。

准备

在使用之前需要先引用需要的包。
通过语句

compile 'com.facebook.stetho:stetho:1.2.0'

来引用stetho。

底层的网络请求可以通过两种方式来实现。分别是okhttp和urlconnection。我这里使用了okhttp进行网络请求。
引用方式：

 compile 'com.facebook.stetho:stetho-okhttp:1.2.0'

如果使用urlconnection,则需要添加

compile 'com.facebook.stetho:stetho-urlconnection:1.2.0'

然后需要在使用自定义的Application添加 Stetho.initializeWithDefaults(this);

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

观察视图结构

在chrome的地址栏输入chrome://inspect, 可以看到当前连接的设备，然后点击inspect按钮。
然后可以在Elements标签中观察视图结构，当选中某个view时，手机上对应的控件也会加上一层蓝色蒙版
，就像调试web页面一样。可以通过这个功能优化布局，防止view嵌套过深。或者在编写自定义控件的时候
也能提供帮助。

观察网络请求

之前进行网络调试的时候，都是通过断点查看数据，或者通过设置代理，然后用Fiddler抓包来观察。
Stetho也提供了一种观察网络请求的方法。
首先要调用
mOkHttpClient.networkInterceptors().add(new StethoInterceptor());
来监听网络请求。然后开始调用接口。
这里我选择调用图灵机器人的聊天接口来测试网络调用，数据传输用的是json格式。
请求示例：

http://www.tuling123.com/openapi/api?key=KEY&info=你漂亮么

返回结果：

{

"code":100000,

"text":"恩恩，害羞ing……"

}

具体的调用代码：

mOkHttpClient = new OkHttpClient();
mOkHttpClient.networkInterceptors().add(new StethoInterceptor());


public void talk(View view) { String msg = etSource.getText().toString(); Request request = new Request.Builder().url(API_URL + API_KEY + "&info=" + msg).build(); Call call = mOkHttpClient.newCall(request); call.enqueue(new Callback() { @Override public void onFailure(Request request, IOException e) { } @Override public void onResponse(Response response) throws IOException { try { final JSONObject res = new JSONObject(response.body().string()); runOnUiThread(new Runnable() { @Override public void run() { try { textView.setText(res.getString("text")); } catch (JSONException e) { e.printStackTrace(); } } }); } catch (JSONException e) { e.printStackTrace(); } } }); }

发送请求之后，可以在Network标签看到所有通过okhttp发送的请求。但是如果APP中如果有不通过okhttp进行的请求，比如使用Glide加载图片，就无法监听这次加载图片的请求了。应该可以通过配置将okHttp作为Glide通信框架，然后监听。

在这里还可以观察到数据的大小，加载时间。

本地数据

以前想要观察手机上的sqlite数据库，都是通过命令行使用adb shell来操作，或者把数据库拷贝到电脑上然后再通过sqlite工具打开，非常不方便。现在可以直接通过stetho的Resources标签查看。

为了方便，我直接使用lite-orm来进行数据库操作。

    @Table("person ")
    public class Person { @PrimaryKey(AssignType.AUTO_INCREMENT) @Column("_id") public long id; @Column("sex") public String sex; @Column("age") public int age; @Column("name") public String name; } public void writeToDB(View view) { Person person = new Person(); person.age = 1; person.sex = "male"; person.name = "233"; liteOrm.save(person); textView.setText(String.format("There are %d datas in db", liteOrm.queryCount(Person.class))); }

上面的代码定义了一个person表格，然后每次执行writeToDB都会向表格中插入一条数据。

另外，还可以在这里直接执行sql语句进行查询或者插入等操作。

除了sqlite数据库，stetho还能观察本地sharedPreference数据
测试代码如下：

    SharedPreferences sharedPreferences;
    SharedPreferences.Editor editor;
sharedPreferences = this.getSharedPreferences("sp", Activity.MODE_PRIVATE); editor = sharedPreferences.edit(); public void writeToSP(View view) { editor.putString("test_key", "test_value"); editor.apply(); textView.setText(sharedPreferences.getString("test_key", "null")); }

控制台调试

如果想要开启js控制台的功能，还需要添加引用

compile 'com.facebook.stetho:stetho-js-rhino:1.2.0'

然后Stetho的初始化要使用enableWebKitInspector

 Stetho.initialize(Stetho.newInitializerBuilder(context)
        .enableWebKitInspector(new InspectorModulesProvider() {
          @Override
          public Iterable<ChromeDevtoolsDomain> get() { return new DefaultInspectorModulesBuilder(context).runtimeRepl( new JsRuntimeReplFactoryBuilder(context) // Pass to JavaScript: var foo = "bar"; .addVariable("foo", "bar") .build() ).finish(); } }) .build());

设置完成后，在console中输入

importPackage(android.widget);
importPackage(android.os);
var handler = new Handler(Looper.getMainLooper());
handler.post(function() { Toast.makeText(context, "Hello from JavaScript", Toast.LENGTH_LONG).show() });

可以看到app上弹出了一个toast。
这个是Stetho集成了开源项目Rhino，可以用js脚本动态执行java代码。
这个我能想到的使用场景就是在运行过程中直接查看内部数据，但是通过断点也能直接查看。

下面是rhino的简介

Rhino 是一种使用 Java 语言编写的 JavaScript 的开源实现，原先由Mozilla开发，现在被集成进入JDK 6.0。与其他很多语言一样，Rhino 是一种动态类型的、基于对象的脚本语言，它可以简单地访问各种 Java 类库。Rhino 从 JavaScript 中借用了很多语法，让程序员可以快速编写功能强大的程序。