通過編譯過程我們將WXML文件和WXSS文件都處理成JS代碼，使用script標簽注入在一個空的html文件中（我們稱為：`page-frame.html`）；我們將所有的JS文件編譯成一個單獨的`app-service.js`。 在小程序運行時，邏輯層使用JsCore直接加載app-service.js，渲染層使用WebView加載page-frame.html，在確定頁面路徑之后，通過動態注入script的方式調用WXML文件和WXSS文件生成的對應頁面的JS代碼，在結合邏輯層的頁面數據，最終渲染出指定的頁面。 開發者工具使用一個隱藏著的`<webview/>`標簽來模擬JSCore作為小程序的邏輯層運行環境，通過將JSCore中不支持的BOM對象局部變量化，使得開發者無法在小程序代碼中正常使用BOM，從而避免不必要的錯誤。 在開發者工具底層有一個HTTP服務器來處理來自WebView的請求，并將開發者代碼編譯處理后的結果作為HTTP請求的返回，WebView按照普通的網頁進行渲染。 開發者工具利用BOM、node.js以及模擬的UI和交互流程實現對大部分客戶端API的支持。 同時開發者工具底層維護著一個WebSocket服務器，用于在WebView與開發者工具之間建立可靠的消息通訊鏈路，使得接口調用，事件通知，數據交換能夠正常進行，從而使小程序模擬器成為一個統一的整體。 微信開發者工具使用`webview.showDevTools `打開Chrome Devtools調試邏輯層WebView的JS代碼，同時開發了Chrome Devtools插件 `WXML 面板`對渲染層頁面WebView進行界面調試。`WXML面板`對渲染層WebView中真實的DOM樹做了一個最小樹算法的裁剪之后，呈現出與WXML源碼一致的節點樹列表。