Flutter应用性能监控插件appspector的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter应用性能监控插件AppSpector的使用

GitHub release

AppSpector

AppSpector 是一个可以集成到你的 Flutter 项目的插件。通过 AppSpector，你可以远程调试运行在同一个房间或另一个大陆的应用。你可以实时测量应用性能、查看数据库内容、日志、网络请求等。

安装

在使用 AppSpector SDK 之前，你需要在 AppSpector 网站 或 桌面应用 上注册。为了在 iOS 和 Android 平台上使用 SDK，你需要分别注册两个不同的应用。API 密钥将在应用设置页面上提供。

添加 AppSpector 插件到 pubspec.yaml

dependencies:
  appspector: '0.10.0'

初始化 AppSpector 插件

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runAppSpector();
  runApp(MyApp());
}

void runAppSpector() {
  final config = Config()
    ..iosApiKey = "Your iOS API_KEY"
    ..androidApiKey = "Your Android API_KEY";
  
  // 如果你不想启动所有监视器，可以指定需要的监视器列表
  config.monitors = [Monitors.http, Monitors.logs, Monitors.screenshot];
  
  AppSpectorPlugin.run(config);
}

构建和运行

构建你的项目并查看一切是否正常工作！当你的应用运行时，你可以访问 AppSpector 网站 并连接到你的应用会话。

配置

启动/停止数据收集

调用 run 方法后，SDK 将开始数据收集并将数据传输到 Web 服务。从那时起，你可以在 AppSpector 客户端中看到你的会话。

由于插件初始化应该位于 main 函数中，我们提供了方法来帮助你通过调用 stop() 和 start() 方法控制 AppSpector 的状态。

只有在 AppSpector 初始化后才能使用这些方法。

stop() 方法告诉 AppSpector 禁用所有数据收集并关闭当前会话。

await AppSpectorPlugin.shared().stop();

start() 方法再次启动它，使用你在初始化时提供的配置。

await AppSpectorPlugin.shared().start();

结果将创建一个新的会话，并且在 stop() 和 start() 调用之间发生的所有活动都不会被跟踪。

要检查 AppSpector 的状态，可以使用 isStarted() 方法。

await AppSpectorPlugin.shared().isStarted();

自定义设备名称

你可以为设备分配自定义名称，以便在会话列表中轻松找到所需的会话。为此，你应该将所需名称作为值添加到 MetadataKeys.deviceName 键的 metadata 字典中：

void runAppSpector() {
  var config = new Config()
    ..iosApiKey = "Your iOS API_KEY"
    ..androidApiKey = "Your Android API_KEY"
    ..metadata = {MetadataKeys.deviceName: "CustomName"};
  
  AppSpectorPlugin.run(config);
}

此外，插件允许在应用程序生命周期中管理设备名称，使用 setMetadataValue 方法更改设备名称

AppSpectorPlugin.shared().setMetadataValue(MetadataKeys.deviceName, "New Device Name");

或使用 removeMetadataValue 方法删除自定义设备名称

AppSpectorPlugin.shared().removeMetadataValue(MetadataKeys.deviceName);

获取会话 URL

有时你可能需要从代码中获取指向当前会话的 URL。例如，你希望在崩溃报告器中链接崩溃，将其写入日志或显示在调试 UI 中。要获取此 URL，你需要添加一个会话开始回调：

AppSpectorPlugin.shared()?.sessionUrlListener = (sessionUrl) => {
  // 保存 URL 以备后用...
};

正确的 SQLite 设置

SQLite 监视器在 Android 上要求任何 DB 文件都位于 database 文件夹中。因此，如果你使用的是 sqflite，打开数据库的代码将如下所示：

var dbPath = await getDatabasesPath() + "/my_database_name";
var db = await openDatabase(dbPath, version: 1, onCreate: _onCreate);

getDatabasesPath() 方法是从 package:sqflite/sqflite.dart 导入的。

功能

AppSpector 提供了许多监视器，这些监视器在不同平台上可能会有所不同。

SQLite 监视器

提供对应用中的 SQLite 数据库的浏览器。允许跟踪所有查询，显示数据库模式和数据。你可以在任何数据库上发出自定义 SQL 查询，并立即在浏览器中查看结果。

SQLite monitor

HTTP 监视器

显示应用中的所有 HTTP 流量。你可以检查任何请求，查看请求/响应头和正文。我们提供 XML 和 JSON 高亮显示，带有格式化和折叠选项，即使是非常大的响应也易于浏览。

HTTP monitor

日志监视器

显示应用生成的所有日志。

Logger

AppSpector Logger 允许你仅将日志消息收集到 AppSpector 服务中。当你记录一些可能通过 Android Logcat 或类似工具泄漏的内部数据时，这非常有用。

它有一个非常简单的 API：

Logger.d("MyTAG", "It won't be printed to the app console");

不要忘记从 package:appspector/appspector.dart 导入它。

Logs

位置监视器

大多数应用都是位置感知的。测试它需要你自己改变位置。在这种情况下，位置模拟是一个真正的时间节省者。只需在地图上指向位置，你的应用将立即更改其地理数据。

Location

截图监视器

简单地捕获设备的屏幕截图。

SharedPreference/UserDefaults 监视器

提供对 SharedPreferences/UserDefaults 的浏览器和编辑器。

性能监视器

