【愚公系列】《微信小程序与云开发从入门到实践》043-调试与性能相关接口
标题 | 详情 |
---|---|
作者简介 | 愚公搬代码 |
头衔 | 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。 |
近期荣誉 | 2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主等。 |
博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在小程序的开发过程中,调试与性能优化是确保应用顺畅运行的关键环节。随着功能的不断增加和用户需求的提升,开发者面临着日益复杂的代码和多样化的设备环境,如何有效地进行调试和性能监控,成为了每个开发者必须掌握的技能。
在本篇文章中,我们将深入探讨小程序中与调试与性能相关的接口。我们将介绍常用的调试工具和方法,帮助开发者快速定位问题、优化代码。同时,我们也会讨论如何利用性能监控接口,实时跟踪小程序的运行状态,识别性能瓶颈,从而提升用户体验。
🚀一、调试与性能相关接口
在小程序的开发过程中,对程序进行调试是必不可少的,前面使用日志打印的方式将某些信息输出到控制台就是调试的一种方式,本节将介绍小程序开发框架中有关程序调试的相关接口。对一个小程序来说,性能优劣会直接影响到用户的体验,可以通过一些性能接口来获取程序的运行情况,以方便定位优化的方向。
🔎1.调试相关接口
在微信小程序的开发过程中,调试日志是一个重要的工具,用于帮助开发者追踪和解决问题。通常,开发者会使用 console.log
方法向控制台输出信息,但在正式版或体验版的小程序发布后,无法通过控制台查看日志。因此,微信小程序提供了调试模式和一些日志方法,帮助开发者在不同环境下进行调试和输出日志。
🦋1.1 开启调试模式
在开发者工具中,可以使用 console.log
输出信息,但在小程序的正式版或体验版中,一旦出现异常,无法通过控制台查看日志。为了解决这个问题,微信小程序提供了 wx.setEnableDebug
方法来开启调试模式。
wx.setEnableDebug({
enableDebug: true // 设置为true开启调试模式
});
- 开启调试模式后,调试信息将直接展示在小程序的调试面板中。
- 调试面板中会显示日志、页面结构、网络请求等信息,方便开发者进行调试。
- 注意:此方法不仅在开发者工具中有效,也会在正式版和体验版的小程序中生效。
🦋1.2 调试面板的功能
开启调试模式后,小程序界面上会悬浮一个调试按钮。点击此按钮,可以打开调试面板,调试面板提供了如下功能:
- 日志信息:包括不同级别的日志输出。
- 页面结构:显示当前页面的 DOM 结构。
- 网络请求:查看接口请求的详情。
日志输出方法:等级区分与使用
微信小程序提供了多种日志输出方法,可以帮助开发者根据日志的类型进行分类输出。下面是常用的日志方法及其详细说明:
常用日志方法
方法名 | 参数 | 意义 |
---|---|---|
console.debug |
任意 | 输出调试日志(蓝色风格)。 |
console.log |
任意 | 输出普通日志(黑色风格),常用于日常的调试信息。 |
console.info |
任意 | 输出 info 类型日志(黑色风格)。 |
console.warn |
任意 | 输出警告日志(黄色风格),通常用于提示开发者注意的情况。 |
console.error |
任意 | 输出异常日志(红色风格),用于输出错误或异常信息。 |
console.group |
String label |
开启一个新的日志分组,并指定标签,之后输出的日志都会被放入此分组内。 |
console.groupEnd |
无 | 结束当前日志分组。 |
日志等级和输出效果
-
console.debug
输出调试日志,通常用于开发调试阶段。输出的日志文本为蓝色。console.debug("这是调试日志");
-
console.log
输出普通日志,是最常用的日志方法,输出的日志为黑色。可以用于一般信息的打印。console.log("这是普通日志");
-
console.info
输出信息类型的日志,通常用于显示一般信息,输出的日志为黑色。console.info("这是信息日志");
-
console.warn
输出警告日志,用于提醒开发者注意一些潜在的问题,输出的日志为黄色。console.warn("这是警告日志");
-
console.error
输出错误日志,用于记录异常或错误信息,输出的日志为红色,通常用于错误处理或异常捕获。console.error("这是错误日志");
-
console.group
用于开启一个新的日志分组,可以为日志分组指定标签,所有后续的日志都将被放入这个分组内,方便查看。console.group("分组标签"); console.log("这是分组内的日志1"); console.log("这是分组内的日志2");
-
console.groupEnd
用于结束当前的日志分组。console.groupEnd(); // 结束当前的日志分组
console.group
与 console.groupEnd
的应用
console.group
和 console.groupEnd
方法非常实用,尤其在日志输出较多时,可以帮助开发者将相关日志分组,避免混乱。
示例:
console.group("函数执行过程");
console.log("开始执行函数...");
console.log("函数执行中...");
console.log("函数执行结束");
console.groupEnd(); // 结束分组
在控制台或调试面板中,输出的日志将被分组显示,便于查看和调试。
🔎2.日志管理器与实时日志管理器
在小程序的开发过程中,仅仅依赖 console
相关接口输出日志适用于开发阶段的调试,而一旦小程序发布到线上,面对真实用户时,日志调试的难度和复杂度大大增加。因此,为了能够有效追踪和定位线上问题,微信小程序提供了两种日志管理器:LogManager 和 RealtimeLogManager。这两种日志管理器主要用于收集和上报线上日志,帮助开发者分析问题、优化应用。
🦋2.1 LogManager:日志管理器
LogManager
主要用于收集小程序线上用户的日志。它可以在用户使用小程序时自动记录日志,帮助开发者获取用户在遇到问题时的操作路径及应用日志。
获取 LogManager 对象
通过 wx.getLogManager
获取 LogManager
对象,调用时可以传入一个 level
参数来控制日志记录的详细程度。
let logManager = wx.getLogManager({ level: 0 });
level: 0
:会记录应用和页面生命周期函数的调用,以及系统方法的调用。level: 1
:不会记录这些生命周期和系统方法的日志,只记录普通的应用日志。
LogManager 写日志的方法
获取到 logManager
对象后,可以调用以下方法来记录不同类型的日志。每个日志类型的写入方法如下表所示:
方法名 | 参数 | 意义 |
---|---|---|
log |
任意 | 写入普通的 log 日志 |
debug |
任意 | 写入 debug 类型日志 |
info |
任意 | 写入 info 类型日志 |
warn |
任意 | 写入 warn 类型日志 |
error |
任意 | 写入 error 类型日志 |
日志存储与限制
- 单条日志大小限制:每条日志的大小不能超过 100KB。
- 本地日志存储:本地最多保存最近 5MB 的日志内容,超过 5MB 后会删除最旧的日志。
用户主动上报日志
在小程序中,可以设计一个 open-type="feedback"
的按钮,允许用户主动上报本地日志。用户点击此按钮后,日志会通过反馈机制上传到后台。除了通过按钮,用户还可以通过小程序的 反馈与投诉页面 来上报日志。
- 用户选择反馈类型(例如,功能异常)并填写反馈文案,日志会随之上传。
- 开发者可以在 小程序管理后台 中的 用户反馈 > 功能异常 查看用户的反馈信息,并下载相关日志。
🦋2.2 RealtimeLogManager:实时日志管理器**
RealtimeLogManager
主要用于捕获程序中发生的异常并实时上报。这种日志上报方式的优点是能够自动收集并及时上传,而不需要用户主动反馈。因此,它在快速定位线上问题时非常有用。
获取 RealtimeLogManager 对象
通过 wx.getRealtimeLogManager
获取 RealtimeLogManager
对象。
let realtimeManager = wx.getRealtimeLogManager();
上报实时日志
使用 RealtimeLogManager
可以实时上报日志,具体方法如下:
realtimeManager.info("info 信息");
realtimeManager.warn("warn 信息");
realtimeManager.error("error 信息");
info
:上报info
类型的日志。warn
:上报warn
类型的日志。error
:上报error
类型的日志。
这些日志会被实时上传到小程序管理后台,并可以在后台的 开发管理 > 实时日志 中查看。
设置日志过滤关键词
如果希望只上报特定内容的日志,可以使用 setFilterMsg
和 addFilterMsg
来设置日志的过滤关键词。
setFilterMsg
:设置过滤关键词,过滤掉包含这些关键词的日志。addFilterMsg
:添加额外的过滤关键词。
realtimeManager.setFilterMsg("关键词");
realtimeManager.addFilterMsg("附加关键词");
RealtimeLogManager 方法汇总:
方法名 | 参数 | 意义 |
---|---|---|
info |
任意 | 上报 info 类型的实时日志 |
warn |
任意 | 上报 warn 类型的实时日志 |
error |
任意 | 上报 error 类型的实时日志 |
setFilterMsg |
String msg: 关键词 |
设置过滤关键词,过滤不需要的日志 |
addFilterMsg |
String msg: 关键词 |
添加过滤关键词 |
🔎3.小程序性能管控相关接口
随着小程序的用户数量不断增长,性能优化变得尤为重要。微信小程序开发框架提供了丰富的性能监控和调优工具,可以帮助开发者收集和分析小程序的性能数据,从而进行针对性的优化。以下是有关小程序性能管理的一些关键点,包括如何获取性能数据、常见性能事件及其详细属性。
🦋3.1 获取 Performance 对象
在进行性能调优时,首先需要获取当前小程序运行的性能数据。微信小程序提供了 wx.getPerformance()
方法来获取 Performance 对象。
let performance = wx.getPerformance();
通过 Performance 对象,可以获取缓存区中的性能数据,并使用相关接口进行分析。
🦋3.2 Performance 对象的方法
Performance 对象提供了多个方法,用于获取缓存区中的性能数据。以下是常见的接口方法:
方法名 | 参数 | 意义 |
---|---|---|
getEntries() |
无 | 获取缓存区中的所有性能数据,返回一个列表,列表中包含多个性能数据实体对象 PerformanceEntry 。 |
getEntriesByType() |
type (性能数据类型) |
获取某一类型的性能数据,返回一个列表,列表中包含多个性能数据实体对象。 |
getEntriesByName() |
name (数据名称) |
获取指定名称的性能数据,返回一个列表,列表中包含多个性能数据实体对象。 |
createObserver() |
callback (回调函数) |
设置全局性能事件的监听器。 |
setBufferSize() |
size (缓存区大小,默认存储 30 条数据) |
设置缓存区的大小,最多存储指定数量的性能数据。 |
🦋3.3 Performance 对象支持的性能数据类型 (type
)
Performance 对象支持多种不同类型的性能数据,以下是一些常见的性能数据类型及其意义:
type | 意义 |
---|---|
route |
路由性能数据 |
appLaunch |
小程序启动耗时 |
firstRender |
首页首次渲染耗时 |
firstContentfulPaint |
首页首次内容绘制性能数据 |
largestContentfulPaint |
页面最大内容绘制数据 |
evaluateScript |
注入脚本耗时 |
这些类型的数据可以通过调用 getEntriesByType()
方法,并传入相应的 type
参数来获取。
🦋3.4 PerformanceEntry 实例的属性
当我们从 Performance 对象中获取性能数据时,返回的数据对象是 PerformanceEntry
实例。每个 PerformanceEntry
实例封装了性能数据的详细属性,帮助开发者深入分析小程序的性能。以下是 PerformanceEntry
实例的常见属性及其意义:
属性名 | 类型 | 意义 |
---|---|---|
startTime |
数值 | 性能指标的开始时间 |
duration |
数值 | 性能指标的持续时间 |
path |
字符串 | 页面路径 |
referrerPath |
字符串 | 页面跳转来源路径 |
pageId |
数值 | 页面 ID |
navigationStart |
数值 | 路由真正响应的开始时间 |
navigationType |
数值 | 路由的详细类型(例如,正常跳转、回退等) |
moduleName |
字符串 | 分包的名称(适用于分包加载的性能数据) |
fileList |
数组 | 注入的文件列表(例如 JS 脚本文件) |
viewLayerReadyTime |
数值 | 渲染层代码注入完成的时间 |
initDataSendTime |
数值 | 从逻辑层发出的时间(首次渲染的参数) |
initDataRecvTime |
数值 | 渲染层接收到的时间 |
viewLayerRenderStartTime |
数值 | 渲染层开始执行渲染的时间 |
viewLayerRenderEndTime |
数值 | 渲染层执行渲染结束的时间 |
这些属性可以帮助开发者更详细地了解各个环节的性能表现,从而找到性能瓶颈,进行优化。
🦋3.5 性能数据的使用场景
通过上述接口和属性,开发者可以获取到丰富的性能数据,在实际开发中常见的使用场景包括:
- 小程序启动性能:通过
appLaunch
和firstRender
数据,开发者可以分析小程序启动的耗时和首页渲染的性能。 - 路由性能监控:使用
route
数据,可以监控页面跳转的性能,确保路由切换过程流畅。 - 内容绘制性能:
firstContentfulPaint
和largestContentfulPaint
能帮助开发者分析首次内容绘制和最大内容绘制的性能,提升用户体验。 - 脚本执行性能:通过
evaluateScript
数据,可以分析 JS 脚本的执行性能,优化脚本加载和执行速度。 - 渲染层性能:通过
viewLayerRenderStartTime
和viewLayerRenderEndTime
等属性,可以监控渲染层的执行时机,确保页面渲染的流畅度。
🦋3.6 性能优化建议
根据收集到的性能数据,开发者可以采取以下优化策略:
- 减少小程序启动时间:分析
appLaunch
和firstRender
数据,优化初始化逻辑,减少启动时需要加载的资源。 - 优化页面跳转速度:通过
route
数据,优化路由跳转时的资源加载和渲染流程。 - 提升渲染性能:根据
firstContentfulPaint
和largestContentfulPaint
的数据,优化页面渲染过程,减少用户等待时间。 - 脚本加载优化:通过分析
evaluateScript
,优化脚本加载方式(如异步加载、延迟加载等)。 - 减少渲染层负担:通过
viewLayerRenderStartTime
和viewLayerRenderEndTime
等数据,优化渲染层的工作量,减少渲染延迟。
- 点赞
- 收藏
- 关注作者
评论(0)