使用原生语言的调试

Use a native language debugger

info提示

This guide presumes you understand general debugging, have installed Flutter and git, and have familiarity with the Dart language as well as one of the following languages: Java, Kotlin, Swift, or Objective-C.

If you write Flutter apps only with Dart code, you can debug your code using your IDE's debugger. The Flutter team recommends VS Code.

If you write a platform-specific plugin or use platform-specific libraries, you can debug that portion of your code with a native debugger.

To debug iOS or macOS code written in Swift or Objective-C, you can use Xcode.
To debug Android code written in Java or Kotlin, you can use Android Studio.
To debug Windows code written in C++, you can use Visual Studio.

This guide shows you how you can connect two debuggers to your Dart app, one for Dart, and one for the native code.

Debug Dart code

This guide describes how to use VS Code to debug your Flutter app. You can also use your preferred IDE with the Flutter and Dart plugins installed and configured.

Debug Dart code using VS Code

The following procedure explains how to use the Dart debugger with the default sample Flutter app. The featured components in VS Code work and appear when debugging your own Flutter project as well.

Create a basic Flutter app.

flutter create my_app

content_copy

Creating project my_app...
Resolving dependencies in my_app... 
Got dependencies in my_app.
Wrote 129 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd my_app
  $ flutter run

Your application code is in my_app/lib/main.dart.

content_copy

cd my_app

content_copy

Open the lib\main.dart file in the Flutter app using VS Code.
Click the bug icon (). This opens the following panes in VS Code:
- Debug
- Debug Console
- Widget Inspector
The first time you run the debugger takes the longest.
Test the debugger.

a. In main.dart, click on this line:

dart
```
_counter++;
```
content_copy

b. Press Shift + F9. This adds a breakpoint where the _counter variable increments.

c. In the app, click the + button to increment the counter. The app pauses.

d. At this point, VS Code displays:
- In the
  
  Editor Groups
  
  :
  - The highlighted breakpoint in main.dart
  - The widget hierarchy for the Flutter app in the Widget Tree of the Widget Inspector
- In the
  
  side bar
  
  :
  - The state of the app in the Call Stack section
  - The value of the this local variable in the Variables section
- In the
  
  panel
  
  :
  - The log of the Flutter app in the Debug console

VS Code Flutter debugger

The Flutter plugin for VS Code adds a number of components to the VS Code user interface.

Changes to VS Code interface

When launched, the Flutter debugger adds debugging tools to the VS Code interface.

The following screenshot and table explain the purpose of each tool.

Highlight Color in Screenshot	Bar, Panel, or Tab	Contents
Yellow	Variables	List of current values of variables in the Flutter app
	Watch	List of items you chose to track in the Flutter app
	Call Stack	Stack of active subroutines in the Flutter app
	Breakpoints	List of exceptions and set breakpoints that you set
Green	`<Flutter files>`	Files that you are editing
Pink	Widget Inspector	Hierarchy of widgets in the running Flutter app
Blue	Layout Explorer	Visual of how Flutter placed the widget you selected in the Widget Inspector
	Widget Details Tree	List of properties of the widget selected in the Widget Inspector
Orange	Problems	List of issues the Dart analyzer found in the current Dart file
	Output	Response that the Flutter app returns when building an app
	Debug Console	Logs or error messages that the Flutter app generates while debugging
	Terminal	System shell prompt contained in VS Code

To change where the panel (in orange) appears in VS Code, go to View > Appearance > Panel Position.

The toolbar allows you to debug using any debugger. You can step in, out, and over Dart statements, hot reload, or resume the app.

Icon	Action	Default keyboard shortcut
	Start or Resume	F5
	Pause	F6
	Step Over	F10
	Step Into	F11
	Step Out	Shift + F11
	Hot Reload	Ctrl + F5
	Hot Restart	Shift + Special + F5
	Stop	Shift + F5
	Open Widget Inspector

Update test Flutter app

For the remainder of this guide, you need to update the test Flutter app. This update adds native code to debug.

Open the lib/main.dart file using your preferred IDE.
Replace the contents of main.dart with the following code.
Expand to see Flutter code for this example

To add the url_launcher package as a dependency, run flutter pub add:

flutter pub add url_launcher

content_copy

Resolving dependencies... 
  collection 1.17.1 (1.17.2 available)
+ flutter_web_plugins 0.0.0 from sdk flutter
  matcher 0.12.15 (0.12.16 available)
  material_color_utilities 0.2.0 (0.8.0 available)
