使用原生语言调试器
如何将原生调试器连接到你正在运行的 Flutter 应用。
如果你仅用 Dart 代码编写 Flutter 应用,可以使用 IDE 的调试器调试代码。 Flutter 团队推荐使用 VS Code。
如果你编写平台特定插件或使用平台特定库,可以使用原生调试器调试那部分代码。
-
要调试用 Swift 或 Objective-C 编写的 iOS 或 macOS 代码,可以使用 Xcode。
-
要调试用 Java 或 Kotlin 编写的 Android 代码,可以使用 Android Studio。
-
要调试用 C++ 编写的 Windows 代码,可以使用 Visual Studio。
本指南说明如何将 两个 调试器连接到你的 Dart 应用:一个用于 Dart,一个用于原生代码。
调试 Dart 代码
#本指南介绍如何使用 VS Code 调试 Flutter 应用。你也可以使用已安装并配置 Flutter 和 Dart 插件的首选 IDE。
使用 VS Code 调试 Dart 代码
#以下步骤说明如何将 Dart 调试器与默认示例 Flutter 应用配合使用。在调试你自己的 Flutter 项目时, VS Code 中展示的这些组件同样可用并会出现。
-
创建一个基本的 Flutter 应用。
flutter create my_appCreating 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.cd my_app -
使用 VS Code 打开 Flutter 应用中的
lib\main.dart文件。 -
点击 bug 图标(
)。这会在 VS Code 中打开以下窗格:- Debug
- Debug Console
- Widget Inspector
首次运行调试器耗时最长。
-
测试调试器。
在
main.dart中,点击这一行:dart_counter++;按 Shift + F9。这会在
_counter变量递增处添加断点。在应用中,点击 + 按钮以增加计数器。应用会暂停。
此时,VS Code 会显示:
在 Editor Groups 中:
main.dart中高亮的断点Widget Inspector 的 Widget Tree 中 Flutter 应用的 widget 层级
在 侧边栏 中:
Call Stack 部分中的应用状态
Variables 部分中
this局部变量的值
在 面板 中:
Debug console 中的 Flutter 应用日志
VS Code Flutter 调试器
#VS Code 的 Flutter 插件会向 VS Code 用户界面添加多个组件。
VS Code 界面的变化
#启动后,Flutter 调试器会向 VS Code 界面添加调试工具。
以下截图和表格说明每个工具的用途。
| Variables | ||
| Watch | ||
| Call Stack | ||
| Breakpoints | ||
<Flutter files> |
||
| Widget Inspector | ||
| Layout Explorer | ||
| Widget Details Tree | ||
| Problems | ||
| Output | ||
| Debug Console | ||
| Terminal |
要更改面板(橙色)在 VS Code 中的位置,请前往 View > Appearance > Panel Position。
VS Code Flutter 调试工具栏
#工具栏让你使用任何调试器进行调试。你可以单步进入、跳出和跳过 Dart 语句,热重载或恢复应用。
|
|
||
| 启动或恢复 | F5 | |
|
|
||
| 暂停 | F6 | |
|
|
||
| 单步跳过 | F10 | |
|
|
||
| 单步进入 | F11 | |
|
|
||
| 单步跳出 | Shift + F11 | |
|
|
||
| 热重载 | Ctrl + F5 | |
|
|
||
| 热重启 | Shift + Special + F5 | |
|
|
||
| 停止 | Shift + F5 | |
|
|
||
| 打开 Widget Inspector |
更新测试用 Flutter 应用
#在本指南的其余部分,你需要更新测试用 Flutter 应用。此更新会添加用于调试的原生代码。
-
使用你首选的 IDE 打开
lib/main.dart文件。 -
将
main.dart的内容替换为以下代码。展开以查看此示例的 Flutter 代码 lib/main.dartdart// Copyright 2023 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'URL Launcher', theme: ThemeData( colorSchemeSeed: Colors.purple, brightness: Brightness.light, ), home: const MyHomePage(title: 'URL Launcher'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { Future<void>? _launched; Future<void> _launchInBrowser(Uri url) async { if (!await launchUrl( url, mode: LaunchMode.externalApplication, )) { throw Exception('Could not launch $url'); } } Future<void> _launchInWebView(Uri url) async { if (!await launchUrl( url, mode: LaunchMode.inAppWebView, )) { throw Exception('Could not launch $url'); } } Widget _launchStatus(BuildContext context, AsyncSnapshot<void> snapshot) { if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); } else { return const Text(''); } } @override Widget build(BuildContext context) { final Uri toLaunch = Uri( scheme: 'https', host: 'docs.flutter.dev', path: 'testing/native-debugging'); return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.all(16), child: Text(toLaunch.toString()), ), FilledButton( onPressed: () => setState(() { _launched = _launchInBrowser(toLaunch); }), child: const Text('Launch in browser'), ), const Padding(padding: EdgeInsets.all(16)), FilledButton( onPressed: () => setState(() { _launched = _launchInWebView(toLaunch); }), child: const Text('Launch in app'), ), const Padding(padding: EdgeInsets.all(16.0)), FutureBuilder<void>(future: _launched, builder: _launchStatus), ], ), ), ); } } -
要将
url_launcherpackage 添加为依赖,请运行flutter pub add:flutter pub add url_launcherResolving 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! -
要检查代码库有哪些变更:
在 Linux 或 macOS 上,运行此
find命令。find ./ -mmin -120./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在 Windows 上,在命令提示符中运行此命令。
Get-ChildItem C:\dev\example\ -Rescurse | Where-Object {$_.LastWriteTime -gt (Get-Date).AddDays(-1)}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
安装 url_launcher 会在 Flutter 应用目录中为所有目标平台添加配置文件和代码文件。
同时调试 Dart 与原生语言代码
#本节说明如何调试 Flutter 应用中的 Dart 代码,并使用其常规调试器调试任何原生代码。此能力让你在编辑原生代码时仍可利用 Flutter 的热重载。
使用 Android Studio 调试 Dart 与 Android 代码
#要调试原生 Android 代码,你需要包含 Android 代码的 Flutter 应用。在本节中,你将学习如何将 Dart、Java 和 Kotlin 调试器连接到你的应用。调试 Dart 与 Android 代码不一定需要 VS Code。本指南包含 VS Code 说明,以与 Xcode 和 Visual Studio 指南保持一致。
本节使用在 更新测试用 Flutter 应用 中创建的相同示例 Flutter url_launcher 应用。
在终端中构建 Flutter app 的 Android 版本
#要生成所需的 Android 平台依赖,请运行 flutter build 命令。
flutter build appbundle --debug
Running Gradle task 'bundleDebug'... 27.1s
✓ Built build/app/outputs/bundle/debug/app-debug.aab.
先从 VS Code 开始调试
#若你主要用 VS Code 调试代码,请从本节开始。
-
要打开 Flutter app 目录,请前往 File > Open Folder...,选择
my_app目录。 打开
lib/main.dart文件。-
若可为多种设备构建 app,须先选择设备。
前往 View > Command Palette...
也可按 Ctrl / Cmd + Shift + P。
输入
flutter select。-
点击 Flutter: Select Device 命令。
选择目标设备。
-
点击调试图标 (
)。这会打开 Debug 窗格并启动 app。等待 app 在设备上启动,且调试窗格显示 Connected。首次启动调试器耗时更长,之后启动会更快。此 Flutter app 包含两个按钮:
Launch in browser:此按钮会在设备的默认浏览器中打开本页。
Launch in app:此按钮会在 app 内打开本页。仅适用于 iOS 或 Android。桌面 app 会启动浏览器。
在 Android Studio 中附加到 Flutter 进程
#-
点击 Attach debugger to Android process(将调试器附加到 Android 进程)按钮。 (
)若 Projects 菜单栏中没有此按钮,请确认你打开的是 Flutter application 项目,而 不是 Flutter plugin。 :::
-
process 对话框会为每个已连接设备显示一项。选择 show all processes(显示所有进程)可显示各设备上的可用进程。
-
选择要附加的进程。本指南请选择 Emulator Pixel_5_API_33 上的
com.example.my_app进程。 -
在 Debug 窗格中找到 Android Debugger 标签页。
-
在 Project 窗格中展开 my_app_android > android > app > src > main > java > io.flutter plugins。
-
双击 GeneratedProjectRegistrant,在 Edit 窗格中打开 Java 代码。
完成此流程后,Dart 与 Android 调试器都会与同一进程交互。你可以使用其中任一或两者来设置断点、查看堆栈、恢复执行等。换句话说,开始调试吧!
先从 Android Studio 开始调试
#若你主要用 Android Studio 调试代码,请从本节开始。
-
要打开 Flutter app 目录,请前往 File > Open...,选择
my_app目录。 打开
lib/main.dart文件。-
选择虚拟 Android 设备。在工具栏打开最左侧下拉菜单,点击 Open Android Emulator: <device>。
你可以选择任何已安装且名称中不包含
arm64的模拟器。 在同一菜单中选择该虚拟 Android 设备。
-
在工具栏点击 Run 'main.dart'。
也可按 Ctrl + Shift + R。
app 在模拟器中显示后,继续下一步。
-
点击 Attach debugger to Android process(将调试器附加到 Android 进程)按钮。 (
)若 Projects 菜单栏中没有此按钮,请确认你打开的是 Flutter application 项目,而 不是 Flutter plugin。 :::
-
process 对话框会为每个已连接设备显示一项。选择 show all processes(显示所有进程)可显示各设备上的可用进程。
-
选择要附加的进程。本指南请选择 Emulator Pixel_5_API_33 上的
com.example.my_app进程。 -
在 Debug 窗格中找到 Android Debugger 标签页。
-
在 Project 窗格中展开 my_app_android > android > app > src > main > java > io.flutter plugins。
-
双击 GeneratedProjectRegistrant,在 Edit 窗格中打开 Java 代码。
完成此流程后,Dart 与 Android 调试器都会与同一进程交互。你可以使用其中任一或两者来设置断点、查看堆栈、恢复执行等。换句话说,开始调试吧!
使用 Xcode 调试 Dart 与 iOS 代码
#要调试 iOS 代码,你需要包含 iOS 代码的 Flutter 应用。在本节中,你将学习将两个调试器连接到你的应用:通过 VS Code 的 Flutter 与 Xcode。你需要同时运行 VS Code 和 Xcode。
本节使用在 更新测试用 Flutter 应用 中创建的相同示例 Flutter url_launcher 应用。
在终端中构建 Flutter app 的 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 调试器
#-
要打开 Flutter app 目录,请前往 File > Open Folder...,选择
my_app目录。 打开
lib/main.dart文件。-
若可为多种设备构建 app,须先选择设备。
前往 View > Command Palette...
也可按 Ctrl / Cmd + Shift + P。
输入
flutter select。-
点击 Flutter: Select Device 命令。
选择目标设备。
-
点击调试图标 (
)。这会打开 Debug 窗格并启动 app。等待 app 在设备上启动,且调试窗格显示 Connected。首次启动调试器耗时更长,之后启动会更快。此 Flutter app 包含两个按钮:
Launch in browser:此按钮会在设备的默认浏览器中打开本页。
Launch in app:此按钮会在 app 内打开本页。仅适用于 iOS 或 Android。桌面 app 会启动浏览器。
在 Xcode 中附加到 Flutter 进程
#要在 Xcode 中附加到 Flutter app:
-
前往 Debug > Attach to Process。
-
选择 Runner。它应位于 Attach to Process 菜单 Likely Targets 标题下的顶部。
先从 Xcode 开始调试
#若你主要用 Xcode 调试代码,请从本节开始。
启动 Xcode 调试器
#-
从 Flutter app 目录打开
ios/Runner.xcworkspace。 -
使用工具栏中的 Scheme 菜单选择正确的设备。
若无偏好,请选择 iPhone Pro 14。
-
在 Xcode 中将此 Runner 作为普通 app 运行。
运行完成后,Xcode 底部的 Debug 区域会显示包含 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=/ 复制 Dart VM 服务 URI。
在 VS Code 中附加到 Dart VM
#-
要打开命令面板,请前往 View > Command Palette...
也可按 Cmd + Shift + P。
输入
debug。-
点击 Debug: Attach to Flutter on Device 命令。
-
在 Paste an VM Service URI 框中粘贴从 Xcode 复制的 URI,然后按 Enter。
使用 Xcode 调试 Dart 与 macOS 代码
#要调试 macOS 代码,你需要包含 macOS 代码的 Flutter 应用。在本节中,你将学习将两个调试器连接到你的应用:通过 VS Code 的 Flutter 与 Xcode。你需要同时运行 VS Code 和 Xcode。
本节使用在 更新测试用 Flutter 应用 中创建的相同示例 Flutter url_launcher 应用。
在终端中构建 Flutter app 的 macOS 版本
#要生成所需的 macOS 平台依赖,请运行 flutter build 命令。
flutter build macos --debug
Building macOS application...
先从 VS Code 开始调试
#在 VS Code 中启动调试器
#-
要打开 Flutter app 目录,请前往 File > Open Folder...,选择
my_app目录。 打开
lib/main.dart文件。-
若可为多种设备构建 app,须先选择设备。
前往 View > Command Palette...
也可按 Ctrl / Cmd + Shift + P。
输入
flutter select。-
点击 Flutter: Select Device 命令。
选择目标设备。
-
点击调试图标 (
)。这会打开 Debug 窗格并启动 app。等待 app 在设备上启动,且调试窗格显示 Connected。首次启动调试器耗时更长,之后启动会更快。此 Flutter app 包含两个按钮:
Launch in browser:此按钮会在设备的默认浏览器中打开本页。
Launch in app:此按钮会在 app 内打开本页。仅适用于 iOS 或 Android。桌面 app 会启动浏览器。
在 Xcode 中附加到 Flutter 进程
#-
要附加到 Flutter app,请前往 Debug > Attach to Process > Runner。
Runner 应位于 Attach to Process 菜单 Likely Targets 标题下的顶部。
先从 Xcode 开始调试
#在 Xcode 中启动调试器
#-
从 Flutter app 目录打开
macos/Runner.xcworkspace。 -
在 Xcode 中将此 Runner 作为普通 app 运行。
运行完成后,Xcode 底部的 Debug 区域会显示包含 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=/ 复制 Dart VM 服务 URI。
在 VS Code 中附加到 Dart VM
#-
要打开命令面板,请前往 View > Command Palette...
也可按 Cmd + Shift + P。
输入
debug。-
点击 Debug: Attach to Flutter on Device 命令。
-
在 Paste an VM Service URI 框中粘贴从 Xcode 复制的 URI,然后按 Enter。
使用 Visual Studio 调试 Dart 与 C++ 代码
#要调试 C++ 代码,你需要包含 C++ 代码的 Flutter 应用。在本节中,你将学习将两个调试器连接到你的应用:通过 VS Code 的 Flutter 与 Visual Studio。你需要同时运行 VS Code 和 Visual Studio。
本节使用在 更新测试用 Flutter 应用 中创建的相同示例 Flutter url_launcher 应用。
在 PowerShell 或命令提示符中构建 Flutter app 的 Windows 版本
#要生成所需的 Windows 平台依赖,请运行 flutter build 命令。
C:\> flutter build windows --debug
Building Windows application... 31.4s
√ Built build\windows\runner\Debug\my_app.exe.
先从 VS Code 开始调试
#若你主要用 VS Code 调试代码,请从本节开始。
在 VS Code 中启动调试器
#-
要打开 Flutter app 目录,请前往 File > Open Folder...,选择
my_app目录。 打开
lib/main.dart文件。-
若可为多种设备构建 app,须先选择设备。
前往 View > Command Palette...
也可按 Ctrl / Cmd + Shift + P。
输入
flutter select。-
点击 Flutter: Select Device 命令。
选择目标设备。
-
点击调试图标 (
)。这会打开 Debug 窗格并启动 app。等待 app 在设备上启动,且调试窗格显示 Connected。首次启动调试器耗时更长,之后启动会更快。此 Flutter app 包含两个按钮:
Launch in browser:此按钮会在设备的默认浏览器中打开本页。
Launch in app:此按钮会在 app 内打开本页。仅适用于 iOS 或 Android。桌面 app 会启动浏览器。
在 Visual Studio 中附加到 Flutter 进程
#-
要打开项目解决方案文件,请前往 File > Open > Project/Solution…
也可按 Ctrl + Shift + O。
-
在 Flutter app 目录中选择
build/windows/my_app.sln文件。 -
前往 Debug > Attach to Process。
也可按 Ctrl + Alt + P。
-
在 Attach to Process 对话框中选择
my_app.exe。Visual Studio 开始监视 Flutter app。
先从 Visual Studio 开始调试
#若你主要用 Visual Studio 调试代码,请从本节开始。
启动本地 Windows 调试器
#-
要打开项目解决方案文件,请前往 File > Open > Project/Solution…
也可按 Ctrl + Shift + O。
-
在 Flutter app 目录中选择
build/windows/my_app.sln文件。 -
将
my_app设为启动项目。在 Solution Explorer 中右键点击my_app,选择 Set as Startup Project。 -
点击 Local Windows Debugger 开始调试。
也可按 F5。
Flutter app 启动后,控制台窗口会显示包含 Dart VM 服务 URI 的消息,类似以下输出:
flutter: The Dart VM service is listening on http://127.0.0.1:62080/KPHEj2qPD1E=/ 复制 Dart VM 服务 URI。
在 VS Code 中附加到 Dart VM
#-
要打开命令面板,请前往 View > Command Palette...
也可按 Cmd + Shift + P。
输入
debug。-
点击 Debug: Attach to Flutter on Device 命令。
-
在 Paste an VM Service URI 框中粘贴从 Visual Studio 复制的 URI,然后按 Enter。
资源
#请查阅以下关于调试 Flutter、iOS、Android、 macOS 和 Windows 的资源:
Flutter
#Android
#你可以在 developer.android.com 上找到以下调试资源。
iOS 与 macOS
#你可以在 developer.apple.com 上找到以下调试资源。
Windows
#你可以在 Microsoft Learn 上找到调试资源。
除非另有说明,本文档之所提及适用于 Flutter 3.44.0 版本。本页面最后更新时间:2026-06-16。查看文档源码 或者 为本页面内容提出建议。