用户可以在快捷键设置里自定义预览快捷键。
特殊场景调试
小程序开发者工具是对微信客户端的模拟,受限于桌面设备同移动设备的差异,以及微信的一些特有数据,同时考虑到开发的便捷性,部分 API 在工具和微信中有所不同。
扫码接口
同手机端直接调用摄像头来扫码不同,在 PC 或者 Mac 上调用摄像头来扫码完成调试是一个低效的行为,所以在开发工具上调用二维码扫码 API 后,开发者可以选择一个本地的图片来进行后续的逻辑调试,而不是真正的启用摄像头来扫码,流程有所不同,但是接口的输入和输出是一致的。
微信支付
最新版本的开发者工具已经支持微信支付的调试,但是为了兼顾到安全,同手机上直接调用微信支付有所不同:
- 新绑定的开发者需要 24 小时后才有权限进行微信支付的调试
- 开发者在工具上调用微信支付的 API 后,开发工具会出现一个二维码,开发者必须使用当前开发所使用的微信号扫码后在手机上完成支付的流程
- 工具会同步移动端微信支付的回包到工具中,开发者自行进行后续的操作
使用的交互有所不同,但是接口的输入输出工具同客户端是保持一致的。
启动使用自定义参数
在日常使用中,用户可以通过扫码、分享打开一个小程序,这时候会依据设置的启动页面:path 跳转到对应的小程序页面(不一定是首页)并且可以携带参数:query。在开发者工具中,开发者同样可以通过自定义编译条件的方式来达到调试不同启动页面和启动参数的目的。
例如下图是选择进入页面是 page/API/index,参数 是 name=can
进入场景值
在微信客户端中,用户可能在各个场景下打开小程序 详情 ,然而在开发者工具中是没有真实的环境去模拟这些场景的。开发者可以通过条件编译的方式来达到调试不同场景的目的。
普通的转发
开发者工具上调用转发是一个模拟的行为,并不会真实的转发给用户,开发可以通过这个模拟行为判断是否正确的调用了转发 API。
带 shareTicket 的转发
带 shareTicket 的转发可以获取到更多的转发信息,例如群聊的名称以及群的标识 openGId。在小程序开发者工具上,开发者可以通过以下方式来调试带 shareTicket 的转发。
调用 wx.showShareMenu 的参数 withShareTicket 为 true 时,点击模拟器右上角菜单后出现的转发按钮,会出现一个测试群列表,如图:
开发者点击选取任何一个群,可以通过接口的回包获取到 shareTicket ,通过调用 wx.getShareInfo 可以获取到相关转发的信息
当开发者需要调试从某一个群点开,并且带有 shareTicket 的场景时,可以使用自定义编译中的 1044:群聊会话中的小程序消息卡片(带 shareTicket) 同时可以选择任一模拟测试群,如图
预览使用自定义编译条件
同 启动使用自定义参数 相同,提交预览时,开发者可以通过自定义预览的方式来达到在移动设备上调试不同启动页面和启动参数 的目的。我们可以选择已经创建好的自定义编译条件进行预览。
跳转小程序调试支持
小程序跳转开发调试可以分为两个部分
调试小程序是否能够正确的跳转
出于小程序代码的安全考虑,在工具上调用 wx.navigateToMiniProgram 的时候,开发者工具不会真实的打开和跳转到另外的小程序,但是工具会判断当前小程序与需要跳转的小程序之间的绑定关系,输出相关信息给到开发者。开发者可以根据成功或者失败的回调函数来判断调用是否成功。
调试被打开的小程序时候正确的接收参数
选择 自定义编译 进入场景选择 1037 从小程序进入 可以调试小程序被打开时候是否接收到了正确的参数并做了相关处理。
选择 自定义编译 进入场景选择 1038 从小程序返回 可以调试小程序返回时候是否接收到了正确的参数并做了相关处理。
真机调试
真机远程调试功能可以实现直接利用开发者工具,通过网络连接,对手机上运行的小程序进行调试,帮助开发者更好的定位和查找在手机上出现的问题。
调试流程
要发起一个真机远程调试流程,需要先点击开发者工具的工具栏上 “远程调试” 按钮。
此时,工具会将本地代码进行处理打包并上传,就绪之后,使用手机客户端扫描二维码即可弹出调试窗口,开始远程调试。
远程调试窗口
使用手机扫描此二维码,即可开始远程调试。
要结束调试,直接关闭此调试窗口,或点击右下角 “结束调试” 按钮即可。
远程调试窗口分为两部分,分别是左侧的调试器视图、右侧的信息视图。开发者可以在调试器里直接进行代码的调试,并查看 Storage 情况;信息视图则可以查看目前与手机和服务器的连接情况,以及发生的错误信息等。
调试器
在远程调试的调试器里,开发者可以在 Console 面板里对代码进行调试,在 Sources 面板里查看小程序的源代码并进行断点单步调试,在 Storage 面板里查看小程序的 Storage 使用情况等。
注意,要在 Console 里对小程序进行调试,需要将调试的上下文切换到 VM Context 1,如图所示。
在 Sources 面板查看源代码时,开发者所有的文件路径都是以 weapp:// 开头的。
除了可以在调试器进行单步调试,开发者还能在代码中手动插入 debugger; 语句进行断点调试。因此,如果想要在小程序启动的尽早时刻断点,可以在进入远程调试之前,编辑代码手动在需要断点处的代码插入 debugger; 语句来实现。
WXML、AppData、Storage 面板的操作和开发者工具调试模拟器时的操作一致。注意,如果在右侧信息视图取消勾选了 “使用工具端的 Storage”,则所有的 Storage 数据将被存储在手机上,将不再出现 Storage 面板。
信息视图
右侧的信息视图展示了手机、网络连接的信息。手机信息展示手机的型号、系统、名称、微信版本等信息,以及通信延时。通信延时越小,与手机的通信越流畅。
在 “连接信息” 里,展示了工具与服务器的连接信息,包括了连接状态、服务器状态等,当连接故障、服务器阻塞影响到调试的过程和流畅度时,此处将展示这一状态。当连接状态为 “已结束” 时,表明调试已被终止。
“警告和错误” 展示了最近发生的错误和警告信息。如果网络连接断开,此处将会询问开发者是否需要重新连接。
手机端展示
调试过程中的手机端展示如下所示。
当手机无网络或者进入了断点状态时,将会出现一个浮层提示并阻止进一步的操作。
小游戏远程调试
目前仅支持 1.02.1809260 及以上版本工具, iOS 11.2 ~ 11.4.1 系统 6.7.2 及以上版本微信客户端,以及 Android 系统 6.7.3 及以上版本微信客户端。
与小程序不同的是,在调试窗口的右侧可能会出现 “Contexts” 栏,可以点选希望调试的不同的 JavaScript 上下文。
默认情况下,为了方便调试,工具会上传带有完整源代码的 Source Map。如果不希望上传,或者出现代码行列数映射错乱的情况,可以在右下侧选项中关闭这个选项,并取消勾选项目详情中的 “上传代码时自动压缩混淆” 选项。
注:目前尚不支持 Storage 面板。
多账号调试
开发者工具需要使用微信号登录,我们以此帐号作为所有打开的项目的主帐号,当登录的帐号改变时,其登录态将同步到所有已打开的项目窗口; 当小程序/小游戏需要多个微信号才能共同完成一项工作的话,我们提供了多帐号调试的功能。
功能入口
通过 菜单 - 工具 - 多帐号调试 可以使用多帐号调试功能
如何使用
使用不同于主帐号的微信扫描二维码可以添加一个测试帐号,如果该测试帐号登录了其他开发者工具客户端,登录态将失效
点击 ‘+’、‘-’ 我们可以添加多个测试号,或者删除已添加的测试号;按住 ‘ctrl’ 键,鼠标可以多选
我们可以同时勾选多个帐号,打开多个调试窗口来调试同一个项目;调试窗口与项目主窗口不同,只有模拟器和调试器;对项目代码编辑还是需要在项目主窗口进行,代码保存后,各个调试窗口可以同步执行最新的代码
标签:微信小程序
相关阅读 >>
微信小程序云开发服务端存储api 将本地资源上传至云存储空间
微信小程序api 绘图globalcompositeoperation
微信小程序api 实时音视频-创建livepushercontext对象
微信小程序api 绘图中使用setglobalalpha设置全局画笔透明度
更多相关阅读请进入《微信小程序》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者