Weex Inspector 初探（一）

前言

最近开始研究大名鼎鼎的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
主要的逻辑包括：

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

大致结构

Android 端

inspector包

inspector 大致分为几个部分：

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

protocol

weex-devtools

weex toolkit

weelk toolkit 服务器端是信息交换的中枢, 既连接客户端, 又连接Chrome。
使用nodejs 搭建了一个局域网的服务器。