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

🚀前言

在小程序的开发过程中，调试与性能优化是确保应用顺畅运行的关键环节。随着功能的不断增加和用户需求的提升，开发者面临着日益复杂的代码和多样化的设备环境，如何有效地进行调试和性能监控，成为了每个开发者必须掌握的技能。

在本篇文章中，我们将深入探讨小程序中与调试与性能相关的接口。我们将介绍常用的调试工具和方法，帮助开发者快速定位问题、优化代码。同时，我们也会讨论如何利用性能监控接口，实时跟踪小程序的运行状态，识别性能瓶颈，从而提升用户体验。

🚀一、调试与性能相关接口

在小程序的开发过程中，对程序进行调试是必不可少的，前面使用日志打印的方式将某些信息输出到控制台就是调试的一种方式，本节将介绍小程序开发框架中有关程序调试的相关接口。对一个小程序来说，性能优劣会直接影响到用户的体验，可以通过一些性能接口来获取程序的运行情况，以方便定位优化的方向。

🔎1.调试相关接口

在微信小程序的开发过程中，调试日志是一个重要的工具，用于帮助开发者追踪和解决问题。通常，开发者会使用 console.log 方法向控制台输出信息，但在正式版或体验版的小程序发布后，无法通过控制台查看日志。因此，微信小程序提供了调试模式和一些日志方法，帮助开发者在不同环境下进行调试和输出日志。

🦋1.1 开启调试模式

在开发者工具中，可以使用 console.log 输出信息，但在小程序的正式版或体验版中，一旦出现异常，无法通过控制台查看日志。为了解决这个问题，微信小程序提供了 wx.setEnableDebug 方法来开启调试模式。

wx.setEnableDebug({
  enableDebug: true  // 设置为true开启调试模式
});

• 开启调试模式后，调试信息将直接展示在小程序的调试面板中。
• 调试面板中会显示日志、页面结构、网络请求等信息，方便开发者进行调试。
• 注意：此方法不仅在开发者工具中有效，也会在正式版和体验版的小程序中生效。

🦋1.2 调试面板的功能

开启调试模式后，小程序界面上会悬浮一个调试按钮。点击此按钮，可以打开调试面板，调试面板提供了如下功能：

• 日志信息：包括不同级别的日志输出。
• 页面结构：显示当前页面的 DOM 结构。
• 网络请求：查看接口请求的详情。

日志输出方法：等级区分与使用

微信小程序提供了多种日志输出方法，可以帮助开发者根据日志的类型进行分类输出。下面是常用的日志方法及其详细说明：

常用日志方法

日志等级和输出效果

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

console.debug("这是调试日志");

1. console.logundefined输出普通日志，是最常用的日志方法，输出的日志为黑色。可以用于一般信息的打印。

console.log("这是普通日志");

1. console.infoundefined输出信息类型的日志，通常用于显示一般信息，输出的日志为黑色。

console.info("这是信息日志");

1. console.warnundefined输出警告日志，用于提醒开发者注意一些潜在的问题，输出的日志为黄色。

console.warn("这是警告日志");

1. console.errorundefined输出错误日志，用于记录异常或错误信息，输出的日志为红色，通常用于错误处理或异常捕获。

console.error("这是错误日志");

1. console.groupundefined用于开启一个新的日志分组，可以为日志分组指定标签，所有后续的日志都将被放入这个分组内，方便查看。

console.group("分组标签");
console.log("这是分组内的日志1");
console.log("这是分组内的日志2");

1. console.groupEndundefined用于结束当前的日志分组。

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 对象后，可以调用以下方法来记录不同类型的日志。每个日志类型的写入方法如下表所示：

日志存储与限制

• 单条日志大小限制：每条日志的大小不能超过 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 方法汇总：

🔎3.小程序性能管控相关接口

随着小程序的用户数量不断增长，性能优化变得尤为重要。微信小程序开发框架提供了丰富的性能监控和调优工具，可以帮助开发者收集和分析小程序的性能数据，从而进行针对性的优化。以下是有关小程序性能管理的一些关键点，包括如何获取性能数据、常见性能事件及其详细属性。

🦋3.1 获取 Performance 对象

在进行性能调优时，首先需要获取当前小程序运行的性能数据。微信小程序提供了 wx.getPerformance() 方法来获取 Performance 对象。

let performance = wx.getPerformance();

通过 Performance 对象，可以获取缓存区中的性能数据，并使用相关接口进行分析。

🦋3.2 Performance 对象的方法

Performance 对象提供了多个方法，用于获取缓存区中的性能数据。以下是常见的接口方法：

🦋3.3 Performance 对象支持的性能数据类型 (type)

Performance 对象支持多种不同类型的性能数据，以下是一些常见的性能数据类型及其意义：

这些类型的数据可以通过调用 getEntriesByType() 方法，并传入相应的 type 参数来获取。

🦋3.4 PerformanceEntry 实例的属性

当我们从 Performance 对象中获取性能数据时，返回的数据对象是 PerformanceEntry 实例。每个 PerformanceEntry 实例封装了性能数据的详细属性，帮助开发者深入分析小程序的性能。以下是 PerformanceEntry 实例的常见属性及其意义：

这些属性可以帮助开发者更详细地了解各个环节的性能表现，从而找到性能瓶颈，进行优化。

🦋3.5 性能数据的使用场景

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

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

🦋3.6 性能优化建议

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

• 减少小程序启动时间：分析 appLaunch 和 firstRender 数据，优化初始化逻辑，减少启动时需要加载的资源。
• 优化页面跳转速度：通过 route 数据，优化路由跳转时的资源加载和渲染流程。
• 提升渲染性能：根据 firstContentfulPaint 和 largestContentfulPaint 的数据，优化页面渲染过程，减少用户等待时间。
• 脚本加载优化：通过分析 evaluateScript，优化脚本加载方式（如异步加载、延迟加载等）。
• 减少渲染层负担：通过 viewLayerRenderStartTime 和 viewLayerRenderEndTime 等数据，优化渲染层的工作量，减少渲染延迟。