前言
最近開始研究大名鼎鼎的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.
protocol
weex-devtools
weex toolkit
weelk toolkit 服務器端是信息交換的中樞, 既連接客戶端, 又連接Chrome。
使用nodejs 搭建了一個局域網的服務器。
