Flutter性能监控插件ume_kit_monitor的使用

UME Kit Monitor 是一个用于 Flutter 的调试工具包，提供了网络请求日志记录、控制台输出、页面跟踪等调试功能。它集成了 flutter_ume_plus 以提供一个易于使用的调试界面。

I. 安装与设置

1. 添加依赖到 pubspec.yaml

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ume_kit_monitor: ^2.0.5

dev_dependencies:
  flutter_ume_plus: ^4.0.0
  flutter_ume_kit_ui_plus: ^4.0.0 
  flutter_ume_kit_device_plus: ^4.0.0
  flutter_ume_kit_perf_plus: ^4.0.0
  flutter_ume_kit_show_code_plus: ^4.0.0
  flutter_ume_kit_console_plus: ^4.0.0

2. 注册插件在 main.dart

在 main.dart 文件中注册插件：

import 'package:flutter/material.dart';
import 'package:flutter_ume_plus/flutter_ume_plus.dart';
import 'package:ume_kit_monitor/ume_kit_monitor.dart';

void main() {
  PluginManager.instance
    ..register(const MonitorPlugin())
    ..register(const MonitorActionsPlugin());

  runApp(const UMEWidget(
    enable: true,
    child: MyApp(),
  ));
}

3. 初始化监控器

在你的应用中初始化监控器：

import 'package:flutter/material.dart';
import 'package:ume_kit_monitor/ume_kit_monitor.dart';

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化监控器
    Monitor.init(
      context,
      actions: [
        MonitorActionWidget(
          title: "Debug",
          onTap: () { /* ... */ }
        ),
      ],
    );

    // 输出一些数据
    Monitor.instance.putsConsole(["App started"]);
    Monitor.instance.put('CustomTag', 'Debug info');
    Monitor.instance.putPage('HomePage');
  }
}

II. 核心功能

1. 控制台日志

将日志输出到控制台面板：

Monitor.instance.putsConsole(["Log message"]);

2. 网络请求日志

自动记录网络请求，方便调试：

Monitor.instance.putCurl("curl command");

3. JSON响应查看器

记录并查看JSON响应：

Monitor.instance.put('Response', 'api_name\n$jsonString');

4. 页面跟踪

自动跟踪当前页面或路由：

Monitor.instance.putPage("CurrentPage");

5. 自定义标签监控

创建自定义监控面板：

Monitor.instance.put('CustomTag', 'Custom debug info');

6. GetX生命周期监控

自动跟踪GetX小部件的生命周期（如果启用）：

// 自动跟踪GetX小部件的生命周期

III. API 参考

1. Monitor 类

初始化

Monitor.init(context, actions: [...]);

核心日志方法

Monitor.instance.put(String tag, String content);
Monitor.instance.puts(String tag, List<String> contents); 
Monitor.instance.putsConsole(List<String> contents);
Monitor.instance.putPage(String page);
Monitor.instance.putCurl(String curl);

// 清除日志
Monitor.instance.clear(String tag);

2. MonitorActionWidget

MonitorActionWidget({
  required String title,
  required VoidCallback onTap,
})

IV. 使用示例

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_ume_plus/flutter_ume_plus.dart';
import 'package:ume_kit_monitor/ume_kit_monitor.dart';

void main() {
  PluginManager.instance
    ..register(const MonitorPlugin())
    ..register(const MonitorActionsPlugin())
    ..register(const WidgetInfoInspector())
    ..register(const WidgetDetailInspector())
    ..register(const ColorSucker())
    ..register(AlignRuler())
    ..register(const ColorPicker())
    ..register(const TouchIndicator())
    ..register(Performance())
    ..register(const ShowCode())
    ..register(const MemoryInfoPage())
    ..register(CpuInfoPage())
    ..register(const DeviceInfoPanel())
    ..register(Console());

  runApp(const UMEWidget(enable: true, child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      Monitor.init(
        context,
        actions: [
          MonitorActionWidget(title: "DebugPage", onTap: () {}),
          MonitorActionWidget(title: "Dialog Page", onTap: () {}),
          MonitorActionWidget(title: "Test Page", onTap: () {}),
        ],
        forceInit: true,
      );
      Monitor.instance.putsConsole(["当前Ids：....."]);
      Monitor.instance.put('AesDecode', 'testApi\n$jsonString');
      Monitor.instance.put('Response', 'testApi\n$jsonString');
      Monitor.instance.put('json', 'testApi\n$jsonString');
      Monitor.instance.put('test', 'here is a demo');
    });
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}