最新demo版|如何0-1开发支付宝小程序之如何调试小程序（二）

上一篇跟大家详细的讲了下开发支付宝小程序前所需要做准备事项，安装了支付宝小程序的开发工具。那么今天就来详细聊一下在小程序开发工具中，我们需要如何调试小程序。

支付宝小程序的调试分为三种，分别是「模拟器调试+调试器」、「真机调试」以及「预览调试」。

前期配置

在开始调试之前，我们需要注意下先关闭开发工具对我们代码中的一些地址合法性的校验，方便我们进行调试。

点击界面右上角【详情】：

勾选如下两个校验：

未勾选的情况下，也可以直接配置 HTTP 和 web-view 的域名。

调试模式

1. 模拟器+调试器调试

调试位置：小程序开发工具上模拟器和调试器区域，如下图：

如何调试：保存代码后实时展示。也可以设置编辑器自动保存，可参考 [IDE 编辑器设置编辑文件自动保存]

调试范围：可以调样式以及一些基础的功能

模拟器

模拟器上提供了一些功能，我们来逐一看下。

首先就是设备模拟，模拟器上提供了一些常用的设备机型，可以用于不同设备的调试；也可以自行新增设备进行调试。

ps：正常情况下模拟器上的机型测试没有问题的话，实际移动端使用也不会有问题。

其次就是功能面板，可以模拟移动端的扫码、定位、授权等能力。

接下来就是模拟器尾部的功能，可以看到当前页面的页面路径、启动的页面参数并且可以选择基础库的版本

调试器

调试器上默认展示的功能如下：

• Elements： 查看页面节点
• Console： 运行日志、错误查看
• Sources： 源码查看、断点调试
• Network： 网络资源、请求查看
• Data：查看当前页面的定义数据
• Storage： 缓存数据查看、编辑
• Applog：记录当前的 js 页面方法的执行顺序及耗时
• Mock：生成随机的数据，需要配合 Anymock 插件使用

在此列举一些常见问题对应解法，供大家参考：

• [IDE 模拟器一直编译中日志提示端口占用]
• [模拟器打开项目白屏，真机正常]

2. 真机调试

调试位置：移动端 + 小程序开发工具上的真机调试面板，如下图：

如何调试：点击真机调试，生成调试码，用支付宝直接扫码，可以在手机上直接看到小程序调试页面，并且 PC 端会直接跳出真机调试的页面。

调试范围：可调试模拟器调试上的所有功能，并且与用户遇到的实际场景一致。

真机调试种选中对应节点的话，移动端也会显示该节点的具体属性：

支持断点调试：在 Sources 中找到对应 js 页面对应代码行前，左键断点；命中断点后，移动端会有对应的遮罩提示。

每次修改代码后需要重新推送到移动端进行测试，建议勾选【小程序自动推送给支付宝】，并且保持移动端开启支付宝页面。这样每次重新时，都会自动推送至移动端。

在此列举一些常见问题对应解法，供大家参考：

• [setData(...) can only update a mounted component]
• [小程序真机调试为何不显示network请求]
• [为何预览模式可以加载页面真机调试无法加载]

3. 预览调试

调试位置：移动端，可直接在移动端的调试面板上进行调试

如何调试：点击预览，生成调试码，用支付宝直接扫码

如果调试页面没有调试面板的蓝条，可以点击右上角，进入小程序详情去打开调试面板。

如果还是找不到调试面板的话，建议确认下是否是预览调试～

调试面板主要提供了以下功能，不支持断点调试：

• Log 页签：显示打印日志（可按日志级别查看）
• Storage 查看小程序缓存
• Network 查看接口请求
• Data 页面 data 数据

在小程序还未有线上版本时，调试由其他小程序跳转到该小程序功能前需要先进行预览模式调试，否则会报错。可参考 [调试跳转未上线小程序版本]

在此列举一些常见问题对应解法，供大家参考：

• [IDE 真机预览调试面板中的command可以输入哪些命令进行哪些操作]
• [扫真机预览码提示系统错误正在排查]

编译模式

如果在小程序还未上线前，需要测试一个非首页页面，并且需要携带参数进入，此时就需要用到编译模式这个功能了，如下图：

选择【添加编译模式】，我们可以定义我们需要进入的页面以及进入页面所需要携带的参数信息：

并且可以模拟是通过什么场景进入该页面的：

添加完成之后，就可以勾选新创建的模式进行调试了。

可参考：

• [小程序没上线如何测试获取二维码参数]
• [开发工具启动参数配置]

以上就是关于小程序调试的所有内容啦，希望可以帮助到你~✿✿ヽ(°▽°)ノ✿

下一期我们会讲一下小程序的基础能力（框架、组件、API）~