Flutter调试工具插件 leancode_debug_page 的使用

leancode_debug_page 是一个用于收集和展示 HTTP 请求和日志的调试页面插件。它可以帮助开发者更方便地查看应用中的网络请求和日志信息，从而加快调试过程。

主要功能

• 详细信息展示：提供详细的请求（请求、响应）和日志信息。
• 过滤功能：
  • 按状态码或搜索词过滤请求。
  • 按日志级别或搜索词过滤日志。
• 分享功能：可以分享所有日志/请求或单独的条目。
• 灵活的入口点配置：
  • 可拖动的悬浮按钮。
  • 设备摇晃触发（默认开启）。

界面截图

请求列表

请求详情

日志列表

使用方法

基本用法

要使用 leancode_debug_page，您只需将您的 MaterialApp 包装在 DebugPageOverlay 中，并提供一个 DebugPageController。DebugPageController 需要一个 LoggingHttpClient，它是 http 包中 Client 的包装器，允许您在此处实现自定义客户端。

import 'package:flutter/material.dart';
import 'package:leancode_debug_page/leancode_debug_page.dart';
import 'package:http/http.dart' as http;

class MyApp extends StatefulWidget {
  const MyApp({
    super.key,
    required this.loggingHttpClient,
  });

  final LoggingHttpClient loggingHttpClient;

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late DebugPageController _debugPageController;

  @override
  void initState() {
    super.initState();

    _debugPageController = DebugPageController(
      showEntryButton: true, // 显示悬浮按钮
      loggingHttpClient: widget.loggingHttpClient,
    );
  }

  @override
  Widget build(BuildContext context) {
    return DebugPageOverlay(
      controller: _debugPageController,
      child: MaterialApp(
        title: 'Debug Page Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: MyHomePage(
          title: 'Flutter Debug Page Demo Page',
          loggingHttpClient: widget.loggingHttpClient,
        ),
      ),
    );
  }

  @override
  void dispose() {
    _debugPageController.dispose();
    super.dispose();
  }
}

示例代码

以下是一个完整的示例，展示了如何使用 leancode_debug_page 插件：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:leancode_debug_page/leancode_debug_page.dart';
import 'package:logging/logging.dart';

void main() {
  final loggingHttpClient = LoggingHttpClient();

  runApp(MyApp(loggingHttpClient: loggingHttpClient));
}

class MyApp extends StatefulWidget {
  const MyApp({
    super.key,
    required this.loggingHttpClient,
  });

  final LoggingHttpClient loggingHttpClient;

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late DebugPageController _debugPageController;

  @override
  void initState() {
    super.initState();

    _debugPageController = DebugPageController(
      showEntryButton: true,
      loggingHttpClient: widget.loggingHttpClient,
    );
  }

  @override
  Widget build(BuildContext context) {
    return DebugPageOverlay(
      controller: _debugPageController,
      child: MaterialApp(
        title: 'Debug Page Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: MyHomePage(
          title: 'Flutter Debug Page Demo Page',
          loggingHttpClient: widget.loggingHttpClient,
        ),
      ),
    );
  }

  @override
  void dispose() {
    _debugPageController.dispose();
    super.dispose();
  }
}

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

  final String title;
  final LoggingHttpClient loggingHttpClient;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _logger = Logger('MyHomePage');

  static final _requests = [
    http.Request('GET', Uri.parse('https://leancode.co/manifest.json')),
    http.Request('GET', Uri.parse('https://leancode.co/api/job-titles')),
    http.Request(
      'GET',
      Uri.parse('https://leancodelanding2.cdn.prismic.io/api/v2'),
    ),
    http.Request('GET', Uri.parse('https://leancode.co')),
    http.Request('POST', Uri.parse('https://leancode.co'))
      ..body = {'some key': 'some value'}.toString(),
    http.Request('GET', Uri.parse('https://leancode.co/non-existing-path')),
  ];

  Future<void> _sendRequest() async {
    final randomIndex = Random().nextInt(_requests.length);
    final request = copyRequest(_requests[randomIndex]);
    final response = await widget.loggingHttpClient.send(request);

    await http.Response.fromStream(response);

    if (response.statusCode < 400) {
      _logger.info('Received a response from remote server (${response.statusCode})');
    } else {
      _logger.severe('Request failed with status code ${response.statusCode}');
    }

    if (randomIndex % 3 == 0) {
      _logger.info('Some very long log' * 100);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => showDialog(
                  context: context,
                  builder: (context) => const Dialog(
                    child: Padding(
                      padding: EdgeInsets.all(24),
                      child: Text('Some dialog'),
                    ),
                  ),
                ),
                child: const Text('Show a dialog'),
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  Overlay.of(context).insert(
                    OverlayEntry(
                      opaque: true,
                      builder: (context) => Container(
                        color: Colors.red,
                        alignment: Alignment.center,
                        child: const Material(
                          color: Colors.transparent,
                          child: Text(
                            'Overlay',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 24,
                            ),
                          ),
                        ),
                      ),
                    ),
                  );
                },
                child: const Text('Show an overlay'),
              ),
            ],
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
      floatingActionButton: FloatingActionButton.extended(
        label: const Text('Send request'),
        icon: const Icon(Icons.send),
        tooltip: 'Send a request',
        onPressed: _sendRequest,
      ),
    );
  }
}

入口点配置

您可以通过设置 DebugPageController 构造函数中的 showEntryButton（默认为 false）和 showOnShake（默认为 true）标志来配置调试页面的入口点。

注意事项

该插件依赖于监听 Logger.root 来收集日志。这意味着修改 Logger.root.level 会影响插件的行为，并且日志仅从当前隔离区收集。

希望这个指南能帮助您快速上手 leancode_debug_page 插件。更多详细信息和完整示例请参考 官方示例。