跳到主内容

调试你的添加到应用模块

如何运行、调试和热重载你的添加到应用 Flutter 模块。

一旦你将 Flutter 模块集成到你的项目中,并使用 Flutter 的平台 API 来运行 Flutter 引擎和/或 UI,你就可以像运行正常的 Android 或 iOS 应用一样构建和运行你的 Android 或 iOS 应用。

Flutter 现在为任何包含 FlutterActivityFlutterViewController 的代码提供 UI 动力。

概述

#

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

flutter attach 命令提供这些功能。要运行此命令,你可以使用 SDK 的 CLI 工具、VS Code 或 IntelliJ IDEA 或 Android Studio。

flutter attach 命令在运行你的 FlutterEngine 时连接。它会一直连接,直到你释放你的 FlutterEngine。你可以在启动引擎之前调用 flutter attachflutter attach 命令会等待你的引擎托管的下一个可用的 Dart VM。

通过终端调试

#

要从终端连接,运行 flutter attach。要选择特定的目标设备,添加 -d <deviceId>

flutter attach

该命令应打印类似于以下内容的输出

Syncing files to device iPhone 15 Pro...
 7,738ms (!)

To hot reload the changes while running, press "r".
To hot restart (and rebuild state). press "R".

在 Xcode 和 VS Code 中调试 iOS 扩展

#

在终端中构建 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 的错误图标,用于触发 Flutter 应用的调试模式)。这将打开 调试 窗格并启动应用。等待应用在设备上启动,并等待调试窗格指示 已连接。调试器首次启动需要更长时间。后续启动速度更快。

    此 Flutter 应用包含两个按钮

    • 在浏览器中启动:此按钮会在你设备的默认浏览器中打开此页面。
    • 在应用中启动:此按钮会在你的应用中打开此页面。此按钮仅适用于 iOS 或 Android。桌面应用会启动浏览器。
启用自动连接
#

你可以配置 VS Code 在你开始调试时自动连接到你的 Flutter 模块项目。要启用此功能,请在你的 Flutter 模块项目中创建一个 .vscode/launch.json 文件。

  1. 转到 视图 > 运行

    你也可以按 Ctrl / Cmd + Shift + D

    VS Code 显示 运行和调试 侧边栏。

  2. 在此侧边栏中,单击 创建 launch.json 文件

    VS Code 在顶部显示 选择调试器 菜单。

  3. 选择 Dart & Flutter

    VS Code 创建然后打开 .vscode/launch.json 文件。

    展开以查看示例 launch.json 文件
    json
    {
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "name": "my_app",
                "request": "launch",
                "type": "dart"
            },
            {
                "name": "my_app (profile mode)",
                "request": "launch",
                "type": "dart",
                "flutterMode": "profile"
            },
            {
                "name": "my_app (release mode)",
                "request": "launch",
                "type": "dart",
                "flutterMode": "release"
            }
        ]
    }
    
  4. 要连接,转到 运行 > 开始调试

    你也可以按 F5

在 Xcode 中连接到 Flutter 进程
#

要连接到 Xcode 中的 Flutter 应用

  1. 转到 调试 > 连接到进程

  2. 选择 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

在 Android Studio 中调试 Android 扩展

#
  1. 要打开 Flutter 应用目录,请转到 文件 > 打开... 并选择 my_app 目录。

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

  3. 选择虚拟 Android 设备。转到工具栏,打开最左边的下拉菜单,然后单击 打开 Android 模拟器: <设备>

    你可以选择任何已安装的模拟器,该模拟器不包含 arm64

  4. 从同一菜单中,选择虚拟 Android 设备。

  5. 从工具栏单击 运行 'main.dart'

    你也可以按 Ctrl + Shift + R

    应用在模拟器中显示后,继续下一步。

无需 USB 连接进行调试

#

要通过 Wi-Fi 在 iOS 或 Android 设备上调试你的应用,请使用 flutter attach

通过 Wi-Fi 在 iOS 设备上调试

#

对于 iOS 目标,请完成以下步骤

  1. 验证你的设备是否像在 iOS 设置指南 中描述的那样通过 Wi-Fi 连接到 Xcode。

  2. 在你的 macOS 开发机器上,打开 Xcode > 产品 > 方案 > 编辑方案...

    你也可以按 Cmd + <

  3. 单击 运行

  4. 单击 参数

  5. 启动时传递的参数 中,单击 +

    1. 如果你的开发机器使用 IPv4,则添加 --vm-service-host=0.0.0.0

    2. 如果你的开发机器使用 IPv6,则添加 --vm-service-host=::0

    <DashImage figure img-class="site-mobile-screenshot border" image="development/add-to-app/debugging/wireless-port.png" caption="添加了 IPv4 网络的启动时传递的参数",width="100%" />

要确定你是否在 IPv6 网络上

#
  1. 打开 设置 > Wi-Fi

  2. 单击你连接的网络。

  3. 单击 详细信息...

  4. 单击 TCP/IP

  5. 检查是否有 IPv6 地址 部分。

    WiFi dialog box for macOS System Settings

    macOS 系统设置的 WiFi 对话框

通过 Wi-Fi 在 Android 设备上调试

#

验证你的设备是否像在 Android 设置指南 中描述的那样通过 Wi-Fi 连接到 Android Studio。