API 教程

调试

常用功能

模拟器

模拟器提供了和百度APP 客户端一致的运行环境，对于绝大部分的 API 均能够在模拟器上呈现出与客户端一致的状态。

图片

编译

点击工具栏中的编译按钮，可以编译当前工程代码，并自动刷新模拟器，展现最新的页面效果。

图片

同时为了帮助开发者调试从不同场景值进入具体的页面，开发者可以添加或选择已有的自定义编译条件进行编译和代码预览（如图）。
已有的自定义编译条件会记录在project.swan.json中，开发者可以将其托管于工具内部处理。

图片

注：编译条件跟项目相关，每个项目可以保存自己相关的编译条件

前后台切换

工具栏中切后台模拟了智能小程序被切换到后台的情况。

图片

调试器

可在调试器中直接进行调试。
图片

模拟器调试

模拟器调试工具分为 5 大功能模块：Sources、Network、Console、Storage、Sensors。

Sources panel

Sources panel 用于显示当前项目的脚本代码文件，智能小程序框架会对脚本文件进行打包编译的工作，因此在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件。

图片

Network panel

Network Panel 中展示了 request 和 socket 的请求情况。

图片

注：uploadFile 、downloadFile暂时不支持在 Network Panel 中查看

Console panel

开发者可以在此输入和调试代码, 程序中的 console 信息也会在 Console panel 中提示。

图片

Storage panel

Storage panel 用于显示当前项目使用 swan.setStorage 或者 swan.setStorageSync 后的数据存储情况。

可以直接在 Storage panel 上对数据进行删除（按 delete 键）、新增、修改。

图片

Sensors panel

用于设置地理信息、陀螺仪、指南针数据，调用相关 API 时会读取在这里设置好的数据。

图片

真机调试

真机调试工具，可以对手机上运行的小游戏：

  • 打断点（Sources 面板）
  • 查看源代码（Sources 面板）
  • 查看 console log（Console 面板）

使用条件

  • 目前只支持 Android，且须 11.3 或以上版本的百度APP。
  • 使用时需要手机和开发者工具所在 PC 机在 同一局域网内。

真机调试启动方式

  • 保证手机和开发者工具所在 PC 机在同一局域网内。
  • 开发者工具 登录 后，会出现“真机调试”按钮（如下图）。
  • 点开“真机调试”按钮，会对当前小游戏工程进行编译并出现二维码。
  • 用手机上百度APP 扫码，小游戏启动（但是会暂停在程序开头），同时开发者工具会自动弹出“真机调试窗口”（如下图）。
  • 从而可以开始调试（这时可以在“真机调试窗口”的 Sources 面板看到游戏被断点暂停在第一句话）。

图片

图片

真机调试常见问题解答

开发者工具没有“真机调试”按钮？

  • 请更新开发者工具到 1.14.18 及以上版本。
  • 开发者工具未 登录 时，并不会出现“真机调试”按钮。

扫码后没有出现“真机调试窗口”？

  • 确定是 Android 手机而非 iPhone。
  • 确定手机和开发者工具所在机器在 同一局域网。

这些条件都满足后，请 重新启动调试：

  • 手机上，关闭小游戏进程。
  • 开发者工具中，重新点开“真机调试”编译出二维码。

注：在小游戏界面上有个悬浮按钮“调试状态”，能看到连接状态。

源代码显示不出来、卡顿？

“真机调试窗口”中可能显示如下图：

图片

这表示源代码文件是很长的压缩文件，如图示操作点击“{}”，可显示格式化过的代码文件。

注意：这个过程可能会有些卡顿。

游戏扫码后时为什么没有运行？

真机调试默认把游戏暂停在游戏开头。
在“真机调试窗口”的 Sources 面板中可以看到游戏被暂停在第一句话。

不想游戏一开始就暂停怎么办？

使用“性能调优”按钮扫码，则不暂停在最开头。

“真机调试窗口”和“开发者工具默认的调试窗口”的区别？

开发者工具内默认的调试窗口，是调试模拟器中运行的程序的。

预览发布

