前言

最近开始研究大名鼎鼎的weex，一个能讲三端统一的框架，用前端技术写代码，抹平平台间的差异性。确实是不错的技术方向。不过Flutter 感觉应该更厉害些，不过还是要写这个，一个是绩效目标，另一个也是自己对这个方面比较感兴趣。

技术栈

debug的过程

上面的流程图大概能看到三部分组成：

客户端 Devtools 客户端作为aar被集成App中, 它通过webscoket连接到调试服务器,此处并未做安全检查. 出于安全机制及包大小考虑, 强烈建议接入方只在debug版本中打包此aar.
服务器 Devtools 服务器端是信息交换的中枢, 既连接客户端, 又连接Chrome, 大多数情况下扮演一个消息转发服务器和Runtime Manager的角色.
Web端 Chrome的V8引擎扮演着bundle javascript runtime的角色. 开启debug模式后, 所有的bundle js 代码都在该引擎上运行. 另一方面我们也复用了Chrome前端的调试界面, 例如设置断点, 查看调用栈等, 调试页关闭则runtime将会被清理.

其中的 Debug Server 的实现是 weex-toolkit。

App Debug部分的实现分为Android端和IOS端，Android 端的具体实现weex-devtools-android
主要的逻辑包括：

hook weex-sdk 中 callNative 和 callJs 方法，以及页面创建和刷新逻辑。js framework初始化到native代码调用再到js代码执行的全过程。
实现 Chrome Debugging Protocol
使用okhttp websocket 进行交互，采用json格式进行应答。

大致结构

Android 端

inspector包

inspector 大致分为几个部分：

1. common 部分保存了一些工具类。
2. debug 部分主要是websocket逻辑，负责weex-toolkit服务器和natvie部分的数据请求和应答。
3. inspector 包含了元素信息，chrome debug 协议信息,截屏逻辑。
4. json 包含 json序列化和反序列化 工具。
5.