stetho使用介绍

作者: seewhy | 来源:发表于2015-10-14 16:09 被阅读7722次

    原文首发于我的个人博客,欢迎访问(_),转载请注明出处。

    介绍

    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 中借用了很多语法,让程序员可以快速编写功能强大的程序。

    相关文章

      网友评论

      • 五谷观精分道长:如果点击inspect 是空白页面 请挂VPN 因为需要下载工具支持
        当然第一次下载完成,之后就不需要了
      • 杨晓是大V:多谢楼主,写得很好,容易理解
      • 三棵猴面包树:不知道爲啥走到這一步“在chrome的地址栏输入chrome://inspect, 可以看到当前连接的设备,然后点击inspect按钮。” 點開什麼都沒有。就是一個空白的標籤頁,真機和模擬器都試了。:sweat:
        kyriej2:@三棵猴面包树 可能需要科学上网,x墙
      • 有点健忘:为啥我的只能看到headers,而perview里看不到返回结果,我log能看到正确返回了。有知道的吗
      • D13954:查看数据库的时候,只能显示前250条数据,能查看更多的数据吗?怎么操作的,可以说下吗,谢谢啦
      • 996ba0048057:多个请求,如果不分别点开查看返回数据,等所有请求完毕之后,查看的时候每个response都是一样的(都是最后一个请求返回的数据),如果在后一个请求开始前点开前面的请求查看,则response数据是正确的,博主有遇到没
        seewhy:@cannocan 没有遇到过,查看网络请求我一般都是charles抓包看的~

      本文标题:stetho使用介绍

      本文链接:https://www.haomeiwen.com/subject/zlnwcttx.html