【愚公系列】《微信小程序与云开发从入门到实践》043-调试与性能相关接口

举报
愚公搬代码 发表于 2024/12/29 11:49:50 2024/12/29
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主等。博客内容.NET、...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,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 结束当前日志分组。

日志等级和输出效果

  1. console.debug
    输出调试日志,通常用于开发调试阶段。输出的日志文本为蓝色。

    console.debug("这是调试日志");
    
  2. console.log
    输出普通日志,是最常用的日志方法,输出的日志为黑色。可以用于一般信息的打印。

    console.log("这是普通日志");
    
  3. console.info
    输出信息类型的日志,通常用于显示一般信息,输出的日志为黑色。

    console.info("这是信息日志");
    
  4. console.warn
    输出警告日志,用于提醒开发者注意一些潜在的问题,输出的日志为黄色。

    console.warn("这是警告日志");
    
  5. console.error
    输出错误日志,用于记录异常或错误信息,输出的日志为红色,通常用于错误处理或异常捕获。

    console.error("这是错误日志");
    
  6. console.group
    用于开启一个新的日志分组,可以为日志分组指定标签,所有后续的日志都将被放入这个分组内,方便查看。

    console.group("分组标签");
    console.log("这是分组内的日志1");
    console.log("这是分组内的日志2");
    
  7. console.groupEnd
    用于结束当前的日志分组。

    console.groupEnd();  // 结束当前的日志分组
    

console.groupconsole.groupEnd 的应用

console.groupconsole.groupEnd 方法非常实用,尤其在日志输出较多时,可以帮助开发者将相关日志分组,避免混乱。

示例

console.group("函数执行过程");

console.log("开始执行函数...");
console.log("函数执行中...");
console.log("函数执行结束");

console.groupEnd();  // 结束分组

在控制台或调试面板中,输出的日志将被分组显示,便于查看和调试。

🔎2.日志管理器与实时日志管理器

在小程序的开发过程中,仅仅依赖 console 相关接口输出日志适用于开发阶段的调试,而一旦小程序发布到线上,面对真实用户时,日志调试的难度和复杂度大大增加。因此,为了能够有效追踪和定位线上问题,微信小程序提供了两种日志管理器:LogManagerRealtimeLogManager。这两种日志管理器主要用于收集和上报线上日志,帮助开发者分析问题、优化应用。

🦋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 类型的日志。

这些日志会被实时上传到小程序管理后台,并可以在后台的 开发管理 > 实时日志 中查看。

设置日志过滤关键词

如果希望只上报特定内容的日志,可以使用 setFilterMsgaddFilterMsg 来设置日志的过滤关键词。

  • 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 性能数据的使用场景

通过上述接口和属性,开发者可以获取到丰富的性能数据,在实际开发中常见的使用场景包括:

  • 小程序启动性能:通过 appLaunchfirstRender 数据,开发者可以分析小程序启动的耗时和首页渲染的性能。
  • 路由性能监控:使用 route 数据,可以监控页面跳转的性能,确保路由切换过程流畅。
  • 内容绘制性能firstContentfulPaintlargestContentfulPaint 能帮助开发者分析首次内容绘制和最大内容绘制的性能,提升用户体验。
  • 脚本执行性能:通过 evaluateScript 数据,可以分析 JS 脚本的执行性能,优化脚本加载和执行速度。
  • 渲染层性能:通过 viewLayerRenderStartTimeviewLayerRenderEndTime 等属性,可以监控渲染层的执行时机,确保页面渲染的流畅度。

🦋3.6 性能优化建议

根据收集到的性能数据,开发者可以采取以下优化策略:

  • 减少小程序启动时间:分析 appLaunchfirstRender 数据,优化初始化逻辑,减少启动时需要加载的资源。
  • 优化页面跳转速度:通过 route 数据,优化路由跳转时的资源加载和渲染流程。
  • 提升渲染性能:根据 firstContentfulPaintlargestContentfulPaint 的数据,优化页面渲染过程,减少用户等待时间。
  • 脚本加载优化:通过分析 evaluateScript,优化脚本加载方式(如异步加载、延迟加载等)。
  • 减少渲染层负担:通过 viewLayerRenderStartTimeviewLayerRenderEndTime 等数据,优化渲染层的工作量,减少渲染延迟。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。