跳到主要内容

调试指南

概述​

本文档详细介绍了邮轮穿舱件管理系统-小程序端的调试功能、错误日志查看以及开发工具使用技巧。调试页面是开发过程中重要的辅助工具，提供了存储管理、网络状态监控、Mock数据切换等功能。

调试页面功能详解​

1. 存储与状态概览​

调试页面的核心功能之一是存储状态监控，通过可视化界面展示小程序本地存储的详细信息。

功能特性​

  • 存储统计：显示当前存储键值对数量、已使用空间和总空间限制
  • 网络状态：实时监控网络连接状态和类型
  • Token管理：查看和复制用户认证令牌
flowchart TD
    A[用户进入调试页面] --> B[加载存储信息]
    B --> C[获取网络状态]
    C --> D[显示概览信息]
    D --> E[等待用户操作]
    E --> F{用户操作类型}
    F -->|刷新| B
    F -->|清空缓存| G[清空所有存储]
    F -->|复制Token| H[复制Token到剪贴板]
    G --> B
    H --> E

核心代码实现​

2. 调试设置管理​

调试页面提供灵活的调试配置选项，支持开发过程中的快速切换。

Mock数据功能​

  • 启用/禁用控制：通过开关控制是否使用模拟数据
  • 本地存储：设置状态保存在本地存储中，页面刷新后保持
  • 实时切换：无需重启应用即可生效

详细日志功能​

  • 控制台输出：控制是否在控制台输出详细调试信息
  • 开发辅助：帮助开发者追踪代码执行流程
sequenceDiagram
    participant U as 用户
    participant D as 调试页面
    participant S as 本地存储
    participant C as 控制台
    
    U->>D: 点击调试设置开关
    D->>S: 保存设置状态
    S-->>D: 存储成功
    D->>D: 更新页面状态
    D->>C: 根据设置输出日志
    D-->>U: 显示操作结果

相关代码文件​

3. 存储键值管理​

调试页面提供完整的本地存储管理功能，支持查看、编辑、复制和删除操作。

键值列表功能​

  • 展开/收起：点击条目可展开查看完整值
  • 实时编辑：支持直接修改存储值并保存
  • 批量操作：支持复制和删除单个键值对

操作流程​

stateDiagram-v2
    [*] --> 列表收起
    列表收起 --> 列表展开: 点击条目
    列表展开 --> 列表收起: 再次点击
    
    列表展开 --> 编辑模式: 修改输入框
    编辑模式 --> 保存成功: 点击保存
    编辑模式 --> 编辑取消: 点击其他区域
    
    列表展开 --> 复制操作: 点击复制
    列表展开 --> 删除操作: 点击删除
    
    保存成功 --> 列表收起
    复制操作 --> 列表展开
    删除操作 --> 列表收起

实现代码​

4. 接口检查功能​

调试页面集成API接口测试功能，支持实时请求和Mock数据回退机制。

接口测试流程​

  1. 发起请求：点击"请求"按钮调用真实API
  2. 成功处理：显示接口返回数据
  3. 失败回退：网络异常时自动使用Mock数据
  4. 结果展示：清晰显示请求结果状态
flowchart LR
    A[接口请求] --> B{请求成功?}
    B -->|是| C[显示真实数据]
    B -->|否| D[使用Mock数据]
    C --> E[显示成功提示]
    D --> F[显示Mock提示]
    E --> G[完成]
    F --> G

核心实现​

错误日志查看​

errors.log文件说明​

项目根目录下的errors.log文件用于记录系统运行过程中的错误信息。

日志记录机制​

  • 自动记录：系统异常时自动写入日志
  • 错误分类：按错误类型和时间戳组织
  • 便于排查：提供详细的错误上下文信息

日志格式示例​

[2024-01-15 10:30:25] ERROR: API请求失败 - /miniapp/user/userProfile
[2024-01-15 10:31:10] WARNING: 网络连接异常

日志查看方法​

开发工具查看​

  1. 打开微信开发者工具
  2. 在项目文件树中找到errors.log
  3. 双击打开查看日志内容

实时监控技巧​

  • 使用tail -f errors.log命令实时监控日志变化
  • 结合控制台输出进行综合调试

开发工具使用技巧​

1. 微信开发者工具调试技巧​

网络面板使用​

  • 请求监控：在Network面板查看所有API请求
  • 性能分析：使用Performance面板分析页面性能
  • 存储查看：通过Storage面板直接查看本地存储

断点调试​

// 在关键代码处设置断点
debugger;
// 或使用console.log进行日志输出
console.log('调试信息:', data);

2. 代码调试最佳实践​

条件调试​

// 开发环境专用调试代码
if (process.env.NODE_ENV === 'development') {
    console.log('调试信息:', data);
}

错误捕获​

try {
    // 业务代码
    const result = await request('/api/endpoint');
} catch (error) {
    console.error('API调用失败:', error);
    // 记录到错误日志
}

3. 性能优化调试​

内存泄漏检测​

  • 使用Memory面板监控内存使用情况
  • 定期检查事件监听器的正确移除
  • 监控定时器的合理清理

渲染性能优化​

  • 减少不必要的setData调用
  • 使用虚拟列表优化长列表渲染
  • 合理使用图片懒加载

系统架构依赖关系​

flowchart TD
    subgraph 调试页面模块
        A[Debug Page] --> B[Storage Manager]
        A --> C[Network Monitor]
        A --> D[API Tester]
        A --> E[Settings Manager]
    end
    
    subgraph 核心服务层
        B --> F[wx.storage API]
        C --> G[wx.network API]
        D --> H[Request Module]
    end
    
    subgraph 数据层
        F --> I[Local Storage]
        G --> J[Network Status]
        H --> K[Backend API]
    end
    
    E --> L[Debug Settings]
    L --> I

索引​

调试页面为开发人员提供了全面的调试工具集，包括存储管理、网络监控、接口测试等功能。结合errors.log错误日志和微信开发者工具的高级功能，可以显著提高开发效率和问题排查能力。

关键要点：

  • 充分利用调试页面的可视化工具进行问题定位
  • 定期查看errors.log文件了解系统运行状态
  • 掌握微信开发者工具的高级调试技巧
  • 遵循代码调试最佳实践确保开发质量

通过本文档的介绍，开发人员可以更有效地使用调试工具，快速定位和解决开发过程中遇到的问题。