256 lines
7.6 KiB
Markdown
256 lines
7.6 KiB
Markdown
# YX 网络检查器示例应用
|
||
|
||
这是一个完整的示例应用，展示了 YX Net Inspector 的所有功能和使用方法。
|
||
|
||
## 🚀 功能展示
|
||
|
||
### 📱 应用结构
|
||
|
||
示例应用包含三个主要页面：
|
||
|
||
1. **功能演示页面** - 展示各种网络请求模拟
|
||
2. **Dio 集成页面** - 演示 Dio 拦截器的使用
|
||
3. **设置页面** - 配置检查器的各种选项
|
||
|
||
### ✨ 主要功能
|
||
|
||
#### 🎯 功能演示页面
|
||
- **网络请求统计** - 实时显示发送的请求数量
|
||
- **真实API端点测试** - 使用真实的开放API进行测试
|
||
- **JSONPlaceholder API** - 用户列表、文章列表、创建文章、更新用户、删除用户
|
||
- **Cat Facts API** - 获取随机猫咪事实
|
||
- **HTTPBin API** - HTTP测试、IP地址、用户代理、错误状态码
|
||
- **ReqRes API** - 用户信息获取
|
||
- **快速操作**
|
||
- 随机请求 - 发送随机类型的真实网络请求
|
||
- 批量请求 - 同时发送多个真实请求
|
||
- 错误请求 - 使用HTTPBin测试各种错误状态码
|
||
- **批量测试** - 测试大量真实请求的性能和内存管理
|
||
- **使用提示** - 详细的操作指导
|
||
|
||
#### 🔌 Dio 集成页面
|
||
- **安装指南** - 详细的 Dio 安装和配置步骤
|
||
- **代码示例** - 完整的集成代码示例
|
||
- **功能特性** - Dio 拦截器的所有功能说明
|
||
- **模拟演示** - 在没有 Dio 的情况下模拟拦截器行为
|
||
|
||
#### ⚙️ 设置页面
|
||
- **检查器状态** - 显示当前的网络请求统计
|
||
- **悬浮球设置**
|
||
- 显示/隐藏悬浮球
|
||
- 调整悬浮球大小 (40-100px)
|
||
- 选择悬浮球颜色
|
||
- 启用/禁用拖拽功能
|
||
- 显示/隐藏数量徽章
|
||
- 自动隐藏选项
|
||
- **日志设置**
|
||
- 配置最大日志数量 (100-5000)
|
||
- 查看当前日志数量
|
||
- **主题设置**
|
||
- 自定义主色调
|
||
- 配置成功/错误/警告颜色
|
||
- **操作功能**
|
||
- 应用设置
|
||
- 重置为默认设置
|
||
- 导出日志
|
||
- 清空所有日志
|
||
- **详细统计**
|
||
- 各种HTTP方法的请求数量
|
||
- 平均响应时间
|
||
- 最近请求时间
|
||
|
||
## 🎨 界面特色
|
||
|
||
### 现代化设计
|
||
- **Material Design 3** - 遵循最新的Material设计规范
|
||
- **卡片布局** - 清晰的信息分组和层次
|
||
- **响应式设计** - 适配不同屏幕尺寸
|
||
- **动画效果** - 流畅的交互动画
|
||
|
||
### 用户体验
|
||
- **直观导航** - 底部导航栏快速切换页面
|
||
- **实时反馈** - SnackBar 消息提示
|
||
- **状态指示** - 加载状态和进度显示
|
||
- **帮助提示** - 详细的使用说明和提示
|
||
|
||
### 颜色系统
|
||
- **蓝色主题** - 专业的蓝色配色方案
|
||
- **语义化颜色** - 成功(绿色)、警告(橙色)、错误(红色)
|
||
- **自定义主题** - 支持主题色彩自定义
|
||
|
||
## 🌐 使用的真实API
|
||
|
||
示例应用集成了多个优质的免费开放API，提供真实的网络请求体验：
|
||
|
||
### 🔗 API 服务商
|
||
|
||
#### JSONPlaceholder (jsonplaceholder.typicode.com)
|
||
- **用途**: REST API 测试
|
||
- **端点**:
|
||
- `GET /users` - 获取用户列表
|
||
- `GET /posts` - 获取文章列表
|
||
- `POST /posts` - 创建新文章
|
||
- `PUT /users/2` - 更新用户信息
|
||
- `DELETE /users/2` - 删除用户
|
||
- **特点**: 返回真实的JSON数据结构，支持所有HTTP方法
|
||
|
||
#### HTTPBin (httpbin.org)
|
||
- **用途**: HTTP 请求测试工具
|
||
- **端点**:
|
||
- `GET /json` - 返回JSON测试数据
|
||
- `GET /ip` - 获取客户端IP地址
|
||
- `GET /user-agent` - 获取用户代理信息
|
||
- `GET /status/{code}` - 返回指定的HTTP状态码
|
||
- **特点**: 专门用于测试HTTP请求的各种场景
|
||
|
||
#### ReqRes (reqres.in)
|
||
- **用途**: REST API 模拟服务
|
||
- **端点**:
|
||
- `GET /api/users/2` - 获取单个用户信息
|
||
- `PUT /api/users/2` - 更新用户信息
|
||
- `DELETE /api/users/2` - 删除用户
|
||
- **特点**: 提供真实的API响应格式，支持分页
|
||
|
||
#### Cat Facts API (catfact.ninja)
|
||
- **用途**: 有趣的猫咪事实
|
||
- **端点**:
|
||
- `GET /fact` - 获取随机猫咪事实
|
||
- **特点**: 轻量级API，返回有趣的内容
|
||
|
||
### 🎯 真实API的优势
|
||
|
||
1. **真实网络延迟** - 体验真实的网络请求时间
|
||
2. **真实响应数据** - 查看实际的API响应格式
|
||
3. **网络错误处理** - 体验真实的网络异常情况
|
||
4. **HTTP状态码** - 测试各种HTTP状态码的处理
|
||
5. **请求头信息** - 查看完整的HTTP请求头
|
||
6. **响应头信息** - 分析真实的HTTP响应头
|
||
|
||
### 🚀 网络测试场景
|
||
|
||
- **成功请求** - 体验200, 201等成功状态码
|
||
- **客户端错误** - 测试400, 401, 403, 404等错误
|
||
- **服务器错误** - 模拟500, 502, 503等服务器问题
|
||
- **网络超时** - 在网络不稳定时观察超时处理
|
||
- **大数据量** - 通过批量请求测试性能
|
||
|
||
## 🛠 技术实现
|
||
|
||
### 代码结构
|
||
```
|
||
example/
|
||
├── lib/
|
||
│ ├── main.dart # 应用入口和主页面
|
||
│ └── pages/
|
||
│ ├── demo_page.dart # 功能演示页面
|
||
│ ├── dio_demo_page.dart # Dio 集成演示
|
||
│ └── settings_page.dart # 设置页面
|
||
└── README.md # 本文档
|
||
```
|
||
|
||
### 核心功能
|
||
- **网络请求模拟** - 使用 YxNetInspectorController 手动记录日志
|
||
- **状态管理** - 使用 StatefulWidget 管理页面状态
|
||
- **数据持久化** - 演示配置的保存和加载
|
||
- **错误处理** - 完善的异常处理机制
|
||
|
||
## 📖 使用指南
|
||
|
||
### 快速开始
|
||
|
||
1. **运行示例应用**
|
||
```bash
|
||
cd example
|
||
flutter run
|
||
```
|
||
|
||
2. **查看悬浮球**
|
||
- 应用启动后会看到蓝色的悬浮球
|
||
- 点击悬浮球打开网络检查器
|
||
|
||
3. **测试功能**
|
||
- 在"功能演示"页面发送各种网络请求
|
||
- 观察悬浮球上的数字变化
|
||
- 在检查器中查看详细的请求信息
|
||
|
||
### 高级功能
|
||
|
||
#### 批量测试
|
||
- 使用"批量测试"功能发送大量请求
|
||
- 观察内存管理和性能表现
|
||
- 验证日志数量限制功能
|
||
|
||
#### Dio 集成
|
||
- 查看"Dio 集成"页面的详细说明
|
||
- 按照指南在实际项目中集成 Dio 拦截器
|
||
- 使用模拟功能了解拦截器行为
|
||
|
||
#### 个性化设置
|
||
- 在"设置"页面自定义检查器配置
|
||
- 调整悬浮球外观和行为
|
||
- 配置日志管理选项
|
||
|
||
## 🎯 最佳实践
|
||
|
||
### 开发建议
|
||
1. **合理配置日志数量** - 根据应用需求设置合适的最大日志数
|
||
2. **选择合适的悬浮球大小** - 平衡可见性和界面美观
|
||
3. **使用搜索功能** - 在大量日志中快速定位问题
|
||
4. **定期清理日志** - 避免内存占用过多
|
||
|
||
### 调试技巧
|
||
1. **错误请求测试** - 使用错误请求功能测试异常处理
|
||
2. **性能测试** - 使用批量请求测试应用性能
|
||
3. **网络状态监控** - 通过统计信息了解网络状况
|
||
|
||
## 🔧 自定义扩展
|
||
|
||
### 添加新的请求类型
|
||
可以在 `demo_page.dart` 中的 `_endpoints` 列表中添加新的API端点：
|
||
|
||
```dart
|
||
{
|
||
'name': '自定义API',
|
||
'method': 'PATCH',
|
||
'url': 'https://api.example.com/custom',
|
||
'description': '自定义API描述',
|
||
'icon': Icons.custom_icon,
|
||
}
|
||
```
|
||
|
||
### 扩展设置选项
|
||
在 `settings_page.dart` 中可以添加更多配置选项：
|
||
|
||
```dart
|
||
// 添加新的设置项
|
||
SwitchListTile(
|
||
title: const Text('新功能开关'),
|
||
subtitle: const Text('启用新功能'),
|
||
value: _newFeatureEnabled,
|
||
onChanged: (value) {
|
||
setState(() {
|
||
_newFeatureEnabled = value;
|
||
});
|
||
},
|
||
),
|
||
```
|
||
|
||
## 📚 相关资源
|
||
|
||
- [YX Net Inspector 主文档](../README.md)
|
||
- [API 参考文档](../README.md#api-参考)
|
||
- [Dio 集成指南](../README.md#dio-集成)
|
||
- [Flutter 官方文档](https://flutter.dev/docs)
|
||
|
||
## 🤝 贡献
|
||
|
||
欢迎提交 Issues 和 Pull Requests 来改进示例应用：
|
||
|
||
1. Fork 本仓库
|
||
2. 创建功能分支
|
||
3. 提交更改
|
||
4. 发起 Pull Request
|
||
|
||
## 📄 许可证
|
||
|
||
本示例应用遵循与 YX Net Inspector 相同的 MIT 许可证。 |