显示 CPU、内存、网络、磁盘、电池使用情况的实时图表。

环境监视器

收集所有环境变量和参数，包括 info.plist、命令行参数等。

通知中心监视器（仅限 iOS）

跟踪所有发布的通知和订阅。你可以检查通知用户信息、发送/接收对象等。并且你可以从前端向应用发布通知。

文件系统监视器

提供对 Android 应用内部存储和 iOS 沙盒和捆绑包的访问。使用此监视器，你可以下载、删除或上传文件，创建目录，浏览应用文件系统。

更多详细信息，你可以访问 Android SDK 和 iOS SDK 页面。

反馈

告诉我们你的想法或希望改进的地方：info@appspector.com。

加入我们的 Slack 讨论设置过程和功能

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 AppSpector 插件。

import 'package:appspector/appspector.dart';
import 'package:flutter/material.dart';
import 'package:flutter_appspector_example/metadata_page.dart';
import 'package:flutter_appspector_example/utils.dart';
import 'package:logging/logging.dart' as logger;

import 'color.dart';
import 'http_page.dart';
import 'main_page.dart';
import 'routes.dart';
import 'sqlite_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  var globalSessionUrlObserver = DataObservable<String>();
  runAppSpector(globalSessionUrlObserver);
  runApp(MyApp(globalSessionUrlObserver));

  logger.Logger.root.level = logger.Level.ALL;
  logger.Logger.root.onRecord.listen((logger.LogRecord rec) {
    Logger.log(
        LogLevel.DEBUG, rec.loggerName, "(${rec.level.name}) ${rec.message}");
    print('${rec.level.name}: ${rec.time}: ${rec.message}');
  });
}

void runAppSpector(DataObservable<String> sessionObserver) {
  final config = Config()
    ..iosApiKey = "YjU1NDVkZGEtN2U3Zi00MDM3LTk5ZGQtNzdkNzY3YmUzZGY2"
    ..androidApiKey = "MWM1YTZlOTItMmU4OS00NGI2LWJiNGQtYjdhZDljNjBhYjcz"
    ..monitors = [
      Monitors.http,
      Monitors.logs,
      Monitors.fileSystem,
      Monitors.screenshot,
      Monitors.environment,
      Monitors.location,
      Monitors.performance,
      Monitors.sqLite,
      Monitors.sharedPreferences,
      Monitors.analytics,
      Monitors.notification,
      Monitors.userDefaults,
      Monitors.coreData
    ];

  AppSpectorPlugin.run(config);
  AppSpectorPlugin.shared().sessionUrlListener =
      (sessionUrl) => {sessionObserver.setValue(sessionUrl)};
}

class MyApp extends StatelessWidget {
  final DataObservable<String> _sessionUrlObserver;

  MyApp(this._sessionUrlObserver);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: appSpectorPrimary,
          highlightColor: appSpectorAccent),
      home: MyHomePage(_sessionUrlObserver, title: 'Flutter Demo Home Page'),
      routes: {
        Routes.SQLiteMonitorPage: (BuildContext context) => SQLitePage(),
        Routes.HttpMonitorPage: (BuildContext context) => HttpMonitorPage(),
        Routes.MetadataPage: (BuildContext context) => MetadataPage(),
      },
    );
  }
}

希望这个指南对你有帮助！如果你有任何问题或需要进一步的帮助，请随时联系 AppSpector 团队。


更多关于Flutter应用性能监控插件appspector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter应用性能监控插件appspector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter应用中集成Appspector进行性能监控，可以通过以下步骤进行。Appspector是一个强大的工具，用于实时监控和分析Flutter应用的性能。以下是一个简单的代码示例，展示如何在Flutter应用中集成Appspector。

1. 添加依赖

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

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

然后运行flutter pub get来安装依赖。

2. 初始化Appspector

在你的Flutter应用的入口文件（通常是main.dart）中，初始化Appspector。你需要提供你的Appspector项目的API密钥。

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

void main() {
  // 初始化Appspector
  Appspector.initialize(
    apiKey: '你的Appspector API密钥',
    enableLogging: true, // 是否启用日志记录
  );

  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 StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App with Appspector'),
      ),
      body: Center(
        child: Text('Hello, Appspector!'),
      ),
    );
  }
}

3. 自定义监控（可选）

Appspector允许你自定义监控逻辑，比如监控特定的用户行为或性能事件。你可以使用Appspector.track方法来记录自定义事件。

// 假设在某个按钮点击事件中，你想记录一个自定义事件
void _onButtonPressed() {
  Appspector.track(
    eventName: 'button_clicked',
    properties: {
      'button_name': 'my_button',
      'timestamp': DateTime.now().toIso8601String(),
    },
  );
}

将上面的_onButtonPressed方法绑定到一个按钮的点击事件：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App with Appspector'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello, Appspector!'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _onButtonPressed,
              child: Text('Click Me'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

现在，你可以运行你的Flutter应用，并通过Appspector的仪表板实时监控应用的性能。

注意事项

  • 确保你已经正确设置了Appspector项目，并获取了API密钥。
  • 根据你的需求，调整Appspector的初始化参数和自定义监控逻辑。
  • 遵守Appspector的使用条款和隐私政策。

通过上述步骤，你应该能够在Flutter应用中成功集成Appspector，并开始监控应用的性能。

回到顶部