facebook的Android调试工具Stetho介绍

来源:互联网 发布:小米电视有线连接网络 编辑:程序博客网 时间:2024/05/16 10:59

http://www.androidcn.org/topic/552fabaa8ca8a1e07687e999#0-tsina-1-39947-397232819ff9a47a7b7e80a40613cfe1

Stetho是Facebook出品的一个强大的Android调试工具,使用该工具你可以在Chrome Developer Tools查看App的布局,网络请求,sqlite,preference,一切都是可视化的操作,无须自己在去使用adb,也不需要root你的设备。使用的方式很简单,配置好之后,在Chrome地址栏输入chrome://inspect (哈哈,和webview 远程调试的方式一样)。废话少说,先来看看效果图。

inspector-discovery.png

inspector-sqlite.png

inspector-elements.png

inspector-network.png

怎么样,是不是看起来很碉堡,尤其是如果你做过web开发,肯定感觉超级熟悉哈。下面我们就来看看怎么使用这么碉堡的工具。

配置

添加gradle引用

<code style="padding: 0px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: inherit; border: 0px; background-color: transparent;"><span class="pln" style="color: rgb(0, 0, 0);">compile </span><span class="str" style="color: rgb(0, 136, 0);">'com.facebook.stetho:stetho:1.1.0'</span></code>

只有stetho库是必须的,想查看网络请求的话,需要使用下面的两个库之一(看你的网络库用的是okhttp还是urlconnection)

<code style="padding: 0px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: inherit; border: 0px; background-color: transparent;"><span class="pln" style="color: rgb(0, 0, 0);">compile </span><span class="str" style="color: rgb(0, 136, 0);">'com.facebook.stetho:stetho-okhttp:1.1.0'</span></code>

或者

<code style="padding: 0px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: inherit; border: 0px; background-color: transparent;"><span class="pln" style="color: rgb(0, 0, 0);">compile </span><span class="str" style="color: rgb(0, 136, 0);">'com.facebook.stetho:stetho-urlconnection:1.1.0'</span></code>

修改代码

<code style="padding: 0px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: inherit; border: 0px; background-color: transparent;"><span class="kwd" style="color: rgb(0, 0, 136);">public</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">class</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">MyApplication</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">extends</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">Application</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="kwd" style="color: rgb(0, 0, 136);">public</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">void</span><span class="pln" style="color: rgb(0, 0, 0);"> onCreate</span><span class="pun" style="color: rgb(102, 102, 0);">()</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);">    </span><span class="kwd" style="color: rgb(0, 0, 136);">super</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">onCreate</span><span class="pun" style="color: rgb(102, 102, 0);">();</span><span class="pln" style="color: rgb(0, 0, 0);">    </span><span class="typ" style="color: rgb(102, 0, 102);">Stetho</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">initialize</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">        </span><span class="typ" style="color: rgb(102, 0, 102);">Stetho</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">newInitializerBuilder</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">this</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);">            </span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">enableDumpapp</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">Stetho</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">defaultDumperPluginsProvider</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">this</span><span class="pun" style="color: rgb(102, 102, 0);">))</span><span class="pln" style="color: rgb(0, 0, 0);">            </span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">enableWebKitInspector</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">Stetho</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">defaultInspectorModulesProvider</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">this</span><span class="pun" style="color: rgb(102, 102, 0);">))</span><span class="pln" style="color: rgb(0, 0, 0);">            </span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">build</span><span class="pun" style="color: rgb(102, 102, 0);">());</span><span class="pln" style="color: rgb(0, 0, 0);">  </span><span class="pun" style="color: rgb(102, 102, 0);">}</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="pun" style="color: rgb(102, 102, 0);">}</span></code>

开启网络请求查看

若果你使用了okhttp库,参考下面的代码:

<code style="padding: 0px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: inherit; border: 0px; background-color: transparent;"><span class="typ" style="color: rgb(102, 0, 102);">OkHttpClient</span><span class="pln" style="color: rgb(0, 0, 0);"> client </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">new</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">OkHttpClient</span><span class="pun" style="color: rgb(102, 102, 0);">();</span><span class="pln" style="color: rgb(0, 0, 0);">client</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">networkInterceptors</span><span class="pun" style="color: rgb(102, 102, 0);">().</span><span class="pln" style="color: rgb(0, 0, 0);">add</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">new</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">StethoInterceptor</span><span class="pun" style="color: rgb(102, 102, 0);">());</span></code>

如果你使用了HttpURLConnection,你需要使用StethoURLConnectionManager来帮忙。

更多细节请参考stetho源码中的stetho-sample。


0 0