最近集團內部在自研小程序，我負責小程序開發者工具的調試部分。經過一段時間的探索，摸索出不少經過實際檢驗的可行手段。接下來將會用幾篇文章總結一下思路。

文章的內容主要會分為以下幾部分：

如何建立邏輯層運行時容器（兩種方案利弊）？

如何嵌入調試審查面板？

如何啟動斷點調試能力？

如何審查小程序DOM？

如何實現邏輯層與渲染層的通信？

如何實現渲染層與Chrome擴展的通信？

先放幾張圖出來：

小程序審查圖：

渲染層用的是Vue的能力，所以審查也是基于Vue-devtools做的。

Vue-devtools通信圖以及改造后的通信圖：

上面的圖中有3塊部分。

• 第一部分為Vue-devtools的加載過程。
• 第二部分為Vue-devtools的通信關系圖。
• 第三部分為改造后適用于小程序DOM審查的通信關系圖。

下圖是渲染層與邏輯層的實現圖：


基于Chrome DevTools Protocol的適用于小程序開發者工具的多頁面的調試信息通信圖:

下圖是小程序通信關系全圖：

好，前提就鋪墊到這里。后面分文章詳細說明。

總結

以上是生活随笔為你收集整理的如何开发小程序开发者工具?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。