微信小程序性能测试Trace工具

页面加载时间：接口调用时间+加载资源时间+页面渲染时间  

浏览器的F12中的network可以查看到

 

1、工具介绍

  微信开发者工具的调试器中Trace可实时监控小程序的性能，分析trace文件可获取内存、CPU、fps、启动时间、各函数的执行时间等。

2、前置条件准备

（1）电脑上安装adb

下载adb压缩包去解压即可。链接：https://pan.baidu.com/s/1SKu24yyShwg16lyIupO5VA 提取码：ih0i

解压，如果下载放入到D盘，打开dos窗口那么就要进入到D盘

检查是否安装成功：adb version

说明：Android Debug Bridge（安卓调试桥） tools。它就是一个命令行窗口，用于通过电脑端与模拟器或者是设备之间的交互。

（2）下载微信小程序开发工具

微信小程序官方：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

选择需要的版本，我选择的是　windows64 下载后按照步骤一步一步进行安装

(3)手机与电脑连接,手机USB打开调试模式

• 以小米手机为例:手机用数据线连接至电脑;手机设置->我的设备->全部参数->MIUI版本连续点击多次直到出现您已处于开发者模式->重新回到设置->更多设置->开发者选项->允许USB调试
• 其他手机型号可以百度查询~
• 检验手机和电脑是否连接成功（命令： adb devices）

具体操作步骤：

1、登录微信小程序开发者工具->小程序->点击加号导入项目代码；或者选择测试号（demo）进入

2、选择trace，点击Choose Device，如果手机adb连接成功在弹框中可看到连接设备，如下：

3、点击选择设备后会停留在选择trace文件页面

注:若手机端无文件上传时会一直搜索中

4、手机端，进入要测的微信小程序中（与开发者工具登录的同一个小程序）；若无关注要测的小程序时，可在开发者工具上点击真机调试，扫码就可关注进入

5、手机进入小程序后，打开性能监控面板（点击监控后要重新登录微信和小程序）

打开性能监控面板之后我们可以看到如下图。在小程序中操作后可导出trace文件（手机与电脑连接）

6、导出后在电脑端就会显示其trace文件，点击可查看测量的性能数据

7、选择需要查看的文件，即可查看所需的性能数据

8、选中后在底部展示其具体数据如下：

小程序上的性能指标说明: