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

栏目: 服务器 · 发布时间: 5年前

内容简介:在即将为祖国麻麻庆生的日子里,小编带着开心愉悦兴奋期待的心情,为大家带来本周的更文,讲一讲智能小程序远程调试的小秘密哦~真机调试是小程序的重要调试方法,可以帮助开发者在真机上调试代码,快速查找和定位真机中的 bug 。百度小程序的真机调试有以下几种方案:通过点击百度小程序

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

真机调试是小程序的重要调试方法,可以帮助开发者在真机上调试代码,快速查找和定位真机中的 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 上有部分日期构造函数未实现。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JavaScript经典实例

JavaScript经典实例

Shelley Powers / 李强 / 中国电力出版社 / 2012-3 / 78.00元

《JavaScript经典实例》各节中的完整代码解决了常见的编程问题,并且给出了在任何浏览器中构建Web应用程序的技术。只需要将这些代码示例复制并粘贴到你自己的项目中就行了,可以快速完成工作,并且在此过程中学习JavaScript的很多知识。你还将学习如何利用ECMAScript5和HTML5中的最新功能,包括新的跨域挂件通信技术、HTML5的video和audio元素,以及绘制画布。《JavaS......一起来看看 《JavaScript经典实例》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具