前端weex-debug页面过程，需要结合移动端（Android 或者 IOS ）端改造，通过websocket 方式，本地node服务和手机端sdk进行通讯。
weex sdk 渲染页面流程
hook weex bridge
看下面的源码分分析是先看下这个图：
image.png
在未开启debug 模式的时候，js运行时是在移动端这里，当开启debug模式后，会将framework的初始化，模块的注册均发送给node端，在Chrome DevTools 中初始化。两方通过socket 通讯，协议是基于chrome inspect 。
private void initWXBridge(boolean remoteDebug) {
if (WXEnvironment.isApkDebugable()) {
if (remoteDebug) {
WXEnvironment.sDebugServerConnectable = true;
}
if (mWxDebugProxy != null) {
mWxDebugProxy.stop(false);
}
if (WXEnvironment.sDebugServerConnectable) {
try {
HackedClass<Object> debugProxyClass = WXHack.into("com.taobao.weex.devtools.debug.DebugServerProxy");
mWxDebugProxy = (IWXDebugProxy) debugProxyClass.constructor(Context.class, WXBridgeManager.class)
.getInstance(WXEnvironment.getApplication(), WXBridgeManager.this);
if (mWxDebugProxy != null) {
mWxDebugProxy.start();
}
} catch (HackAssertionException e) {
WXLogUtils.e("initWXBridge HackAssertionException ", e);
}
}
}
if (remoteDebug && mWxDebugProxy != null) {
mWXBridge = mWxDebugProxy.getWXBridge();
} else {
mWXBridge = new WXBridge();
}
}
在 Chrome Devtool 中开启 JS Debug
image.png
在chrome 中 打开 JS Debug，会通过node 端的websocket 调用到 sdk 端DebugServerProxy 的 handleRemoteMessage，继而调用到handleRemoteRequest，通过日志可以发现调用了如下模块
09-01 15:47:07.211 5460-23084/com.alibaba.weex E/shang: {"method":"WxDebug.enable"}
09-01 15:47:07.218 5460-23084/com.alibaba.weex E/shang: {"id":60,"method":"Page.screencastFrameAck","params":{"sessionId":1}}
09-01 15:47:08.094 5460-23190/com.alibaba.weex E/shang: {"id":1,"method":"Network.enable","params":{"maxPostDataSize":65536}}
09-01 15:47:08.118 5460-23190/com.alibaba.weex E/shang: {"id":3,"method":"Page.getResourceTree"}
09-01 15:47:08.126 5460-23190/com.alibaba.weex E/shang: {"id":4,"method":"Profiler.enable"}
09-01 15:47:08.127 5460-23190/com.alibaba.weex E/shang: {"id":5,"method":"Console.enable"}
09-01 15:47:08.127 5460-23190/com.alibaba.weex E/shang: {"id":5,"method":"Console.enable"}
09-01 15:47:08.130 5460-23190/com.alibaba.weex E/shang: {"id":9,"method":"DOM.enable"}
09-01 15:47:08.138 5460-23190/com.alibaba.weex E/shang: {"id":10,"method":"CSS.enable"}
09-01 15:47:08.139 5460-23190/com.alibaba.weex E/shang: {"id":11,"method":"Overlay.enable"}
09-01 15:47:08.140 5460-23190/com.alibaba.weex E/shang: {"id":12,"method":"Overlay.setShowViewportSizeOnResize","params":{"show":true}}
09-01 15:47:08.141 5460-23190/com.alibaba.weex E/shang: {"id":13,"method":"Log.enable"}
09-01 15:47:08.142 5460-23190/com.alibaba.weex E/shang: {"id":14,"method":"Log.startViolationsReport","params":{"config":[{"name":"longTask","threshold":200},{"name":"longLayout","threshold":30},{"name":"blockedEvent","threshold":100},{"name":"blockedParser","threshold":-1},{"name":"handler","threshold":150},{"name":"recurringHandler","threshold":50},{"name":"discouragedAPIUse","threshold":-1}]}}
09-01 15:47:08.143 5460-23190/com.alibaba.weex E/shang: {"id":16,"method":"Inspector.enable"}
09-01 15:47:08.144 5460-23190/com.alibaba.weex E/shang: {"id":21,"method":"Page.getNavigationHistory","params":{}}
09-01 15:47:08.145 5460-23190/com.alibaba.weex E/shang: {"id":22,"method":"Page.startScreencast","params":{"format":"jpeg","quality":80,"maxWidth":2048,"maxHeight":1154}}
09-01 15:47:08.147 5460-23190/com.alibaba.weex E/shang: {"id":23,"method":"Emulation.setTouchEmulationEnabled","params":{"enabled":true,"maxTouchPoints":1}}
09-01 15:47:08.148 5460-23190/com.alibaba.weex E/shang: {"id":24,"method":"Emulation.setEmitTouchEventsForMouse","params":{"enabled":true,"configuration":"mobile"}}
09-01 15:47:08.149 5460-23190/com.alibaba.weex E/shang: {"id":25,"method":"Page.stopScreencast"}
09-01 15:47:08.149 5460-23190/com.alibaba.weex E/shang: {"id":26,"method":"Emulation.setTouchEmulationEnabled","params":{"enabled":false,"maxTouchPoints":1}}
09-01 15:47:08.150 5460-23190/com.alibaba.weex E/shang: {"id":27,"method":"Emulation.setEmitTouchEventsForMouse","params":{"enabled":false,"configuration":"desktop"}}
09-01 15:47:08.151 5460-23190/com.alibaba.weex E/shang: {"id":29,"method":"Page.setAdBlockingEnabled","params":{"enabled":false}}
09-01 15:47:08.274 5460-23190/com.alibaba.weex E/shang: {"id":30,"method":"Page.startScreencast","params":{"format":"jpeg","quality":80,"maxWidth":1786,"maxHeight":1154}}
09-01 15:47:08.284 5460-23190/com.alibaba.weex E/shang: {"id":31,"method":"Emulation.setTouchEmulationEnabled","params":{"enabled":true,"maxTouchPoints":1}}
09-01 15:47:08.285 5460-23190/com.alibaba.weex E/shang: {"id":32,"method":"Emulation.setEmitTouchEventsForMouse","params":{"enabled":true,"configuration":"mobile"}}
09-01 15:47:08.286 5460-23190/com.alibaba.weex E/shang: {"id":33,"method":"Page.getNavigationHistory","params":{}}
09-01 15:47:08.379 5460-23190/com.alibaba.weex E/shang: {"id":34,"method":"DOM.getDocument"}
09-01 15:47:08.411 5460-23190/com.alibaba.weex E/shang: {"id":35,"method":"Page.stopScreencast"}
09-01 15:47:08.412 5460-23190/com.alibaba.weex E/shang: {"id":36,"method":"Emulation.setTouchEmulationEnabled","params":{"enabled":false,"maxTouchPoints":1}}
09-01 15:47:08.412 5460-23190/com.alibaba.weex E/shang: {"id":37,"method":"Emulation.setEmitTouchEventsForMouse","params":{"enabled":false,"configuration":"desktop"}}
09-01 15:47:08.435 5460-23190/com.alibaba.weex E/shang: {"id":38,"method":"Overlay.hideHighlight"}
09-01 15:47:08.495 5460-23190/com.alibaba.weex E/shang: {"id":39,"method":"Page.startScreencast","params":{"format":"jpeg","quality":80,"maxWidth":1786,"maxHeight":1154}}
09-01 15:47:08.497 5460-23190/com.alibaba.weex E/shang: {"id":40,"method":"Emulation.setTouchEmulationEnabled","params":{"enabled":true,"maxTouchPoints":1}}
09-01 15:47:08.499 5460-23190/com.alibaba.weex E/shang: {"id":41,"method":"Emulation.setEmitTouchEventsForMouse","params":{"enabled":true,"configuration":"mobile"}}
09-01 15:47:08.790 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callNative","params":{"instance":"14","tasks":[{"module":"dom","method":"createBody","args":[{"ref":"_root","type":"div","attr":{},"style":{}}]}],"callback":"-1"}}
09-01 15:47:08.794 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"14","ref":"_root","dom":{"ref":"3","type":"text","attr":{"value":"Hello World."},"style":{"fontSize":100}},"index":-1}}
09-01 15:47:08.798 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callNative","params":{"instance":"14","tasks":[{"module":"dom","method":"createFinish","args":[]}],"callback":"-1"}}
09-01 15:47:08.804 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callNative","params":{"instance":"13","tasks":[{"module":"dom","method":"createBody","args":[{"ref":"_root","type":"list","attr":{},"style":{}}]}],"callback":"-1"}}
09-01 15:47:08.812 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"5","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"6","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"9","type":"text","attr":{"value":"Hello World"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":0}}
09-01 15:47:08.818 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"10","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"11","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"14","type":"text","attr":{"value":"More Syntax"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":1}}
09-01 15:47:08.828 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"15","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"16","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"19","type":"text","attr":{"value":"Common Style"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":2}}
09-01 15:47:08.837 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"20","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"21","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"24","type":"text","attr":{"value":"Animation"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":3}}
09-01 15:47:08.846 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"25","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"26","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"29","type":"text","attr":{"value":"Text"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":4}}
09-01 15:47:08.853 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"30","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"31","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"34","type":"text","attr":{"value":"Image"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":5}}
09-01 15:47:08.861 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"35","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"36","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"39","type":"text","attr":{"value":"Input"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":6}}
09-01 15:47:08.869 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"40","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"41","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"44","type":"text","attr":{"value":"Scroller"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":7}}
09-01 15:47:08.873 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"45","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"46","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"49","type":"text","attr":{"value":"List (Basic)"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":8}}
09-01 15:47:08.878 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"50","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"51","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"54","type":"text","attr":{"value":"List (Advanced)"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":9}}
09-01 15:47:08.885 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"55","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"56","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"59","type":"text","attr":{"value":"Slider"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":10}}
09-01 15:47:08.893 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"60","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"61","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"64","type":"text","attr":{"value":"A"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":11}}
09-01 15:47:08.899 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"65","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"66","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"69","type":"text","attr":{"value":"Video"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":12}}
09-01 15:47:08.906 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"70","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"71","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"74","type":"text","attr":{"value":"Countdown"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":13}}
09-01 15:47:08.912 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"75","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"76","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"79","type":"text","attr":{"value":"Marquee"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":14}}
09-01 15:47:08.921 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"80","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"81","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"84","type":"text","attr":{"value":"Web"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":15}}
09-01 15:47:08.927 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"85","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"86","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"89","type":"text","attr":{"value":"Navigator"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":16}}
09-01 15:47:08.932 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"90","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"91","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"94","type":"text","attr":{"value":"Tabbar"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":17}}
09-01 15:47:08.937 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"95","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"96","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"99","type":"text","attr":{"value":"Instance API"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":18}}
09-01 15:47:08.945 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"100","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"101","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"104","type":"text","attr":{"value":"Modal"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":19}}
09-01 15:47:08.950 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"105","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"106","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"109","type":"text","attr":{"value":"Stream"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":20}}
09-01 15:47:08.955 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"110","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"111","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"114","type":"text","attr":{"value":"Storage"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":21}}
09-01 15:47:08.960 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"115","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"116","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"119","type":"text","attr":{"value":"Clipboard"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":22}}
09-01 15:47:08.965 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"120","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"121","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"124","type":"text","attr":{"value":"Activity"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":23}}
09-01 15:47:08.972 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"125","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"126","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"129","type":"text","attr":{"value":"Calculator"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":24}}
09-01 15:47:08.978 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"130","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"131","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"134","type":"text","attr":{"value":"Minesweeper"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":25}}
09-01 15:47:08.985 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"135","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"136","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"139","type":"text","attr":{"value":"UI Gallery"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":26}}
09-01 15:47:08.991 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callAddElement","params":{"instance":"13","ref":"_root","dom":{"ref":"140","type":"cell","attr":{"append":"tree"},"style":{},"children":[{"ref":"141","type":"div","attr":{},"style":{"paddingTop":25,"paddingBottom":25,"paddingLeft":35,"paddingRight":35,"height":160,"justifyContent":"center","borderBottomWidth":1,"borderColor":"#dddddd","backgroundColor":"#ffffff"},"event":["click","touchend","touchstart"],"children":[{"ref":"144","type":"text","attr":{"value":"Dropdown"},"style":{"fontSize":48,"color":"#555555"}}]}]},"index":27}}
09-01 15:47:08.998 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callNative","params":{"instance":"13","tasks":[{"module":"dom","method":"createFinish","args":[]}],"callback":"-1"}}
09-01 15:47:09.003 5460-23190/com.alibaba.weex E/shang: {"id":64,"method":"Page.screencastFrameAck","params":{"sessionId":1}}
09-01 15:47:09.004 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callNative","params":{"instance":"14","tasks":[{"module":"dom","method":"updateFinish","args":[]}],"callback":"-1"}}
09-01 15:47:09.198 5460-23190/com.alibaba.weex E/shang: {"id":65,"method":"Page.screencastFrameAck","params":{"sessionId":1}}
从上面的日志能看到初始化了几个模块
- WxDebug
- Network
- Profiler
- Console
- DOM
- CSS
- Overlay
- Log
- Inspector
而这几个模块的初始化是在WeexInspector中完成
public Iterable<ChromeDevtoolsDomain> finish() {
provideIfDesired(new Console());
provideIfDesired(new Debugger());
provideIfDesired(new WxDebug());
DocumentProviderFactory documentModel = resolveDocumentProvider();
if (documentModel != null) {
Document document = new Document(documentModel);
provideIfDesired(new DOM(document));
provideIfDesired(new CSS(document));
}
provideIfDesired(new Input());
provideIfDesired(new DOMStorage(mContext));
provideIfDesired(new HeapProfiler());
provideIfDesired(new Inspector());
provideIfDesired(new Network(mContext));
provideIfDesired(new Page(mContext));
provideIfDesired(new Profiler());
provideIfDesired(
new Runtime(
mRuntimeRepl != null ?
mRuntimeRepl :
new RhinoDetectingRuntimeReplFactory(mContext)));
provideIfDesired(new Worker());
if (Build.VERSION.SDK_INT >= DatabaseConstants.MIN_API_LEVEL) {
Database database = new Database();
database.add(new SqliteDatabaseDriver(mContext,
mDatabaseFilesProvider != null ?
mDatabaseFilesProvider :
new DefaultDatabaseFilesProvider(mContext)));
if (mDatabaseDrivers != null) {
for (Database.DatabaseDriver databaseDriver : mDatabaseDrivers) {
database.add(databaseDriver);
}
}
provideIfDesired(database);
}
return mDelegate.finish();
}
然后finish方法在DebugServerProxy 中调用，最后生成其成员变量mMethodDispatcher。
MethodDispatcher 的作用是在node端发送请求时处理过来的request，分发给上面对应的模块处理，然后返回结果，包装后发送到node端（当请求中带id时，是需要有返回值的）。
接下来分析：
09-01 15:53:21.292 5460-23190/com.alibaba.weex E/shang: {"method":"WxDebug.callNative","params":{"instance":"13","tasks":[{"module":"dom","method":"updateFinish","args":[]}],"callback":"-1"}}
通过这个方法的调用，可以知道node端调用了WxDebug的callNative方法。
具体实现如下：
@ChromeDevtoolsMethod
public void callNative(JsonRpcPeer peer, JSONObject params) {
if (params != null) {
DebugBridge.getInstance().callNative(
params.optString("instance"),
params.optString("tasks"),
params.optString("callback"));
}
// another way to handle call native
// CallNative callNative = mObjectMapper.convertValue(params, CallNative.class);
// if (callNative != null) {
// try {
// String tasks = mObjectMapper.convertListToJsonArray(callNative.tasks).toString();
// Log.v(TAG, "WxDebug.callNative tasks " + tasks);
// DebugBridge.getInstance().callNative(callNative.instance,
// tasks,
// callNative.callback);
// } catch (InvocationTargetException e) {
// e.printStackTrace();
// } catch (IllegalAccessException e) {
// e.printStackTrace();
// }
// }
}
DebugBridg作用是什么呢？桥接到WXBridgeManager 中的mWXBridge。
在我们扫码连接到weex devtools 时，WXSDKEngine 会重新reload ,后会调用
private void initWXBridge(boolean remoteDebug) {
if (WXEnvironment.isApkDebugable()) {
if (remoteDebug) {
WXEnvironment.sDebugServerConnectable = true;
}
if (mWxDebugProxy != null) {
mWxDebugProxy.stop(false);
}
if (WXEnvironment.sDebugServerConnectable) {
try {
HackedClass<Object> debugProxyClass = WXHack.into("com.taobao.weex.devtools.debug.DebugServerProxy");
mWxDebugProxy = (IWXDebugProxy) debugProxyClass.constructor(Context.class, WXBridgeManager.class)
.getInstance(WXEnvironment.getApplication(), WXBridgeManager.this);
if (mWxDebugProxy != null) {
mWxDebugProxy.start();
}
} catch (HackAssertionException e) {
WXLogUtils.e("initWXBridge HackAssertionException ", e);
}
}
}
if (remoteDebug && mWxDebugProxy != null) {
mWXBridge = mWxDebugProxy.getWXBridge();
} else {
mWXBridge = new WXBridge();
}
}
通过反射生成DebugServerProxy 实例，就和前文最开始讲到的连在了一起。
会用WxDebugProxy.getWXBridge 替换其中的新建实例。
if (remoteDebug && mWxDebugProxy != null) {
mWXBridge = mWxDebugProxy.getWXBridge();
} else {
mWXBridge = new WXBridge();
}
在WxDebug 中，在start方法中初始化WXBridge实例
mBridge = DebugBridge.getInstance();
mBridge.setSession(mWebSocketClient);
mBridge.setBridgeManager(mJsManager);
mBridge 会持有 WXBridgeManager 实例。
WxDebug的callNative 就会调用到 WXBridgeManager的 callNative 方法。
从其中还可以看到mBridge 获取了WebSocketClient 实例：
- 用来将JSFrameWork信息发送给node端，用来初始化Chrome DevTools 环境。
- 执行 execJs方法时，发送信息到noded端
public int execJS(String instanceId, String namespace, String function, WXJSObject[] args) {
ArrayList<Object> array = new ArrayList<>();
int argsCount = args == null ? 0 : args.length;
for (int i = 0; i < argsCount; i++) {
if (args[i].type != WXJSObject.String) {
array.add(JSON.parse(args[i].data.toString()));
} else {
array.add(args[i].data);
}
}
Map<String, Object> func = new HashMap<>();
func.put(WXDebugConstants.METHOD, function);
func.put(WXDebugConstants.ARGS, array);
// Log.v(TAG, "callJS: function is " + function + ", args " + array);
Map<String, Object> map = new HashMap<>();
map.put(WXDebugConstants.METHOD, WXDebugConstants.METHOD_CALL_JS);
map.put(WXDebugConstants.PARAMS, func);
return sendMessage(JSON.toJSONString(map));
}
@Override
public int execJSService(String javascript) {
if (!TextUtils.isEmpty(javascript)) {
Map<String, Object> params = new HashMap<>();
params.put(WXDebugConstants.PARAM_JS_SOURCE, javascript);
Map<String, Object> map = new HashMap<>();
map.put(WXDebugConstants.METHOD, WXDebugConstants.METHOD_IMPORT_JS);
map.put(WXDebugConstants.PARAMS, params);
return sendMessage(JSON.toJSONString(map));
}
return 0;
}
WXBridgeManager在打开debug模式后，initFramework 后会注册
- registerModules
- registerComponents
- 将页面DSL js发送给node
09-01 16:47:04.563 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"modal":["confirm","removeAllEventListeners","toast","prompt","alert","addEventListener"]}],"method":"registerModules"}}
09-01 16:47:04.564 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"instanceWrap":["error","addEventListener","removeAllEventListeners"]}],"method":"registerModules"}}
09-01 16:47:04.565 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"animation":["transition","addEventListener","removeAllEventListeners"]}],"method":"registerModules"}}
09-01 16:47:04.565 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"webview":["goForward","removeAllEventListeners","reload","goBack","addEventListener"]}],"method":"registerModules"}}
09-01 16:47:04.566 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"navigator":["setNavBarTitle","clearNavBarMoreItem","close","removeAllEventListeners","setNavBarMoreItem","setNavBarHidden","clearNavBarRightItem","setNavBarLeftItem","addEventListener","open","clearNavBarLeftItem","setNavBarRightItem","push","pop"]}],"method":"registerModules"}}
09-01 16:47:04.567 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"stream":["sendHttp","removeAllEventListeners","addEventListener","fetch"]}],"method":"registerModules"}}
09-01 16:47:04.567 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"timer":["setInterval","removeAllEventListeners","addEventListener","clearInterval","setTimeout","clearTimeout"]}],"method":"registerModules"}}
09-01 16:47:04.568 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"storage":["setItemPersistent","getItem","getAllKeys","setItem","addEventListener","removeItem","length","removeAllEventListeners"]}],"method":"registerModules"}}
09-01 16:47:04.569 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"clipboard":["removeAllEventListeners","getString","addEventListener","setString"]}],"method":"registerModules"}}
09-01 16:47:04.569 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"globalEvent":["addEventListener","removeAllEventListeners","removeEventListener"]}],"method":"registerModules"}}
09-01 16:47:04.570 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"picker":["removeAllEventListeners","pickTime","pick","addEventListener","pickDate"]}],"method":"registerModules"}}
09-01 16:47:04.570 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"meta":["setViewport","addEventListener","removeAllEventListeners"]}],"method":"registerModules"}}
09-01 16:47:04.571 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"webSocket":["onopen","onmessage","addEventListener","onclose","close","WebSocket","removeAllEventListeners","onerror","send"]}],"method":"registerModules"}}
09-01 16:47:04.572 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"dom":["createBody","updateAttrs","updateStyle","removeElement","addElement","moveElement","addEvent","removeEvent","createFinish","refreshFinish","updateFinish","scrollToElement","addRule","getComponentRect","invokeMethod"]}],"method":"registerModules"}}
09-01 16:47:04.572 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"storage":["setItemPersistent","getItem","getAllKeys","setItem","addEventListener","removeItem","length","removeAllEventListeners"]}],"method":"registerModules"}}
09-01 16:47:04.573 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"webview":["goForward","removeAllEventListeners","reload","goBack","addEventListener"]}],"method":"registerModules"}}
09-01 16:47:04.574 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"event":["addEventListener","removeAllEventListeners","openURL"]}],"method":"registerModules"}}
09-01 16:47:04.575 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"navigator":["setNavBarTitle","clearNavBarMoreItem","close","removeAllEventListeners","setNavBarMoreItem","setNavBarHidden","clearNavBarRightItem","setNavBarLeftItem","addEventListener","open","clearNavBarLeftItem","setNavBarRightItem","push","pop"]}],"method":"registerModules"}}
09-01 16:47:04.575 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"animation":["transition","addEventListener","removeAllEventListeners"]}],"method":"registerModules"}}
09-01 16:47:04.576 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"modal":["confirm","removeAllEventListeners","toast","prompt","alert","addEventListener"]}],"method":"registerModules"}}
09-01 16:47:04.576 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"meta":["setViewport","addEventListener","removeAllEventListeners"]}],"method":"registerModules"}}
09-01 16:47:04.577 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"picker":["removeAllEventListeners","pickTime","pick","addEventListener","pickDate"]}],"method":"registerModules"}}
09-01 16:47:04.578 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"timer":["setInterval","removeAllEventListeners","addEventListener","clearInterval","setTimeout","clearTimeout"]}],"method":"registerModules"}}
09-01 16:47:04.578 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"myModule":["addEventListener","removeAllEventListeners","printLog"]}],"method":"registerModules"}}
09-01 16:47:04.579 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"render":["addEventListener","removeAllEventListeners","performClick"]}],"method":"registerModules"}}
09-01 16:47:04.579 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"stream":["sendHttp","removeAllEventListeners","addEventListener","fetch"]}],"method":"registerModules"}}
09-01 16:47:04.580 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"clipboard":["removeAllEventListeners","getString","addEventListener","setString"]}],"method":"registerModules"}}
09-01 16:47:04.580 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"globalEvent":["addEventListener","removeAllEventListeners","removeEventListener"]}],"method":"registerModules"}}
09-01 16:47:04.581 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"instanceWrap":["error","addEventListener","removeAllEventListeners"]}],"method":"registerModules"}}
09-01 16:47:04.582 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"webSocket":["onopen","onmessage","addEventListener","onclose","close","WebSocket","removeAllEventListeners","onerror","send"]}],"method":"registerModules"}}
09-01 16:47:04.582 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[{"syncTest":["getObject","removeAllEventListeners","getString","addEventListener","getArray","getNumber"]}],"method":"registerModules"}}
09-01 16:47:04.586 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"text"}]],"method":"registerComponents"}}
09-01 16:47:04.586 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"container"}]],"method":"registerComponents"}}
09-01 16:47:04.587 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"div"}]],"method":"registerComponents"}}
09-01 16:47:04.587 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"header"}]],"method":"registerComponents"}}
09-01 16:47:04.588 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"footer"}]],"method":"registerComponents"}}
09-01 16:47:04.588 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"image"}]],"method":"registerComponents"}}
09-01 16:47:04.589 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"img"}]],"method":"registerComponents"}}
09-01 16:47:04.590 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":["resetLoadmore"],"type":"scroller"}]],"method":"registerComponents"}}
09-01 16:47:04.590 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"append":"tree","methods":[],"type":"slider"}]],"method":"registerComponents"}}
09-01 16:47:04.591 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"append":"tree","methods":[],"type":"slider-neighbor"}]],"method":"registerComponents"}}
09-01 16:47:04.591 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":["resetLoadmore"],"type":"simplelist"}]],"method":"registerComponents"}}
09-01 16:47:04.592 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":["resetLoadmore"],"type":"list"}]],"method":"registerComponents"}}
09-01 16:47:04.592 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":["resetLoadmore"],"type":"vlist"}]],"method":"registerComponents"}}
09-01 16:47:04.593 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":["resetLoadmore"],"type":"hlist"}]],"method":"registerComponents"}}
09-01 16:47:04.594 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"append":"tree","methods":[],"type":"cell"}]],"method":"registerComponents"}}
09-01 16:47:04.595 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"append":"tree","methods":[],"type":"indicator"}]],"method":"registerComponents"}}
09-01 16:47:04.595 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"video"}]],"method":"registerComponents"}}
09-01 16:47:04.596 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":["blur","focus"],"type":"input"}]],"method":"registerComponents"}}
09-01 16:47:04.597 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":["blur","focus"],"type":"textarea"}]],"method":"registerComponents"}}
09-01 16:47:04.597 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"switch"}]],"method":"registerComponents"}}
09-01 16:47:04.598 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"a"}]],"method":"registerComponents"}}
09-01 16:47:04.598 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"append":"tree","methods":[],"type":"embed"}]],"method":"registerComponents"}}
09-01 16:47:04.615 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"web"}]],"method":"registerComponents"}}
09-01 16:47:04.618 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"refresh"}]],"method":"registerComponents"}}
09-01 16:47:04.618 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"loading"}]],"method":"registerComponents"}}
09-01 16:47:04.619 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"loading-indicator"}]],"method":"registerComponents"}}
09-01 16:47:04.619 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"header"}]],"method":"registerComponents"}}
09-01 16:47:04.620 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":[],"type":"richtext"}]],"method":"registerComponents"}}
09-01 16:47:04.620 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":[[{"methods":["testAsyncCall","testSyncCall"],"type":"synccomponent"}]],"method":"registerComponents"}}
09-01 16:47:05.450 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["2"],"method":"destroyInstance"}}
09-01 16:47:05.476 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3","/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n\n\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t;__weex_define__(\"@weex-component/5e6c4a62a4f2ddfd7c2d1010facc95ec\", [], function(__weex_require__, __weex_exports__, __weex_module__){\n\n\t;\n\t __webpack_require__(15);\n\t __weex_module__.exports = {\n\t data: function () {return {\n\t root: 'examples',\n\t items: [\n\t // `name` key is the example filename without '.we'\n\t // Support sub directory, e.g. 'new-fashion/index'\n\t {name: 'hello', title: 'Hello World'},\n\t {name: 'syntax/index', title: 'More Syntax'},\n\t {name: 'style/index', title: 'Common Style'},\n\t {name: 'animation', title: 'Animation'},\n\t // component\n\t {name: 'component/text-demo', title: 'Text'},\n\t {name: 'component/image-demo', title: 'Image'},\n\t {name: 'component/input-demo', title: 'Input'},\n\t {name: 'component/scroller-demo', title: 'Scroller'},\n\t {name: 'component/list/list-basic', title: 'List (Basic)'},\n\t {name: 'component/list/list-demo', title: 'List (Advanced)'},\n\t {name: 'component/slider/index', title: 'Slider'},\n\t {name: 'component/a-demo', title: 'A'},\n\t {name: 'component/video-demo', title: 'Video'},\n\t {name: 'component/countdown-demo', title: 'Countdown'},\n\t {name: 'component/marquee-demo', title: 'Marquee'},\n\t {name: 'component/web-demo', title: 'Web'},\n\t {name: 'component/navigator-demo', title: 'Navigator'},\n\t {name: 'component/tabbar/tabbar-demo', title: 'Tabbar'},\n\n\t // module\n\t {name: 'module/instance-api', title: 'Instance API'},\n\t {name: 'module/modal', title: 'Modal'},\n\t {name: 'module/stream-demo', title: 'Stream'},\n\t {name: 'module/storage-demo',title:'Storage'},\n\t {name: 'module/clipboard', title: 'Clipboard'},\n\n\t // showcase\n\t {name: 'showcase/new-fashion/index', title: 'Activity'},\n\t {name: 'showcase/calculator', title: 'Calculator'},\n\t {name: 'showcase/minesweeper', title: 'Minesweeper'},\n\t {name: 'showcase/ui', title: 'UI Gallery'},\n\t {name: 'showcase/dropdown/dropdown-demo', title: 'Dropdown'}\n\t ]\n\t }}\n\t }\n\n\t;__weex_module__.exports.template = __weex_module__.exports.template || {}\n\t;Object.assign(__weex_module__.exports.template, {\n\t \"type\": \"example-list\",\n\t \"attr\": {\n\t \"items\": function () {return this.items},\n\t \"root\": function () {return this.root}\n\t }\n\t})\n\t})\n\t;_
09-01 16:47:05.848 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:05.868 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["_root","viewappear",null,null],"method":"fireEvent"}]],"method":"callJS"}}
09-01 16:47:05.886 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:05.908 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:05.935 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:05.971 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.014 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.062 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.101 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.130 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.181 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.197 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.231 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.265 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.314 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.338 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.369 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.397 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.429 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.463 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.499 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.535 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.572 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.606 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.636 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.686 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.704 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.754 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
09-01 16:47:06.772 15308-15335/com.alibaba.weex E/shang1: {"method":"WxDebug.callJS","params":{"args":["3",[{"args":["","{}"],"method":"callback"}]],"method":"callJS"}}
而后node端发送请求 createBody，开始调用到WXDomManager中的createBody，最后渲染到主界面。
09-01 16:47:05.839 15308-16376/com.alibaba.weex E/shang: {"method":"WxDebug.callNative","params":{"instance":"3","tasks":[{"module":"dom","method":"createBody","args":[{"ref":"_root","type":"list","attr":{},"style":{}}]}],"callback":"-1"}}
