flutter中基于Dio实现类似Chome Network的调试面板,用于监听、分析、调试项目请求与响应

FnPanel

github:https://github.com/SmileZXLee/FnPanel

主要功能

  • 设计参照Chome Network调试面板
  • 支持展示请求头、响应头、请求头、响应体、请求时间等
  • 支持请求体/响应体格式化展示
  • 支持复制请求为cURL或fetch,可直接粘贴至Postman或发给后端调试
  • 搭配全局可拖动按钮,可通过全局Button呼出FnPanel面板
  • 配置简单,使用方便,侵入性低

安装

dependencies:
  fn_panel: ^0.0.6

使用

导入fn_panel

import 'package:fn_panel/fn_panel.dart';

【必须】绑定Dio,请在封装的请求内部绑定

Dio dio = Dio();
// 对dio的各种配置处理
FnPanel.setDio(dio);

【可选】设置全局Button,可通过全局Button呼出FnPanel面板

FnPanel.setGlobalButton(context);

【可选】通过代码呼出FnPanel面板

FnPanel.showPanel(context);

【可选】全局配置

// 修改全局Button距离bottom 100(默认距离bottom 20,right 20)
FnPanel.setConfig(
  FnConfig(globalButtonConfig: FnGlobalButtonConfig(bottom: 100))
);

// 设置FnPanel在Debug和Release环境下均启用,默认为Level.debug,即只有Debug环境下启用
FnPanel.setConfig(
  FnConfig(level: Level.release)
);

预览

请求详情-Headers 请求详情-Response

更新历史,请查阅Release

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容