微信小程序性能测试Trace工具使用方法

Doris 分类:使用问题

微信小程序性能测试Trace工具使用方法

回复

共1条回复 我来回复
  • Katharine
    Katharine
    这个人很懒,什么都没有留下~
    评论

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

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

    c69efc238dd4da23e369ee73cd4c8157

    1、工具介绍

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

    2、前置条件准备

    (1)电脑上安装adb

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

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

    b513f0f233682c2e5aaf2a6c68a0fe9f

    检查是否安装成功:adb version

    b60a7551346dadaa0e3d40a2bc9d700a

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

    (2)下载微信小程序开发工具

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

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

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

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

    6cfb11a9bbfa9f5f65e6752537706349

    具体操作步骤:

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

    46c6b232da3f0c05ba21cde8430a2d19

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

    bcc13eec4c78f6ab9d972614c2e0ae1e

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

    f83b7b11b656fd7d2eef0470a5a015bf

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

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

    0eea935e8149afa32ed4fe463f5df484

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

    73faa9462ca15608c772c4b0caf1e3d9

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

    c2813aaa96ea38b80e0daa1d535c1500

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

    3ab7c47ee89759ba970a3cc069764754

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

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

    b02043ce47f1f340703a79a79e9d1560

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

    9558247e4d24774aa3f95a9a62e0a88e

    1个月前 0条评论
微信小程序性能测试Trace工具使用方法
交流群