Stetho，一个功能强大的 Android 应用调试桥

What is Stetho ?

Stetho 是一个功能强大的 Android 应用调试桥，起到桥梁的作用，连接 Android 应用和 Chrome，通过 Chrome 开发者工具调试 Android 应用，提供视图元素检查，网络监控，数据库动态交互，Dumpapp（可扩展的命令行交互接口），JavaScript Console 等功能。

当启用后，开发者可以通过 Chrome 桌面浏览器中的开发者工具访问本地应用。开发者也可以选择启用可选的 dumpapp 工具提供一个强大的应用内部命令行接口。

官网：http://facebook.github.io/stetho/

项目地址：https://github.com/facebook/stetho

一旦你完成了下面的设置说明，只要启动你电脑上的 Chrome 浏览器并输入chrome://inspect点击 "Inspect" 按钮即可开始调试。

注意：如果你点击 "Inspect" 出现的是一个空白页面，请尝试下面的解决方案：

可能是 Chrome 版本过低，尝试升级 Chrome。

先翻个墙再打开调试界面（第一次需要这样，后面不需要）。

配置说明

添加 stetho 主依赖

在 Gradle 中包含 stetho

// Gradle dependency on Stetho

dependencies {

compile 'com.facebook.stetho:stetho:1.4.1'

}

在 Maven 中包含 stetho

com.facebook.stetho

stetho

1.4.1

只有 stetho 主依赖是必须的，但你可能还希望有一个网络助手

dependencies {

compile 'com.facebook.stetho:stetho-okhttp3:1.4.1'

}

或者:

dependencies {

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

}

或者:

dependencies {

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

}

功能说明

Chrome DevTools

image

Stetho 为你的应用提供了 C/S 协议实现，所以你可以通过 Chrome 集成的前端开发工具访问你的应用。只要你的应用集成了 Stetho，只需导航到chrome://inspect并点击 "Inspect" 即可开始使用。

Network Inspection

image

使用 Chrome 开发者工具各种功能实现网络监控，包括图片预览，JSON 响应辅助工具，甚至把跟踪信息导出为 HAR 格式文件。

Database Inspection

image

SQLite 数据库可视化与交互，具备完全读写功能，

Web SQL 下的是应用的数据库，点击数据库可以输入 SQL 语句对其进行操作

Local Storage 就是对应 Android 下的 SharedPreferences，可修改 SharedPreferences 中的值

View Hierarchy

image

View Hierarchy 支持 API 15 或更高版本。使用 View Hierarchy 可以很方便的检查运行时界面的层次结构与数据，比如：

View Hierarchy 中包含界面所有元素的层次结构和属性

鼠标移动到 View Hierarchy 中某个 View，app 中对应的 View 会高亮显示

点击 View Hierarchy 左上角的搜索按钮，再点击 app 当前界面的控件，View Hierarchy 会显示该控件在层次中的位置

dumpapp

image

Dumpapp 为应用提供了一个可扩展的命令行交互接口，提供了一组默认的插件，但是 dumpapp 的真正强大之处在于能够轻松创建自己的插件！

dumpapp 就在工程的 scripts/dumpapp 下，遗憾的是目前在 Windows 下还用不了，因为它只提供了 Linux/Mac 下的执行脚本。

常用命令（插件）：

列出所有 Plugin ：./scripts/dumpapp -p com.facebook.stetho.sample -l

打印 SharedPreferences :./scripts/dumpapp prefs print

写 SharedPreferences :./scripts/dumpapp prefs write

dumpapp 默认提供的插件就在com.facebook.stetho.dumpapp.plugins.*，具体使用方法可以参考源码中的说明。

JavaScript Console

image

JavaScript Console 允许执行那些可以与应用或 Android SDK 交互的 JavaScript 代码。

Stetho 使用Rhino实现使用脚本方式调用 Java。

Rhino 是一个完全使用Java语言编写的开源JavaScript实现。Rhino通常用于在Java程序中，为最终用户提供脚本化能力。它被作为J2SE 6上的默认Java脚本化引擎。

Github：https://github.com/mozilla/rhino

官网：https://www.mozilla.org/rhino/

集成说明

1. 初始化

在你的 Application 初始化时候调用 Stetho 的初始化方法:

public class MyApplication extends Application {

public void onCreate() {

super.onCreate();

Stetho.initializeWithDefaults(this);

}

}

这将启用大多数默认配置，但不启用一些额外的钩子（启用网络监控需要注意）。 有关各个子系统的具体细节，请参见下文。