前提条件

  • 开发者已登录，且在项目成员中。添加项目成员请见：开发前准备。
  • 填写项目信息时的 AppID 正确。
    此时工具栏会显示预览和发布按钮。

图片

预览

当点击预览按钮时，开发者工具会对当前项目进行编译，然后制作压缩包上传到服务器，并生成预览二维码，用百度app扫码后可以看到相应页面。

图片

发布

当点击发布按钮时，开发者工具会对当前项目进行编译，然后制作压缩包上传到服务器，上传成功后，可以在智能小程序官网的开发管理一栏看到提交的相关信息。

sConsole

在真机上，如果想查看 console API 输出的日志内容和额外的调试信息，有两种方法：

  1. 在代码中调用 setEnableDebug 方法开启调试功能。
  2. 点击屏幕右上角【更多】按钮打开的菜单里选择【关于】，若是开发版和审核版小游戏，可以看到 sConsole 的按钮，点击按钮开启调试功能。

首次打开调试，小游戏鉴权成功后会提示退出，重新打开后右下角会出现一个 sConsole 的按钮，点击按钮可以打开日志面板。

下图为小游戏 sConsole:

图片

sConsole 使用说明

由于实现机制的限制，开发者在调用consoleAPI打印日志内容时，sConsole支持所有类型的展示，但对于JSON无法表示的数据类型以及无法转化JSON字符串的情况，sConsole做了以下处理:

  • 循环引用对象：<Circular>
  • <Function>
  • <Undefined>
  • <ArrayBuffer: byteLength=10>
  • <Infinity>
  • <Symbol>
  • ...

注：打印结构过于复杂的日志内容可能会带来额外的性能消耗，非调试环境下请尽量避免

性能调优

当遇到小游戏运行卡顿、长期运行发生崩溃等问题时，真机“性能调优”工具可能能帮到一些忙，有助于定位到导致性能瓶颈的代码。

目前“性能调优”工具提供了：

  • CPU Profiler 面板
    • 时间线上的火焰图：当运行卡顿时，可以帮助发现 哪些帧 中 哪些代码 耗去了过多时间。
    • 函数耗时汇总：帮助宏观发现总体耗时过大的代码。
  • Memory 面板
    • Snapshot：观察某些时间节点的 JS Heap 的情况，以及比较出增减，判断占用内存过大的数据/对象。

使用条件

  • 目前只支持 Android，且须 11.3 或以上版本的百度APP。
  • 使用时需要手机和开发者工具所在 PC 机在 同一局域网内。

性能调优工具启动方式

  • 保证手机和开发者工具所在 PC 机在同一局域网内。
  • 开发者工具 登录 后，会出现“性能调优”按钮（如下图）。
  • 点开“性能调优”按钮，会对当前小游戏工程进行编译并出现二维码。
  • 用手机上百度APP 扫码，小游戏启动，同时开发者工具会自动弹出“性能调优”窗口（如下图）。

如果遇到问题，请参考 真机调试常见问题解答（因为他们实际同属一套实现）。

图片

游戏运行卡顿的性能调优

游戏卡顿的原因有非常多，本“性能调优”工具可能帮助发现的情况，可以有下面这些：

在一些帧内的 JS 代码执行时间过长，或者 GC 时间过长

通过 CPU Profile 的火焰图可能发现成为瓶颈的代码：

图片

图片

并且结果可以保存下来，传给别人一起分析。

图片

宏观发现一些 JS 逻辑执行耗时过多

图片

内存占用越来越大时，发现哪些对象没有及时释放

可以使用的方法有：

  • 使用 Memory 面板获取当前 JS Heap 的快照（Snapshot1）（这个过程有些慢，须耐心等待）。
  • 游戏运行一段时间后，再次获取 JS Heap 的快照（Snapshot2）。
  • 在 Snapshot2 上选择 Comparison，和 Snapshot1 对比（如下图），能够看出对象的增减。

图片

图片

注意：

  • 在 Snapshot 中使用 Class Filter 时，挂在全局的 Class 才能被找到。
  • JS Heap 并不反应本游戏所占用的所有内存空间。维护在 JS Heap 之外的对象（例如 Canvas、Image、Audio 等）所占用的空间并不能被反应出来。