Flutter调试工具插件flutter_stetho的使用

flutter_stetho简介

flutter_stetho是一个通过 Facebook 的 Stetho Android 库将 Flutter 连接到 Chrome 开发者工具的插件。

网络检查器(Network Inspector)

该插件的主要功能之一是网络检查器。它允许你在 Chrome 浏览器中实时查看 Flutter 应用的 HTTP 请求和响应。

开始使用

以下是将 flutter_stetho 插件集成到你的应用中的步骤。

安装插件

在项目的 pubspec.yaml 文件中添加 flutter_stetho 依赖项，并根据你的 Flutter 版本选择正确的版本：

• 对于 Flutter 1.7.x，使用版本 0.3.x
• 对于 Flutter 1.8.x，使用版本 0.4.x
• 对于 Flutter 1.9.x，使用版本 0.5.x

示例配置：

dependencies:
  flutter_stetho: ^0.5.0

运行以下命令安装依赖：

flutter pub get

初始化 StethoHttpOverrides

在应用的主函数中初始化 Stetho，以便启用 Stetho 并让 flutter_stetho 包裹所有的 HTTP 请求，并将信息报告给 Chrome 开发者工具。

注意：建议只在开发环境中（例如 main_dev.dart 文件）进行此操作。

示例代码：

import 'package:flutter_stetho/flutter_stetho.dart';

void main() {
  // 初始化 Stetho
  Stetho.initialize();

  // 启动应用
  runApp(MyApp());
}

在 Android 设备上运行应用

确保你已经连接了 Android 设备或启用了 Android 模拟器，然后运行以下命令启动应用：

flutter run

打开 Chrome 浏览器

打开 Chrome 或 Chromium 浏览器，访问以下地址：

chrome://inspect

你应该会在窗口中看到你的应用出现。

已知问题

以下是一些已知问题及注意事项：

• 时间可能略有偏差：某些请求的时间可能不准确，因为代码尚处于 MVP 阶段，需要改进。
• 动画 GIF 不支持：插件目前不支持动画 GIF。
• 错误处理不足：某些错误情况可能未被正确处理，需要更多测试和反馈来完善。
• 缺少测试：当前版本尚未包含完整的单元测试。
• 启动失败：如果应用在启动时崩溃，请尝试运行以下命令清理旧构建：

  flutter clean
  

示例代码

以下是一个完整的示例代码，展示如何使用 flutter_stetho 来捕获 HTTP 请求。

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

void main() {
  // 初始化 Stetho
  Stetho.initialize();

  // 启动应用
  runApp(FlutterStethoExample());
}

class FlutterStethoExample extends StatelessWidget {
  final http.Client client = http.Client(); // 创建 HTTP 客户端

  // 模拟获取 JSON 数据
  void fetchJson() async {
    await client.get(
      'https://jsonplaceholder.typicode.com/posts/1', // 请求 URL
      headers: {'Authorization': 'token'}, // 设置请求头
    );
  }

  // 模拟获取图片
  void fetchImage() async {
    await client.get(
      'https://flutter.dev/assets/404/dash_nest-c64796b59b65042a2b40fae5764c13b7477a592db79eaf04c86298dcb75b78ea.png',
      headers: {'Authorization': 'token'}, // 设置请求头
    );
  }

  // 模拟获取错误
  void fetchError() async {
    await client.get('https://jsonplaceholder.typicode.com/postadsass/1'); // 错误的 URL
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Stetho 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 按钮：获取 JSON 数据
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: ElevatedButton(
                  onPressed: fetchJson,
                  child: Text("获取 JSON 数据"),
                ),
              ),
              // 按钮：获取图片
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: ElevatedButton(
                  onPressed: fetchImage,
                  child: Text("获取图片"),
                ),
              ),
              // 按钮：触发错误
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: ElevatedButton(
                  onPressed: fetchError,
                  child: Text("触发错误"),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}