Flutter for OpenHarmony 实战：Pretty Dio Logger — 网络请求监控利器

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

前言

在进行 Flutter for OpenHarmony 开发时，网络请求的联调占据了开发者相当一部分精力。默认的日志输出（如 print 或 debugPrint）通常杂乱无章，难以快速分辨 Request Headers、Query Parameters 与复杂的 JSON 响应体。

Pretty Dio Logger 是一款极其出色的 Dio 中间件，它能将每一次网络交互以整齐的"框体"样式垂直打印在控制台。本文将带你掌握在鸿蒙系统上配置美化日志的各种技巧，并构建一个工业级的网络调试服务。

一、为什么需要日志美化？

1.1 提升联调效率 🚀

传统的控制台输出往往因为长文本自动换行而导致 JSON 结构错乱。美化插件通过对齐边界线（Box Drawing Characters），让开发者能像阅读文档一样直观地查阅数据。

1.2 减少肉眼校验错误

对比手动查阅乱序的日志，格式化后的输出能瞬间暴露"字段类型不匹配"或"404 路径错误"等细节。

二、配置环境 📦

在项目的 pubspec.yaml 中，我们需要引入 dio 及其配套的美化插件。

yaml 复制代码

dependencies:
  dio: ^5.4.0
  pretty_dio_logger: ^1.3.1

💡 技巧：建议配合 path_provider 使用，以便在鸿蒙真机上需要将日志导出到文件时使用。

三、核心功能：3 个场景化进阶用法

3.1 极简全能配置 (Standard)

这是最通用的配置，涵盖了从 URL 到 Response Body 的所有信息，适合 90% 的鸿蒙开发场景。

dart 复制代码

import 'package:dio/dio.dart';
import 'package:pretty_dio_logger/pretty_dio_logger.dart';

final dio = Dio();
dio.interceptors.add(PrettyDioLogger(
  requestHeader: true, // 打印请求头
  requestBody: true,   // 打印请求体
  responseBody: true,  // 打印响应体
  responseHeader: false, // 响应头通常较长且重复，建议关闭
  compact: true,      // 紧凑模式，减少空白行
));

3.2 专注于 Body 的差异化调试

当你的鸿蒙 App 频繁上报埋点数据时，Headers 可能会干扰视线。我们可以动态裁剪。

dart 复制代码

dio.interceptors.add(PrettyDioLogger(
  requestHeader: false,
  maxWidth: 80, // 根据鸿蒙模拟器宽度限制日志宽度
  logPrint: (object) => debugPrint(object as String?), // 💡 技巧：使用 debugPrint 避免过长行被鸿蒙日志系统截断
));

3.3 生产环境的"静默预警"

在鸿蒙 Release 版中，我们不应当打印完整日志，但对于 500 等关键错误，仍需保留精简记录。

dart 复制代码

dio.interceptors.add(PrettyDioLogger(
  error: true,      // 仅保留错误打印
  request: false,   // 正常请求静默
  responseBody: false,
));

四、OpenHarmony 平台适配指南

针对鸿蒙系统的特殊运行环境，日志展示有以下特定优化：

4.1 终端宽度适配 🖥️

⚠️ 注意：在鸿蒙的 DevEco Studio 底部控制台中，默认字体宽度可能与 VS Code 不同。

✅ 建议 ：设置 maxWidth: 90。过大的宽度会导致边界线错位，反而降低可读性。

4.2 日志长度限制的处理

鸿蒙系统的 HiLog 或默认控制台对单条消息的字数有上限（通常是 2048 或 4096 字节）。

💡 技巧：Pretty Dio Logger 会自动将长 JSON 切碎分次打印，这正好规避了鸿蒙日志截断的问题。

五、完整实战示例：鸿蒙级环境感知的网络客户端

我们将封装一个高度解耦的 OhosHttpClient。它能根据应用当前是 Debug 还是 Release 模式，自动决定是否加载美工日志拦截器，并优化鸿蒙下的请求超时体验。

dart 复制代码

import 'package:dio/dio.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:pretty_dio_logger/pretty_dio_logger.dart';

class OhosHttpClientPage extends StatefulWidget {
  const OhosHttpClientPage({super.key});

  @override
  State<OhosHttpClientPage> createState() => _OhosHttpClientPageState();
}

class _OhosHttpClientPageState extends State<OhosHttpClientPage> {
  late Dio _dio;
  String _result = '等待操作...';

  @override
  void initState() {
    super.initState();
    _dio = Dio(
      BaseOptions(
        baseUrl: 'https://jsonplaceholder.typicode.com',
        connectTimeout: const Duration(seconds: 15),
        headers: {
          'User-Agent':
              'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
        },
      ),
    );

    // 💡 关键实战：仅在 Debug 模式启用美化日志
    if (kDebugMode) {
      _dio.interceptors.add(
        PrettyDioLogger(
          requestHeader: true,
          requestBody: true,
          maxWidth: 88,
        ),
      );
    }
  }

  Future<void> _runTask() async {
    setState(() => _result = '正在执行环境感知请求...');
    try {
      final resp = await _dio.get('/users/1');
      setState(() => _result = "获取用户: ${resp.data['name']}\n(日志已在控制台格式化)");
    } catch (e) {
      setState(() => _result = '任务失败');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('鸿蒙环境感知客户端')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          children: [
            const Card(
              child: ListTile(
                leading: Icon(Icons.security, color: Colors.green),
                title: Text('kDebugMode 自动适配'),
                subtitle: Text('Release 环境下会自动移除拦截器，确保性能与安全。'),
              ),
            ),
            const SizedBox(height: 40),
            Text(_result, textAlign: TextAlign.center),
            const Spacer(),
            ElevatedButton.icon(
              onPressed: _runTask,
              icon: const Icon(Icons.rocket_launch),
              label: const Text('执行实战网络任务'),
            ),
          ],
        ),
      ),
    );
  }
}

六、总结

Pretty Dio Logger 是提升 Flutter for OpenHarmony 开发幸福感的低投入、高产出利器。它不仅让枯燥的 JSON 数据变得"悦目"，更能帮助团队在初期联调中节省 30% 以上的纠错时间。

如果你正在构建复杂的鸿蒙应用，请务必将其作为网络层的标配组件。

🌐 欢迎加入开源鸿蒙跨平台社区 ：开源鸿蒙跨平台开发者社区