调试您的附加到应用程序模块

将 Flutter 模块集成到您的项目并使用 Flutter 的平台 API 运行 Flutter 引擎和/或 UI 后,您可以像运行普通 Android 或 iOS 应用程序一样构建和运行您的 Android 或 iOS 应用程序。

但是,Flutter 现在为显示 FlutterActivityFlutterViewController 的位置提供 UI 支持。

调试

您可能习惯于在从 IDE 运行 flutter run 或等效命令时自动使用您最喜欢的 Flutter 调试工具套件。但您还可以在附加到应用程序场景中使用所有 Flutter 调试功能,例如热重载、性能叠加、DevTools 和在断点处设置断点。

这些功能由 flutter attach 机制提供。flutter attach 可以通过不同的途径启动,例如通过 SDK 的 CLI 工具、VS Code 或 IntelliJ/Android Studio。

flutter attach 可以连接到您运行 FlutterEngine 时,并且保持连接状态,直到您的 FlutterEngine 被释放。但您可以在启动引擎之前调用 flutter attachflutter attach 等待引擎托管的下一个可用的 Dart VM。

终端

运行 flutter attachflutter attach -d deviceId 从终端连接。

flutter attach via terminal
通过终端附加 flutter

VS Code

在终端中构建 Flutter 应用程序的 iOS 版本

要生成所需的 iOS 平台依赖项,请运行 flutter build 命令。

flutter build ios --config-only --no-codesign --debug
Warning: Building for device with codesigning disabled. You will have to manually codesign before deploying to device.
Building com.example.myApp for device (ios)...

先从 VS Code 开始调试

如果你使用 VS Code 调试大部分代码,请从本部分开始。

在 VS Code 中启动 Dart 调试器
  1. 要打开 Flutter 应用目录,请转到文件 > 打开文件夹…,然后选择 my_app 目录。

  2. 打开 lib/main.dart 文件。

  3. 如果你可以为多个设备构建应用,则必须先选择设备。

    转到视图 > 命令面板…

    你还可以按 Ctrl / Cmd + Shift + P

  4. 键入 flutter select

  5. 单击Flutter:选择设备命令。

  6. 选择你的目标设备。

  7. 单击调试图标 (VS Code 的 bug 图标,用于触发 Flutter 应用的调试模式)。这将打开调试窗格并启动应用。等待应用在设备上启动,并等待调试窗格指示已连接。调试器第一次启动需要较长时间。后续启动会更快。

    此 Flutter 应用包含两个按钮

    • 在浏览器中启动:此按钮在设备的默认浏览器中打开此页面。
    • 在应用中启动:此按钮在你的应用中打开此页面。此按钮仅适用于 iOS 或 Android。桌面应用会启动浏览器。
在 Xcode 中附加到 Flutter 进程
  1. 要附加到 Flutter 应用,请转到调试 > 附加到进程 > Runner

    Runner 应位于附加到进程菜单顶部的可能的目标标题下。

先从 Xcode 开始调试

如果你使用 Xcode 调试大部分代码,请从本部分开始。

启动 Xcode 调试器
  1. 从你的 Flutter 应用目录中打开 ios/Runner.xcworkspace

  2. 使用工具栏中的方案菜单选择正确的设备。

    如果你没有偏好,请选择iPhone Pro 14

  3. 在 Xcode 中以普通应用的形式运行此 Runner。

    运行完成后,Xcode 底部的调试区域会显示一条消息,其中包含 Dart VM 服务 URI。它类似于以下响应

     2023-07-12 14:55:39.966191-0500 Runner[58361:53017145]
         flutter: The Dart VM service is listening on
         http://127.0.0.1:50642/00wEOvfyff8=/
    
  4. 复制 Dart VM 服务 URI。

在 VS Code 中附加到 Dart VM
  1. 若要打开命令面板,请转到视图 > 命令面板…

    您还可以按 Cmd + Shift + P

  2. 键入 debug

  3. 单击调试:附加到设备上的 Flutter命令。

  4. 粘贴 VM 服务 URI框中,粘贴从 Xcode 复制的 URI,然后按 Enter

您还可以在 Flutter 模块项目中创建一个 .vscode/launch.json 文件。这使您能够使用运行 > 开始调试命令或 F5 进行附加。

{
  name: "Flutter: Attach",
  request: "attach",
  type: "dart",
}

IntelliJ / Android Studio

选择运行 Flutter 模块的设备,以便 flutter attach 筛选正确的启动信号。

flutter attach via IntelliJ
通过 IntelliJ 进行 flutter attach

无线调试

您可以使用 flutter attach 在 iOS 或 Android 设备上无线调试应用。

iOS

在 iOS 上,您必须按照以下步骤操作

  1. 确保您的设备已按照 iOS 设置指南 中所述无线连接到 Xcode。

  2. 打开Xcode > 产品 > 方案 > 编辑方案

  3. 选择参数选项卡

  4. 添加 --vm-service-host=0.0.0.0(用于 IPv4)或 --vm-service-host=::0(用于 IPv6)作为启动参数

    您可以通过打开 Mac 的设置 > Wi-Fi > 详情(您连接的网络)> TCP/IP 来确定您是否在 IPv6 网络上,并检查是否存在IPv6 地址部分。

    Check the box that says 'connect via network' from the devices and simulators page

Android

确保您的设备已按照 Android 设置指南 中所述无线连接到 Android Studio。