Movatterモバイル変換

[0]ホーム
URL:

Skip to main content

docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic.

Learn more

Flutter 3.41 is live! Check out theblog post!

Debug your add-to-app module

How to run, debug, and hot reload your add-to-app Flutter module.

Once you've integrated the Flutter module to your project and used Flutter's platform APIs to run the Flutter engine and/or UI, you can then build and run your Android or iOS app the same way you run normal Android or iOS apps.

Flutter now powers the UI wherever your code includesFlutterActivity orFlutterViewController.

Overview

#

You might be used to having your suite of favorite Flutter debugging tools available when runningflutter run or an equivalent command from an IDE. But you can also use all your Flutterdebugging functionalities such as hot reload, performance overlays, DevTools, and setting breakpoints in add-to-app scenarios.

Theflutter attach command provides these functionalities. To run this command, you can use the SDK's CLI tools, VS Code or IntelliJ IDEA or Android Studio.

Theflutter attach command connects once you run yourFlutterEngine. It remains attached until you dispose yourFlutterEngine. You can invokeflutter attach before starting your engine. Theflutter attach command waits for the next available Dart VM that your engine hosts.

Debug from the Terminal

#

To attach from the terminal, runflutter attach. To select a specific target device, add-d <deviceId>.

flutter attach

The command should print output resembling the following:

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

Debug iOS extension in Xcode and VS Code

#

Build the iOS version of the Flutter app in the Terminal

#

To generate the needed iOS platform dependencies, run theflutter 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 toFile>Open Folder... and choose themy_app directory.

  2. Open thelib/main.dart file.

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

    Go toView>Command Palette...

    You can also pressCtrl /Cmd +Shift +P.

  4. Typeflutter select.

  5. Click theFlutter: 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 theDebug pane and launches the app. Wait for the app to launch on the device and for the debug pane to indicateConnected. 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.
Enable automatic attachment
#

You can configure VS Code to attach to your Flutter module project whenever you start debugging. To enable this feature, create a.vscode/launch.json file in your Flutter module project.

  1. Go toView>Run.

    You can also pressCtrl /Cmd +Shift +D.

    VS Code displays theRun and Debug sidebar.

  2. In this sidebar, clickcreate a launch.json file.

    VS Code displays theSelect debugger menu at the top.

  3. SelectDart & Flutter.

    VS Code creates then opens the.vscode/launch.json file.

    Expand to see an example launch.json file
    json
    {//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsofexistingattributes.//Formoreinformation,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. To attach, go toRun>Start Debugging.

    You can also pressF5.

Attach to the Flutter process in Xcode
#

To attach to the Flutter app in Xcode:

  1. Go toDebug>Attach to Process.

  2. SelectRunner. It should be at the top of theAttach to Process menu under theLikely 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. Openios/Runner.xcworkspace from your Flutter app directory.

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

    If you have no preference, chooseiPhone Pro 14.

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

    When the run completes, theDebug 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 toView>Command Palette...

    You can also pressCmd +Shift +P.

  2. Typedebug.

  3. Click theDebug: Attach to Flutter on Device command.

  4. In thePaste an VM Service URI box, paste the URI you copied from Xcode and pressEnter.

Debug Android extension in Android Studio

#

  1. To open the Flutter app directory, go toFile>Open... and choose themy_app directory.

  2. Open thelib/main.dart file.

  3. Choose a virtual Android device. Go to the toolbar, open the leftmost dropdown menu, and click onOpen Android Emulator: <device>.

    You can choose any installed emulator that's doesn't includearm64.

  4. From that same menu, select the virtual Android device.

  5. From the toolbar, clickRun 'main.dart'.

    You can also pressCtrl +Shift +R.

    After the app displays in the emulator, continue to the next step.

Debug without USB connection

#

To debug your app over Wi-Fi on an iOS or Android device, useflutter attach.

Debug over Wi-Fi on iOS devices

#

For an iOS target, complete the follow steps:

  1. Verify your device connects to Xcode over Wi-Fi as described in theiOS setup guide.

  2. On your macOS development machine, openXcode>Product>Scheme>Edit Scheme....

    You can also pressCmd +<.

  3. ClickRun.

  4. ClickArguments.

  5. InArguments Passed On Launch, Click+.

    1. If your dev machine uses IPv4, add--vm-service-host=0.0.0.0.

    2. If your dev machine uses IPv6, add--vm-service-host=::0.

    <DashImage figure img-class="site-mobile-screenshot border" image="development/add-to-app/debugging/wireless-port.png" caption="Arguments Passed On Launch with an IPv4 network added", width="100%" />

To determine if you're on an IPv6 network

#

  1. OpenSettings>Wi-Fi.

  2. Click on your connected network.

  3. ClickDetails...

  4. ClickTCP/IP.

  5. Check for anIPv6 address section.

    WiFi dialog box for macOS System Settings

    WiFi dialog box for macOS System Settings

Debug over Wi-Fi on Android devices

#

Verify your device connects to Android Studio over Wi-Fi as described in theAndroid setup guide.

Was this page's content helpful?

Unless stated otherwise, the documentation on this site reflects Flutter 3.41.2. Page last updated on 2025-10-28.View source orreport an issue.

[8]ページ先頭
©2009-2026 Movatter.jp