详情查看官方文档https://weex-project.io/cn/references/advanced/integrate-devtool-to-android.html
集成 Devtools 到 Android
Weex Devtools 能够方便调试 Weex 页面,但此功能离不开 Native 的支持。如何让你的 App 也集成 Devtools,在本章将会详细说明 Android 端如何接入 Weex Devtools。
Android 应用接入
添加依赖——Gradle 依赖
dependencies {
...
/*接入weex inspector*/
compile 'com.taobao.android:weex_inspector:0.10.0.5'
compile 'com.squareup.okhttp:okhttp:2.3.0'
compile 'com.squareup.okhttp:okhttp-ws:2.3.0'
}
接入示例
通过在 XXXApplication 中设置开关打开调试模式
这种方式最直接,在代码中直接 hardcode 了开启调试模式,如果在 SDK 初始化之前调用甚至连 WXSDKEngine.reload() 都不需要调用,接入方如果需要更灵活的策略可以将 initDebugEnvironment(boolean enable, String host) 和 WXSDKEngine.reload() 组合在一起在合适的位置和时机调用即可。
public class WXApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
initDebugEnvironment(true ,false, "172.16.20.72");
x.Ext.init(this);
//x.Ext.setDebug(BuildConfig.DEBUG); // 是否输出debug日志, 开启debug会影响性能.
try{
InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this,config);
}catch (Exception ex){
Log.i("xx",ex.toString());
}
}
/**
*@param connectable debug server is connectable or not.
* if true, sdk will try to connect remote debug server when init WXBridge.
*
* @param debuggable enable remote debugger. valid only if host not to be "DEBUG_SERVER_HOST".
* true, you can launch a remote debugger and inspector both.
* false, you can just launch a inspector.
* @param host the debug server host, must not be "DEBUG_SERVER_HOST", a ip address or domain will be OK.
* for example "127.0.0.1".
*/
private void initDebugEnvironment(boolean connectable, boolean debuggable, String host) {
if (!"DEBUG_SERVER_HOST".equals(host)) {
WXEnvironment.sDebugServerConnectable = connectable;
WXEnvironment.sRemoteDebugMode = debuggable;
WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
}
}
}
注意:initDebugEnvironment(true ,false, “172.16.20.72”);使用
调用debug调试
首先先启动weex debug服务
Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。
C:\Users\aaron>weex debug
start debugger server at http://172.16.20.72:8088
The websocket address for native is ws://172.16.20.72:8088/debugProxy/native
Launching Dev Tools...
New version[0.2.77] of Weex debugger detected! Please update.(npm install -g weex-toolkit)
ok,已经启动。
调用debug
public class MainActivity extends BaseActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
/**
* WXSample 可以替换成自定义的字符串,针对埋点有效。
* template 是.we transform 后的 js文件。
* option 可以为空,或者通过option传入 js需要的参数。例如bundle js的地址等。
* jsonInitData 可以为空。
* width 为-1 默认全屏,可以自己定制。
* height =-1 默认全屏,可以自己定制。
*/
mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("build/mainTest.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
WXSDKEngine.reload();
}
}
注意:WXSDKEngine.reload();使用
当你的应用启动MainActivity.java这个页面时自然就调用到了WXSDKEngine.reload();方法。
然后在谷歌浏览器上打开debug server链接:
start debugger server at http://172.16.20.72:8088
http://172.16.20.72:8088
这里,就可以看到你要debug的应用了。
注意:第一次启动debug服务时,Android Studio不能处于 状态,否则设备连接不到debug服务,即你打开http://172.16.20.72:8088/,App List是没有显示任何设备的。先断开Android studio快速编译状态,启动debug服务,链接上设备,再启用Android studio快速编译状态,就应该可以啦。亲测有效…
浏览器需要集成chrome extension
devtool chrome extension提供了在debugger页面下查看页面dom结构以及对dom节点深度检查的功能
具体使用方法请参照weex devtool chrome extension
至此,你就可以尽情调试你的应用了。