通过编译过程我们将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源码一致的节点树列表。