Flutter调试工具插件jh_debug的使用

Flutter调试工具插件jh_debug的使用

1. 安装插件

在flutter项目中的pubspec.yaml，添加以下依赖项：

dependencies:
  ...
  jh_debug: ^x.x.x // 指定插件版本

2. 快速入门

第一步：
  1. 安装插件，然后在main.dart入口处添加如下代码
import 'package:jh_debug/jh_debug.dart';
void main() {
  jhDebugMain(
    appChild: MyApp(),
    debugMode: DebugMode.inConsole, // 错误映射到插件中，纯真机模式可设置成none模式
    errorCallback: (error){}, // 错误回调函数
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: jhDebug.getNavigatorKey, // 绑定key
    );
  }
}
第二步：
  1. 在MaterialApp的home页面中设置init初始化参数
import 'package:jh_debug/jh_debug.dart';

// 初始化，建议在initState阶段执行一次即可
jhDebug.init(
  context: context,
  // 指定默认调试窗口内的一些参数配置
  btnTitle1: '按钮1', // 定义按钮名称
  btnTap1: () {}, // 定义按钮触发事件
  customTabs: [
    CustomTabItem(
      title: '自定义tab专栏',
      // 自定义tab页面的内容
      widget: Container(
        color: Colors.white,
        child: Text('内容区'),
      ),
    )
  ],
);
第三步：
  1. 调用调试工具，在你需要使用到的页面
import 'package:jh_debug/jh_debug.dart' show jhDebug;

jhDebug.showLog(); // 弹出jhDebug调试窗口，可自己指定义绑定到某个按钮事件上
jhDebug.hideLog(); // 隐藏jhDebug调试窗口

jhDebug.showDebugBtn(); // 显示全局浮动按钮，此按钮已内置点击显示出jeDebug调试弹层, 双击隐藏自身按钮, 长按拖动按钮位置
jhDebug.removeDebugBtn(); // 隐藏全局按钮

其它相关API

import 'package:jh_debug/jh_debug.dart' show jhDebug;
// 手动添加一条print日志
jhDebug.setPrintLog('错误'); 

// 手动添加一条debug调试日志
jhDebug.setDebugLog(
  debugLog: 'debugError错误',
  debugStack: 'stack信息',
);

// 自定义全局key
jhDebug.setGlobalKey = GlobalKey<NavigatorState>();

// 获取全局context
jhDebug.getGlobalContext;

// 设置是否开启记录log模式，生产环境可以关闭，需要调试时调用jhDebug.setRecordEnabled(true)方法开启
jhDebug.setRecordEnabled(false);

更多关于Flutter调试工具插件jh_debug的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter调试工具插件jh_debug的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成和使用jh_debug调试工具插件的示例代码和步骤。jh_debug是一个用于Flutter应用的强大调试工具，可以帮助开发者更方便地进行开发和调试。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加jh_debug的依赖。

dependencies:
  flutter:
    sdk: flutter
  jh_debug: ^最新版本号  # 请替换为最新版本号

运行flutter pub get来安装依赖。

2. 初始化jh_debug

在你的应用入口文件（通常是main.dart）中初始化jh_debug。

import 'package:flutter/material.dart';
import 'package:jh_debug/jh_debug.dart';

void main() {
  // 初始化jh_debug，仅在开发模式下启用
  if (!kReleaseMode) {
    JhDebug.init(
      enable: true, // 启用jh_debug
      // 其他可选配置，如自定义UI、日志级别等
    );
  }

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 示例：使用jh_debug打印日志
          if (!kReleaseMode) {
            JhDebug.log('这是一个调试日志');
          }
        },
        tooltip: 'Debug',
        child: Icon(Icons.debug),
      ),
    );
  }
}

3. 使用jh_debug功能

jh_debug提供了多种调试功能，如日志打印、性能监控、网络请求监控等。以下是一些示例代码展示如何使用这些功能。

打印日志

if (!kReleaseMode) {
  JhDebug.log('这是一个普通日志');
  JhDebug.warn('这是一个警告日志');
  JhDebug.error('这是一个错误日志');
}

性能监控

if (!kReleaseMode) {
  JhPerformanceMonitor.start('性能监控示例');
  // 模拟一些耗时操作
  await Future.delayed(Duration(seconds: 2));
  JhPerformanceMonitor.end('性能监控示例');
}

网络请求监控

jh_debug通常会自动捕获并显示网络请求，但你也可以手动记录网络请求。

if (!kReleaseMode) {
  JhNetMonitor.startRequest('https://api.example.com/data');
  // 模拟网络请求
  await Future.delayed(Duration(seconds: 1));
  JhNetMonitor.endRequest(
    'https://api.example.com/data',
    statusCode: 200,
    responseData: '{"key": "value"}',
    duration: 1000, // 请求耗时，单位为毫秒
  );
}

4. 查看调试界面

在开发模式下运行你的应用，jh_debug会自动添加一个浮动按钮或调试面板，你可以通过它查看和控制调试信息。

注意事项

  • 确保只在开发模式下启用jh_debug，以避免在生产环境中暴露调试信息。
  • jh_debug的具体功能和API可能会随着版本更新而变化，请参考最新的官方文档。

通过以上步骤，你应该能够在Flutter项目中成功集成并使用jh_debug调试工具插件。

回到顶部