+ plugin_platform_interface 2.1.4
  source_span 1.9.1 (1.10.0 available)
  stream_channel 2.1.1 (2.1.2 available)
  test_api 0.5.1 (0.6.1 available)
+ url_launcher 6.1.11
+ url_launcher_android 6.0.36
+ url_launcher_ios 6.1.4
+ url_launcher_linux 3.0.5
+ url_launcher_macos 3.0.5
+ url_launcher_platform_interface 2.1.3
+ url_launcher_web 2.0.17
+ url_launcher_windows 3.0.6
Changed 10 dependencies!

content_copy

To check what changed with the codebase:

In Linux or macOS, run this find command.

find ./ -mmin -120

content_copy

./ios/Flutter/Debug.xcconfig
./ios/Flutter/Release.xcconfig
./linux/flutter/generated_plugin_registrant.cc
./linux/flutter/generated_plugins.cmake
./macos/Flutter/Flutter-Debug.xcconfig
./macos/Flutter/Flutter-Release.xcconfig
./macos/Flutter/GeneratedPluginRegistrant.swift
./pubspec.lock
./pubspec.yaml
./windows/flutter/generated_plugin_registrant.cc
./windows/flutter/generated_plugins.cmake

content_copy

In Windows, run this command in the command prompt.

Get-ChildItem C:\dev\example\ -Rescurse | Where-Object {$_.LastWriteTime -gt (Get-Date).AddDays(-1)}

content_copy

C:\dev\example\ios\Flutter\


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
                8/1/2025   9:15 AM                Debug.xcconfig
                8/1/2025   9:15 AM                Release.xcconfig

C:\dev\example\linux\flutter\


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
                8/1/2025   9:15 AM                generated_plugin_registrant.cc
                8/1/2025   9:15 AM                generated_plugins.cmake

C:\dev\example\macos\Flutter\


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
                8/1/2025   9:15 AM                Flutter-Debug.xcconfig
                8/1/2025   9:15 AM                Flutter-Release.xcconfig
                8/1/2025   9:15 AM                GeneratedPluginRegistrant.swift

C:\dev\example\


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
                8/1/2025   9:15 AM                pubspec.lock
                8/1/2025   9:15 AM                pubspec.yaml

C:\dev\example\windows\flutter\


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
                8/1/2025   9:15 AM                generated_plugin_registrant.cc
                8/1/2025   9:15 AM                generated_plugins.cmake

content_copy

Installing url_launcher added config files and code files for all target platforms in the Flutter app directory.

Debug Dart and native language code at the same time

This section explains how to debug the Dart code in your Flutter app and any native code with its regular debugger. This capability allows you to leverage Flutter's hot reload when editing native code.

Debug Dart and Android code using Android Studio

To debug native Android code, you need a Flutter app that contains Android code. In this section, you learn how to connect the Dart, Java, and Kotlin debuggers to your app. You don't need VS Code to debug both Dart and Android code. This guide includes the VS Code instructions to be consistent with the Xcode and Visual Studio guides.

These section uses the same example Flutter url_launcher app created in Update test Flutter app.

info提示

If you want to use the GNU Project Debugger to debug the Flutter engine running within an Android app process, check out flutter_gdb.

Build the Android version of the Flutter app in the Terminal

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

flutter build appbundle --debug

content_copy

Running Gradle task 'bundleDebug'...                               27.1s
✓ Built build/app/outputs/bundle/debug/app-debug.aab.

content_copy

Start debugging with VS Code first

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

To open the Flutter app directory, go to File > Open Folder... and choose the my_app directory.
Open the lib/main.dart file.
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.
Type flutter select.
Click the Flutter: Select Device command.
Choose your target device.
Click the debug icon (). 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 Android Studio

Click the Attach debugger to Android process button. ()

lightbulb小提示

If this button doesn't appear in the Projects menu bar, verify that you opened Flutter application project but not a Flutter plugin.
The process dialog displays one entry for each connected device. Select show all processes to display available processes for each device.
Choose the process to which you want to attach. For this guide, select the com.example.my_app process using the Emulator Pixel_5_API_33.
Locate the tab for Android Debugger in the Debug pane.
In the Project pane, expand my_app_android > android > app > src > main > java > io.flutter plugins.
Double click GeneratedProjectRegistrant to open the Java code in the Edit pane.

