智能小程序档案馆——远程调试

在即将为祖国麻麻庆生的日子里，小编带着开心愉悦兴奋期待的心情，为大家带来本周的更文，讲一讲智能小程序远程调试的小秘密哦～

真机调试是小程序的重要调试方法，可以帮助开发者在真机上调试代码，快速查找和定位真机中的 bug 。百度小程序的真机调试有以下几种方案： sConsole、安卓真机调试和远程调试 。

• sConsole: 内置在客户端中，可以查看小程序的输出信息、页面的文档树等内容，但是 sConsole 无法设置运行断点，不能单步调试小程序。
• 安卓真机调试：开发者安装特定版本的安卓客户端，通过数据线连接电脑，进行真机调试。具体步骤参考真机调试。但是，受机型限制，IOS 百度 App 客户端并不支持这种插线调试。
• 远程调试：远程调试的窗口和客户端通过网络传输信息，支持断点调试、查看页面文档树、监听网络请求等操作，可以帮助小程序开发者快速调试和查找小程序在客户端中的问题，是真机调试中最简单便捷的方案。

调试方法

通过点击百度小程序 开发者工具 上的 远程调试按钮 ，扫码打开远程调试。当用户代码变更后，点击远程调试的 刷新 按钮，刷新客户端中的小程序即可，您无需重新扫码哦。

基本原理

远程调试启动后，开发者 工具 启动两个服务， 静态文件代理 和 socket消息的转发 。

• 静态文件代理主要是服务于开发者的小程序代码、master html页面和slave html页面，为客户端提供静态资源。
• 小程序页面和远程调试窗口之间建立socket连接，实现客户端和调试窗口的双工通信。

  

  以下从 远程调试窗口调起原理、master页面的通信原理、slave页面视图同步 三个部分进一步阐述整体设计。

窗口调起原理

调试窗口调起是远程调试中的第一步，也是远程调试窗口和客户端信息交换的第一步。IDE生成远程调试二维码，客户端扫码并解析参数，下载小程序开发代码，同时开发者工具打开远程调试窗口。客户端下载完成后，解压打开小程序，请求静态文件server代理的master html和slave html页面，完成小程序的调起。

master通信原理

master socket 之间的通信关系是远程调试整体架构中最重要的部分。开发者扫码后，打开远程调试窗口，客户端中master socket和远程调试窗口中的master socket通过socket server转发完成信息交互。

• 首先，客户端向远程调试窗口发送加载小程序mater层等初始化信息；
• 远程调试窗口收到信息后，初始化远程调试环境，新建woker，并在worker中加载小程序的master层；
• 客户端的master socket发送信息，当远程调试窗口收到信息后，通过worker将消息转发给master page；
• master page监听worker派发的消息，完成相应处理后，worker将结果发送给主线程；
• 主线程再根据消息类型，通过socket回传客户端或进行相应的操作。

  

slave页面视图同步

远程调试窗口和百度 App 客户端中的 slave 页面通过 slave socket 完成同步。客户端中的小程序页面是多层的，每个slave页面都保存了一个slave socket；而远程调试窗口中只保存了一个slave socket，这些slave socket之间通过socket server转发信息完成信息的交换。

当在客户端中打开新的页面时，远程调试窗口中的 slave socket 会断开原来的连接，重新建立一个与新页面 slave page2 通信的 socket 连接，slave page2 中的 document observer 监听 dom 树的变化，slave socket 转发变化信息给远程调试端的 socket，远程调试窗口的 socket 收到信息后，根据信息完成本地 dom 树的构建，实现视图的同步。

结语

首尾呼应一下：远程调试是真机调试中最便捷的一种，开发者只需扫码即可在手机上调试小程序，无需关心系统兼容性等问题，无需关心系统兼容性等问题哦。

Tips:

在调试 IOS 时，Javascript 运行在 JavaScriptCore 上，也就是 Safari 所使用的 JavaScript 引擎，而远程调试窗口中的小程序 Javascript 文件运行在 V8 环境下，极少情况下会出现 bug。

常见错误：iOS 上有部分日期构造函数未实现。