2. 启用网络监控

如果你使用的是 2.2.x+ 或 3.x 版本的 OkHttp 库，可以使用拦截器系统自动挂接到现有堆栈。 这是目前启用网络监控的最简单和最直接的方法。

For OkHttp 2.x

OkHttpClient client = new OkHttpClient();

client.networkInterceptors().add(new StethoInterceptor());

For OkHttp 3.x

new OkHttpClient.Builder()

.addNetworkInterceptor(new StethoInterceptor())

.build();

由于拦截器可以修改请求和响应，应该在其他拦截器之后添加 Stetho 拦截器以获取准确的网络交互视图。

如果你使用HttpURLConnection，可以使用StethoURLConnectionManager来帮助集成，但该方法有一些注意事项，比如你必须明确地添加Accept-Encoding：gzip到请求头，并手动处理压缩的响应，以便 Stetho 报告压缩的有效负载大小。具体可以参考stetho-sample中的Networker的实现。

Stetho 目前没有提供 HttpClient 网络监控支持，具体原因可以查看issues 116（HttpClient 在 Android5.0 已经被废弃，不建议再使用）。

OkHttp + Retrofit

一般开发中我们都会使用OkHttp + Retrofit，OkHttp用于 HTTP 网络交互，Retrofit用于将 HTTP API 转换为 Java 接口。

默认情况下，Retrofit会自己创建一个OkHttpClient，我们也可以在创建Retrofit的时候通过client(OkHttpClient client)方法提供一个OkHttpClient。

sRetrofit = new Retrofit.Builder()

.baseUrl(baseUrl)

.client(sClient)

.build();

通过client(OkHttpClient client)方法设置共用一个OkHttpClient，监控Retrofit中的网络交互。

更多细节见stetho-sample项目。

3. 自定义 dumpapp 插件

自定义插件主要是实现 DumperPlugin 接口中的String getName()和void dump(DumperContext dumpContext)方法。getName()方法返回插件的名称，dump(DumperContext dumpContext)是命令行中调用该插件时的回调方法。其中，dumpContext.getStdout()获取命令行输出，dumpContext.getArgsAsList()获取命令行调用的参数列表。

public class MyDumperPlugin implements DumperPlugin {

private static final String XML_SUFFIX = ".xml";

private static final String NAME = "prefs";

private final Context mAppContext;

public MyDumperPlugin(Context context) {

mAppContext = context.getApplicationContext();

}

@Override

public String getName() {

return NAME;

}

@Override

public void dump(DumperContext dumpContext) throws DumpUsageException {

PrintStream writer = dumpContext.getStdout();

List args = dumpContext.getArgsAsList();

String commandName = args.isEmpty() ? "" : args.remove(0);

if (commandName.equals("print")) {

doPrint(writer, args);

} else if (commandName.equals("write")) {

doWrite(args);

} else {

doUsage(writer);

}

}

// 省略部分代码

}

然后把初始化调用替换如下:

Stetho.initialize(Stetho.newInitializerBuilder(context)

.enableDumpapp(new DumperPluginsProvider() {

@Override

public Iterable get() {

return new Stetho.DefaultDumperPluginsBuilder(context)

.provide(new MyDumperPlugin())

.finish();

}

})

.enableWebKitInspector(Stetho.defaultInspectorModulesProvider(context))

.build());

更多细节见stetho-sample项目。

4. 启用JavaScript Console

启用 JavaScript Console 只需在 build.gradle 中添加如下依赖即可:

compile "com.facebook.stetho:stetho-js-rhino:1.4.1"

启动 app，在 Chrome 开发者工具的 Console 输入下面代码使 app 打印一个Toast:

importPackage(android.widget);

importPackage(android.os);

var handler = new Handler(Looper.getMainLooper());

handler.post(function() { Toast.makeText(context, "hello", Toast.LENGTH_LONG).show() });

Paste_Image.png

importPackage(android.widget)等于 java 中import android.widget.*;，JavaScript 中使用 var 定义变量，这段代码就是创建了一个 handler 并调用 post 方法在 ui 线程弹一个 Toast。

关于 Rhino 相关语法可以参考下面的文档

Scripting Java

Performance Hints

在Toast.makeText中的 context 是从哪里来的呢?

context 是在com.facebook.stetho.rhino.JsRuntimeReplFactoryBuilder的initJsScope方法中被绑定到JSContext的，下面是 initJsScope 方法的源码:

private @NonNull ScriptableObject initJsScope(@NonNull Context jsContext) {

// Set the main Rhino goodies

ImporterTopLevel importerTopLevel = new ImporterTopLevel(jsContext);

ScriptableObject scope = jsContext.initStandardObjects(importerTopLevel, false);

ScriptableObject.putProperty(scope, "context", Context.javaToJS(mContext, scope));

try {

importClasses(jsContext, scope);

importPackages(jsContext, scope);

importConsole(scope);

importVariables(scope);

importFunctions(scope);

} catch (StethoJsException e) {

String message = String.format("%s\n%s", e.getMessage(), Log.getStackTraceString(e));

LogUtil.e(e, message);

CLog.writeToConsole(Console.MessageLevel.ERROR, Console.MessageSource.JAVASCRIPT, message);

}

return scope;

}

JsRuntimeReplFactoryBuilder提供了一些方法可以传递自己的变量，类，包和函数到 JavaScript 环境。

添加变量，类，包和函数到 JavaScript 运行时

修改初始化代码如下:

Stetho.initialize(Stetho.newInitializerBuilder(context)

.enableWebKitInspector(new ExtInspectorModulesProvider(context))

.build());

private static class ExtInspectorModulesProvider implements InspectorModulesProvider {

private Context mContext;

private final Handler handler = new Handler(Looper.getMainLooper());

ExtInspectorModulesProvider(Context context) {

mContext = context;

}

@Override

public Iterable get() {

return new Stetho.DefaultInspectorModulesBuilder(mContext)

.runtimeRepl(new JsRuntimeReplFactoryBuilder(mContext)

// 添加变量

.addVariable("test", new AtomicBoolean(true))

// 添加类

.importClass(R.class)

// 添加包

.importPackage(MyApplication.class.getPackage().getName())

// 添加方法到 javascript: void toast(String)

.addFunction("toast", new BaseFunction() {

@Override

public Object call(org.mozilla.javascript.Context cx, Scriptable scope, Scriptable thisObj, Object[] args) {

// javascript 传递的参数在 varags

final String message = args[0].toString();

handler.post(new Runnable() {

@Override

public void run() {

Toast.makeText(mContext, message, Toast.LENGTH_LONG).show();

}

});

// 在 javascript 返回 undefined

return org.mozilla.javascript.Context.getUndefinedValue();

}

})

.build())

.finish();

}

}

说明：Java原语类型将被自动装箱，只有对象可以传递到 JavaScript 运行时。

绑定完成后就可以在 JavaScript Console 中使用自己的变量，类，包和函数了。

Paste_Image.png

注意：Rhino 对包名的检查是严格的，必须是com.**，org.**，net.**之类比较正规的格式。假如：包名使用linchaolong.stetho.demo，在importClasses(linchaolong.stetho.demo.R)时，ScriptRuntime会报EcmaError

Failed to import class: linchaolong.stetho.demo.R

com.facebook.stetho.rhino.JsRuntimeReplFactoryBuilder$StethoJsException: Failed to import class: linchaolong.stetho.demo.R

at com.facebook.stetho.rhino.JsRuntimeReplFactoryBuilder.importClasses(JsRuntimeReplFactoryBuilder.java:195)

at com.facebook.stetho.rhino.JsRuntimeReplFactoryBuilder.initJsScope(JsRuntimeReplFactoryBuilder.java:173)

at com.facebook.stetho.rhino.JsRuntimeReplFactoryBuilder.initJsScope(JsRuntimeReplFactoryBuilder.java:158)

at com.facebook.stetho.rhino.JsRuntimeReplFactoryBuilder.access$000(JsRuntimeReplFactoryBuilder.java:45)

at com.facebook.stetho.rhino.JsRuntimeReplFactoryBuilder$1.newInstance(JsRuntimeReplFactoryBuilder.java:146)

at com.facebook.stetho.inspector.protocol.module.Runtime$Session.getRepl(Runtime.java:271)

at com.facebook.stetho.inspector.protocol.module.Runtime$Session.evaluate(Runtime.java:260)

at com.facebook.stetho.inspector.protocol.module.Runtime.evaluate(Runtime.java:158)

at java.lang.reflect.Method.invoke(Native Method)

at java.lang.reflect.Method.invoke(Method.java:372)

at com.facebook.stetho.inspector.MethodDispatcher$MethodDispatchHelper.invoke(MethodDispatcher.java:96)

at com.facebook.stetho.inspector.MethodDispatcher.dispatch(MethodDispatcher.java:67)

at com.facebook.stetho.inspector.ChromeDevtoolsServer.handleRemoteRequest(ChromeDevtoolsServer.java:129)