At the end of this procedure, both the Dart and Android debuggers interact with the same process. Use either, or both, to set breakpoints, examine stack, resume execution and the like. In other words, debug!

Debug Dart and iOS code using Xcode

To debug iOS code, you need a Flutter app that contains iOS code. In this section, you learn to connect two debuggers to your app: Flutter via VS Code and Xcode. You need to run both VS Code and Xcode.

These section uses the same example Flutter url_launcher app created in Update test Flutter app.

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

content_copy

Warning: Building for device with codesigning disabled. You will have to manually codesign before deploying to device.
Building com.example.myApp for device (ios)...

content_copy

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

To open the Flutter app directory, go to File > Open Folder... and choose the my_app directory.
Open the lib/main.dart file.
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.
Type flutter select.
Click the Flutter: Select Device command.
Choose your target device.
Click the debug icon (). 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

To attach to the Flutter app in Xcode:

Go to Debug > Attach to Process >
Select Runner. It should be at the top of the Attach to Process menu under the Likely Targets heading.

Debug Dart and macOS code using Xcode

To debug macOS code, you need a Flutter app that contains macOS code. In this section, you learn to connect two debuggers to your app: Flutter via VS Code and Xcode. You need to run both VS Code and Xcode.

These section uses the same example Flutter url_launcher app created in Update test Flutter app.

Build the macOS version of the Flutter app in the Terminal

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

flutter build macos --debug

content_copy

Building macOS application...

content_copy

Start debugging with VS Code first

Start the debugger in VS Code

To open the Flutter app directory, go to File > Open Folder... and choose the my_app directory.
Open the lib/main.dart file.
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.
Type flutter select.
Click the Flutter: Select Device command.
Choose your target device.
Click the debug icon (). 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

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.

Debug Dart and C++ code using Visual Studio

To debug C++ code, you need a Flutter app that contains C++ code. In this section, you learn to connect two debuggers to your app: Flutter via VS Code and Visual Studio. You need to run both VS Code and Visual Studio.

These section uses the same example Flutter url_launcher app created in Update test Flutter app.

Build the Windows version of the Flutter app in PowerShell or the Command Prompt

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

C:\> flutter build windows --debug

content_copy

Building Windows application...                                    31.4s
√  Built build\windows\runner\Debug\my_app.exe.

content_copy

Start debugging with VS Code first

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

Start the debugger in VS Code

To open the Flutter app directory, go to File > Open Folder... and choose the my_app directory.
Open the lib/main.dart file.
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.
Type flutter select.
Click the Flutter: Select Device command.
Choose your target device.
Click the debug icon (). 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 Visual Studio

To open the project solution file, go to File > Open > Project/Solution…

You can also press Ctrl + Shift + O.
Choose the build/windows/my_app.sln file in your Flutter app directory.
Go to Debug > Attach to Process.

You can also press Ctrl + Alt + P.
From the Attach to Process dialog box, choose my_app.exe.

Visual Studio starts monitoring the Flutter app.

Resources

Check out the following resources on debugging Flutter, iOS, Android, macOS and Windows:

Flutter

Android

You can find the following debugging resources on developer.android.com.

iOS and macOS

You can find the following debugging resources on developer.apple.com.

Windows

You can find debugging resources on Microsoft Learn.

posted on 2024-12-11 09:19 AtlasLapetos 阅读(29) 评论(0) 收藏举报

使用原生语言的调试

Use a native language debugger

Debug Dart code

Debug Dart code using VS Code

VS Code Flutter debugger

Changes to VS Code interface

VS Code Flutter debugging toolbar

Update test Flutter app

Debug Dart and native language code at the same time

Debug Dart and Android code using Android Studio

Build the Android version of the Flutter app in the Terminal

Start debugging with VS Code first

Attach to the Flutter process in Android Studio

Debug Dart and iOS code using Xcode

Build the iOS version of the Flutter app in the Terminal

Start debugging with VS Code first

Start the Dart debugger in VS Code

Attach to the Flutter process in Xcode

Debug Dart and macOS code using Xcode

Build the macOS version of the Flutter app in the Terminal

Start debugging with VS Code first

Start the debugger in VS Code

Attach to the Flutter process in Xcode

Debug Dart and C++ code using Visual Studio

Build the Windows version of the Flutter app in PowerShell or the Command Prompt

Start debugging with VS Code first

Start the debugger in VS Code

Attach to the Flutter process in Visual Studio

Resources

Flutter

Android

iOS and macOS

Windows