Weex Devtools 能够方便调试 Weex 页面,但此功能离不开 Native 的支持。如何让你的 App 也集成 Devtools,在本章将会详细说明 Android 端如何接入 Weex Devtools。
weex sdk | weex inspector | Debugger Server |
---|---|---|
0.13+ | 0.12+ | 0.2.39+ |
0.8.0.1+ | 0.0.8.1+ | 0.2.39+ |
0.7.0+ | 0.0.7.13 | 0.2.38 |
0.6.0+ | 0.0.2.2 | - |
0.16.0+ | 0.12.1 | - |
0.17.0+ | 0.13.2 | - |
0.18.0+ | 0.13.4-multicontext | - |
0.19.0+ | 0.18.68 | - |
可以通过Gradle 或者 Maven添加对devtools aar的依赖, 也可以直接对源码依赖.
dependencies { compile 'com.taobao.android:weex_inspector:0.18.10' }
或者
<dependency> <groupId>com.taobao.android</groupId> <artifactId>weex_inspector</artifactId> <version>0.18.10</version> <type>pom</type> </dependency>
或者
需要复制inspector目录到你的app的同级目录, 然后在工程的 settings.gradle
文件下添加 include ":inspector"
, 此过程可以参考playground源码的工程配置及其配置, 然后在app的build.gralde
中添加依赖.
dependencies { compile project(':inspector') }
dependencies { compile 'com.squareup.okhttp:okhttp:2.3.0' compile 'com.squareup.okhttp:okhttp-ws:2.3.0' ... }
最简单方式就是复用Playground的相关代码,比如扫码和刷新等模块, 但是扫码不是必须的, 它只是与app通信的一种形式, 二维码里的包含DebugServer IP及bundle地址等信息,用于建立App和Debug Server之间的连接及动态加载bundle. 在Playground中给出了两种开启debug模式的范例.
public class MyApplication extends Application { public void onCreate() { super.onCreate(); initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/); //WXSDKEngine.reload(); } } private void initDebugEnvironment(boolean enable, String host) { WXEnvironment.sRemoteDebugMode = enable; WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native"; }
这种方式最直接, 在代码中直接hardcode了开启调试模式, 如果在SDK初始化之前调用甚至连WXSDKEngine.reload()
都不需要调用, 接入方如果需要更灵活的策略可以将initDebugEnvironment(boolean enable, String host)
和WXSDKEngine.reload()
组合在一起在合适的位置和时机调用即可.(如果不是初始化之前调用,n那么每次调用initDebugEnvironment后必须调用WXSDKEngine.reload()刷新Weex引擎)
拦截方式:
if (WXEnvironment.isApkDebugable()) { String devToolUrl = uri.getQueryParameter("_wx_devtool"); if (!TextUtils.isEmpty(devToolUrl)) { WXEnvironment.sRemoteDebugProxyUrl = devToolUrl; WXEnvironment.sDebugServerConnectable = true; WXSDKEngine.reload(XXXXX.getApplication(), false); } }
public class RefreshBroadcastReceiver extends BroadcastReceiver { @Override public void onReceive(Context context, Intent intent) { if (IWXDebugProxy.ACTION_DEBUG_INSTANCE_REFRESH.equals(intent.getAction())) { //Do something } } }
Devtools扩展了Chrome Debugging Protocol, 在客户端和调试服务器之间的采用JSON-RPC作为通信机制, 本质上调试过程是两个进程间协同, 相互交换控制权及运行结果的过程. 更多细节还请阅读Weex Devtools Debugger的技术选型实录这篇文章.
客户端 Devtools 客户端作为aar被集成App中, 它通过webscoket连接到调试服务器,此处并未做安全检查. 出于安全机制及包大小考虑, 强烈建议接入方只在debug版本中打包此aar.
服务器 Devtools 服务器端是信息交换的中枢, 既连接客户端, 又连接Chrome, 大多数情况下扮演一个消息转发服务器和Runtime Manager的角色.
Web端 Chrome的V8引擎扮演着bundle javascript runtime的角色. 开启debug模式后, 所有的bundle js 代码都在该引擎上运行. 另一方面我们也复用了Chrome前端的调试界面, 例如设置断点, 查看调用栈等, 调试页关闭则runtime将会被清理.
调试的大致过程请参考如下时序图.