目錄
description bug_report

在混合開發模式下進行除錯

目錄

當你將 Flutter 模組整合到專案中並使用 Flutter 的平台 APIs 來執行 Flutter 引擎和/或 UI 時，你可以與平時執行 Android 或 iOS 應用程式一樣，建立和執行你的應用。

但就目前而言，Flutter 需要在 FlutterActivity 或 FlutterViewController 中展示 UI 內容。

除錯

你可能習慣於在 IDE 中執行 flutter run 或者等效的快捷指令，它會自動啟動你喜愛的 Flutter 除錯工具。同樣的，你也可以使用所有 Flutter 的 除錯功能，例如熱過載、效能除錯、DevTools 以及在混合開發的場景中設定斷點。

這些功能由 flutter attach 機制提供。 flutter attach 可以透過不同的路徑啟動，例如透過 SDK 中的指令行工具、VS Code 或者 IntelliJ/Android Studio。

flutter attach 可以在你執行 FlutterEngine 時立即進行連線，並在 FlutterEngine 被釋放之前一直保持連線。你可以在啟動引擎之前執行 flutter attach，它將等待下一個由引擎持有的 Dart VM 進行連線。

終端

在終端執行 flutter attach 或者 flutter attach -d deviceId 來連線你的應用。

flutter attach via terminal
flutter attach via terminal

VS Code

Build the iOS version of the Flutter app in the Terminal

To generate the needed iOS platform dependencies, run the flutter build command.

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)...

Start debugging with VS Code first

If you use VS Code to debug most of your code, start with this section.

Start the Dart debugger in VS Code

  1. To open the Flutter app directory, go to File > Open Folder… and choose the my_app directory.

  2. Open the lib/main.dart file.

  3. If you can build an app for more than one device, you must select the device first.

    Go to View > Command Palette…

    You can also press Ctrl / Cmd + Shift + P.

  4. Type flutter select.

  5. Click the Flutter: Select Device command.

  6. Choose your target device.

  7. Click the debug icon (VS Code's bug icon to trigger the debugging mode of a Flutter app). This opens the Debug pane and launches the app. Wait for the app to launch on the device and for the debug pane to indicate Connected. The debugger takes longer to launch the first time. Subsequent launches start faster.

    This Flutter app contains two buttons:

    • Launch in browser: This button opens this page in the default browser of your device.
    • Launch in app: This button opens this page within your app. This button only works for iOS or Android. Desktop apps launch a browser.
Attach to the Flutter process in Xcode

  1. To attach to the Flutter app, go to Debug > Attach to Process > Runner.

    Runner should be at the top of the Attach to Process menu under the Likely Targets heading.

Start debugging with Xcode first

If you use Xcode to debug most of your code, start with this section.

Start the Xcode debugger

  1. Open ios/Runner.xcworkspace from your Flutter app directory.

  2. Select the correct device using the Scheme menu in the toolbar.

    If you have no preference, choose iPhone Pro 14.

  3. Run this Runner as a normal app in Xcode.

    When the run completes, the Debug area at the bottom of Xcode displays a message with the Dart VM service URI. It resembles the following response:

     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. Copy the Dart VM service URI.

Attach to the Dart VM in VS Code

  1. To open the command palette, go to View > Command Palette…

    You can also press Cmd + Shift + P.

  2. Type debug.

  3. Click the Debug: Attach to Flutter on Device command.

  4. In the Paste an VM Service URI box, paste the URI you copied from Xcode and press Enter.

You can also create a .vscode/launch.json file in your Flutter module project. This enables you to attach using the Run > Start Debugging command or F5:

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

IntelliJ / Android Studio

選擇要執行 Flutter 模組的裝置，然後點選右邊的 flutter attach 按鈕。

flutter attach via IntelliJ
flutter attach via IntelliJ

Wireless debugging

You can debug your app wirelessly on an iOS or Android device using flutter attach.

iOS

On iOS, you must follow the steps below:

  1. Ensure that your device is wirelessly connected to Xcode as described in the iOS setup guide.

  2. Open Xcode > Product > Scheme > Edit Scheme

  3. Select the Arguments tab

  4. Add either --vm-service-host=0.0.0.0 for IPv4, or --vm-service-host=::0 for IPv6 as a launch argument

    You can determine if you’re on an IPv6 network by opening your Mac’s Settings > Wi-Fi > Details (of the network you’re connected to) > TCP/IP and check to see if there is an IPv6 address section.

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

Android

Ensure that your device is wirelessly connected to Android Studio as described in the Android setup guide.