at com.facebook.stetho.inspector.ChromeDevtoolsServer.handleRemoteMessage(ChromeDevtoolsServer.java:111)

at com.facebook.stetho.inspector.ChromeDevtoolsServer.onMessage(ChromeDevtoolsServer.java:87)

at com.facebook.stetho.websocket.WebSocketSession$1.handleTextFrame(WebSocketSession.java:176)

at com.facebook.stetho.websocket.WebSocketSession$1.onCompleteFrame(WebSocketSession.java:136)

at com.facebook.stetho.websocket.ReadHandler.readLoop(ReadHandler.java:44)

at com.facebook.stetho.websocket.WebSocketSession.handle(WebSocketSession.java:45)

at com.facebook.stetho.websocket.WebSocketHandler.doUpgrade(WebSocketHandler.java:117)

at com.facebook.stetho.websocket.WebSocketHandler.handleRequest(WebSocketHandler.java:83)

at com.facebook.stetho.server.http.LightHttpServer.dispatchToHandler(LightHttpServer.java:84)

at com.facebook.stetho.server.http.LightHttpServer.serve(LightHttpServer.java:61)

at com.facebook.stetho.inspector.DevtoolsSocketHandler.onAccepted(DevtoolsSocketHandler.java:52)

at com.facebook.stetho.server.ProtocolDetectingSocketHandler.onSecured(ProtocolDetectingSocketHandler.java:63)

at com.facebook.stetho.server.SecureSocketHandler.onAccepted(SecureSocketHandler.java:33)

at com.facebook.stetho.server.LazySocketHandler.onAccepted(LazySocketHandler.java:36)

at com.facebook.stetho.server.LocalSocketServer$WorkerThread.run(LocalSocketServer.java:167)

Caused by: org.mozilla.javascript.EcmaError: ReferenceError: "linchaolong" is not defined. (chrome#1)

at org.mozilla.javascript.ScriptRuntime.constructError(ScriptRuntime.java:3949)

at org.mozilla.javascript.ScriptRuntime.constructError(ScriptRuntime.java:3927)

at org.mozilla.javascript.ScriptRuntime.notFoundError(ScriptRuntime.java:4012)

at org.mozilla.javascript.ScriptRuntime.name(ScriptRuntime.java:1849)

at org.mozilla.javascript.Interpreter.interpretLoop(Interpreter.java:1558)

at org.mozilla.javascript.Interpreter.interpret(Interpreter.java:815)

at org.mozilla.javascript.InterpretedFunction.call(InterpretedFunction.java:109)

at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:393)

at org.mozilla.javascript.ScriptRuntime.doTopCall(ScriptRuntime.java:3280)

at org.mozilla.javascript.InterpretedFunction.exec(InterpretedFunction.java:120)

at org.mozilla.javascript.Context.evaluateString(Context.java:1191)

at com.facebook.stetho.rhino.JsRuntimeReplFactoryBuilder.importClasses(JsRuntimeReplFactoryBuilder.java:193)

... 27 more

更多细节请参考stetho-js-rhino项目中的README.md

只在debug模式下使用 Stetho

修改 dependencies 配置，只在 debug 模式下编译stetho和stetho-js-rhino

dependencies {

// Debug

debugCompile "com.facebook.stetho:stetho:${stetho}"

compile "com.facebook.stetho:stetho-okhttp3:${stetho}"

debugCompile "com.facebook.stetho:stetho-js-rhino:${stetho}"

}

说明：${stetho}是 stetho 的版本号。

在src/debug/java目录下新建一个DebugApplication继承自MyApplication，并把初始化 Stetho 的代码移到DebugApplication

public class DebugApplication extends MyApplication{

@Override public void onCreate() {

super.onCreate();

Stetho.initializeWithDefaults(this);

}

在src/debug目录下创建一个AndroidManifest.xml，并添加 debug 模式下需要的权限和修改 application 节点android:name值为 DebugApplication（使用tools:replace覆盖android:name字段）


xmlns:tools="http://schemas.android.com/tools"

package="com.facebook.stetho.sample">

tools:replace="android:name"

android:name=".DebugApplication" />

Paste_Image.png

完成上面处理后，Stetho 只在 debug 版本下起作用，不影响 release 版本。

作者：linchaolong

链接：http://www.jianshu.com/p/38d8324b126a

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,311评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,339评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,671评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,252评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,253评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,031评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,340评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,973评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,466评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,701评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,254评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2赞 345

推荐阅读更多精彩内容