Flutter开发工具插件devtools_extensions的使用
Flutter开发工具插件devtools_extensions的使用
介绍
Dart & Flutter DevTools Extensions允许开发者为Dart DevTools添加自定义工具。通过DevTools的扩展框架，你可以构建利用现有框架和工具（如VM服务连接、主题、共享小部件、实用程序等）的工具。
当DevTools检测到有可用的扩展时，无论来自用户的应用程序还是IDE，该扩展将在其自己的DevTools选项卡中显示。DevTools扩展的内容是一个Flutter Web应用程序，嵌入在DevTools中动态显示的iFrame中。
支持的工具类型
- 现有包的配套工具
- 作为独立包发布的新工具
- 与运行中的应用程序交互的工具
- 不与运行中的应用程序交互的工具
- 与IDE中打开的项目文件交互的工具
- 未来计划：与分析服务器交互的工具（upvote this issue）
创建DevTools Extension
步骤1：设置包层次结构
独立扩展
对于独立扩展（不是作为现有pub包的一部分发布的扩展），可以在同一包中包含扩展源代码。这将简化开发，并且由于用户会将你的包作为dev_dependency添加，因此不会影响用户应用的大小。
my_new_tool
extension/
devtools/
build/
... # pre-compiled output of the Flutter web app under lib/
config.yaml
lib/ # source code for your extension Flutter web app
src/
...
使用flutter create生成DevTools扩展的包：
flutter create --template app --platforms web my_new_tool
配套扩展
对于配套扩展（作为现有pub包的一部分发布的扩展），建议将扩展源代码放在pub包之外。这样可以保持包的大小尽可能小。
some_pkg/ # formerly the repository root of your pub package
packages/
some_pkg/ # your pub package
extension/
devtools/
build/
... # pre-compiled output of some_pkg_devtools_extension/lib
config.yaml
some_pkg_devtools_extension/
lib/ # source code for your extension Flutter web app
步骤2：配置扩展
在提供DevTools扩展的Dart包中添加一个顶级extension目录：
some_pkg
extension/
lib/
...
在extension目录下创建以下结构：
extension
devtools/
build/
config.yaml
config.yaml文件包含DevTools加载扩展所需的元数据。
name: some_pkg
issueTracker: <link_to_your_issue_tracker.com>
version: 0.0.1
materialIconCodePoint: '0xe0b1'
requiresConnection: true # optional field - defaults to true
步骤3：构建扩展
创建Flutter Web应用程序
如果你是独立扩展，则跳过此步骤。
从你希望扩展源代码所在的目录运行以下命令：
flutter create --template app --platforms web some_pkg_devtools_extension
添加依赖项
添加package:devtools_extensions依赖项：
flutter pub add devtools_extensions
你可能还需要添加对package:devtools_app_shared的依赖项：
flutter pub add devtools_app_shared
添加DevToolsExtension小部件
在lib/main.dart中添加以下内容：
import 'package:devtools_extensions/devtools_extensions.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const SomePkgDevToolsExtension());
}
class SomePkgDevToolsExtension extends StatelessWidget {
const SomePkgDevToolsExtension({super.key});
@override
Widget build(BuildContext context) {
return const DevToolsExtension(
child: Placeholder(), // Build your extension here
);
}
}
步骤4：调试扩展
使用模拟DevTools环境（推荐用于开发）
使用“模拟DevTools环境”进行调试。这是模拟环境，允许你在不将其作为嵌入式iFrame在DevTools中开发的情况下构建扩展。
在VS Code中添加配置：
{
...
"configurations": [
...
{
"name": "devtools_extension + simulated environment",
"cwd": "relative/path/to/your/extension",
"request": "launch",
"type": "dart",
"args": [
"--dart-define=use_simulated_environment=true"
],
},
]
}
或从命令行启动应用：
flutter run -d chrome --dart-define=use_simulated_environment=true
使用真实DevTools环境
- 构建并复制Flutter Web应用程序。
- 准备测试环境。
- 启动DevTools。
- 连接测试应用到DevTools。
发布带有DevTools扩展的包
确保extension/devtools/config.yaml文件存在并已正确配置。使用validate命令验证：
cd your_extension_web_app;
flutter pub get;
dart run devtools_extensions validate --package=path/to/pkg_providing_your_extension_assets
使用build_and_copy命令构建并复制扩展：
cd your_extension_web_app;
flutter pub get;
dart run devtools_extensions build_and_copy --source=. --dest=../some_pkg/extension/devtools
然后发布你的包。
示例Demo
下面是一个完整的示例demo，展示了如何创建一个简单的DevTools扩展。
1. 创建独立扩展
flutter create --template app --platforms web my_new_tool
2. 配置config.yaml
在my_new_tool/extension/devtools/config.yaml中添加：
name: my_new_tool
issueTracker: https://github.com/your_username/my_new_tool/issues
version: 0.0.1
materialIconCodePoint: '0xe0b1'
requiresConnection: true
3. 添加依赖项
在my_new_tool/pubspec.yaml中添加：
dependencies:
flutter:
sdk: flutter
devtools_extensions: ^x.x.x
devtools_app_shared: ^x.x.x
4. 修改main.dart
在my_new_tool/lib/main.dart中修改：
import 'package:devtools_extensions/devtools_extensions.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyNewToolDevToolsExtension());
}
class MyNewToolDevToolsExtension extends StatelessWidget {
const MyNewToolDevToolsExtension({super.key});
@override
Widget build(BuildContext context) {
return const DevToolsExtension(
child: Center(child: Text('Hello, DevTools!')),
);
}
}
5. 调试扩展
使用模拟DevTools环境进行调试：
flutter run -d chrome --dart-define=use_simulated_environment=true
通过以上步骤，你可以成功创建并调试一个简单的DevTools扩展。根据需要进一步扩展功能并发布你的包。
更多关于Flutter开发工具插件devtools_extensions的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter开发工具插件devtools_extensions的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用devtools_extensions插件来集成Flutter DevTools的示例代码和步骤。Flutter DevTools是一个强大的工具集，它可以帮助开发者在开发过程中进行性能分析、调试布局、检查网络请求等。
1. 安装Flutter DevTools插件
首先，你需要确保已经安装了Flutter DevTools。可以通过以下命令安装：
flutter pub global activate devtools
2. 在Flutter项目中添加devtools_extensions依赖
打开你的Flutter项目的pubspec.yaml文件，并在dependencies部分添加devtools_extensions：
dependencies:
flutter:
sdk: flutter
devtools_extensions: ^0.0.1 # 请检查最新版本号
然后运行flutter pub get来安装依赖。
3. 在代码中集成DevTools
接下来，你需要在Flutter应用的入口文件中（通常是main.dart）添加代码来启动DevTools扩展。
import 'package:flutter/material.dart';
import 'package:devtools_extensions/devtools_extensions.dart';
void main() {
// 检查是否启用了DevTools扩展
if (DevToolsExtensions.isSupported) {
// 启用DevTools扩展
DevToolsExtensions.initialize();
}
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter DevTools Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter DevTools Example'),
),
body: Center(
child: Text('Hello, Flutter DevTools!'),
),
);
}
}
4. 启动Flutter DevTools
在命令行中，导航到你的Flutter项目目录，然后运行以下命令来启动DevTools：
flutter devtools
这将打开DevTools的网页界面。
5. 连接DevTools到你的Flutter应用
在DevTools网页界面中，点击左上角的“Connect to your Flutter app”按钮。DevTools将尝试连接到当前正在运行的Flutter应用。
6. 使用DevTools的功能
一旦连接成功，你就可以使用DevTools提供的各种功能了，比如：
- Performance Profiler：分析应用的性能瓶颈。
- Inspector：检查应用的布局和渲染树。
- Network：查看网络请求的详细信息。
- Debugger：设置断点并调试代码。
示例总结
通过上述步骤，你已经成功地在Flutter项目中集成了devtools_extensions插件，并可以使用Flutter DevTools来进行开发和调试。DevTools是一个功能强大的工具，能够大大提高你的开发效率。
请确保定期检查Flutter和DevTools的更新，以获取最新的功能和改进。
