用 `alice` 来检查 Flutter 中的 HTTP 调用

欢迎关注我的公众号:OpenFlutter,感恩

软件包 :alice

在你的 Flutter 应用中调试网络行为变得容易多了。Alice 是一个实时 HTTP 检查器,它让你可以在应用内部就能看到每一个请求的细节。

Alice 是什么?

Alice 是一个 Flutter 软件包,它能捕获并以用户友好的界面展示 HTTP 请求和响应。它支持主流的 Dart HTTP 客户端------比如 dio、Dart 自带的 HttpClient、http 包,以及 chopper,甚至也支持通用的处理程序。它的灵感来源于原生 Android 开发中使用的 Chuck 和 Chucker 这类工具。

为什么使用 alice?

  • 应用内检查: 无需离开你的应用,就能查看请求、响应、头部信息、状态码等等。
  • 支持多种 HTTP 客户端: 无论你用的是 dio、http 还是 chopper,Alice 都能兼容。
  • 方便的 UI 触发方式: 可以通过摇动设备或通知浮层来打开检查器。
  • 丰富的功能: 可以搜索捕获的请求、查看统计信息、日志,甚至保存数据以供日后查看。

安装与设置

1. 添加到 pubspec.yaml:

yaml 复制代码
dependencies:
  alice: ^0.4.2

2. 在你的app中初始化:

dart 复制代码
import 'package:alice/alice.dart';

final alice = Alice(
  showNotification: true,
  showInspectorOnShake: true,
);

3. 附加导航键:

dart 复制代码
MaterialApp(  
navigatorKey: alice.getNavigatorKey(),  
// ...  
);

4. 关联你的 HTTP 客户端:

用 Dio:

dart 复制代码
dio.interceptors.add(alice.getDioInterceptor());

用 http 包或 HttpClient:

使用 onHttpResponse() 或扩展方法来捕获请求。

实际用例

  • 通过实时网络日志,快速调试那些 API 调用多的界面。
  • 在 QA 测试期间记录请求------自己打开 Alice 就能看到到底发生了什么。
  • 无需借助外部工具,就能检查认证流程、错误响应或有效载荷的格式。

最后的想法

有了 Alice,你无需离开自己的应用,就能了解网络逻辑是如何运行的。它就像是把 Charles 或 Postman 内置到了你的 Flutter 应用中,专为开发者量身打造。如果你经常处理 API,这个工具能为你省去无数次猜测和手动记录日志的时间。

告别猜测------用 Alice 实时洞察 HTTP 行为。

相关推荐
review44543几秒前
拿到 codex 第一步
前端·agent·vibecoding
鶴哥只手遮天11 分钟前
jQuery 4.0 源码架构与工程实践-第 01 章 · 全景与工程结构:一个 20 岁库的自省
前端·javascript·jquery
徐小夕28 分钟前
doc2docx方案,开源!
前端·vue.js·github
徐小夕33 分钟前
JitOFD:一款面向信创与档案场景的 Web 端 OFD 编辑器
前端·vue.js·github
孟健1 小时前
Kimi K3.1 Pro 编程实测:3个月27万行代码,每年1.7万预算下如何9分钟修好顽固Bug
前端·开源·ai编程
inksci1 小时前
在线编辑表格,功能强大,json互转
前端·javascript·html
咩咩啃树皮2 小时前
JavaScript 中 this 指向为什么总在变?
开发语言·前端·javascript
彭亚川Allen2 小时前
从零手搓 RAG 之 Embedding 技术
前端·后端·面试
OpenTiny社区2 小时前
GenUI SDK v1.4.0 的 React 渲染器到底做对了什么?
前端·github·ai编程
jerrywus3 小时前
chrome-devtools-mcp 总弹授权、抢标签页?我是这样一步步配好的
前端·agent·mcp