使用原生语言调试器

如果您只使用 Dart 代码编写 Flutter 应用，则可以使用 IDE 的调试器调试代码。Flutter 团队推荐使用 VS Code。

如果您编写平台特定的插件或使用平台特定的库，则可以使用原生调试器调试代码的这部分内容。

• 要调试用 Swift 或 Objective-C 编写的 iOS 或 macOS 代码，可以使用 Xcode。
• 要调试用 Java 或 Kotlin 编写的 Android 代码，可以使用 Android Studio。
• 要调试用 C++ 编写的 Windows 代码，可以使用 Visual Studio。

本指南将向您展示如何将 两个 调试器连接到您的 Dart 应用，一个用于 Dart，另一个用于原生代码。

本指南介绍如何使用 VS Code 调试 Flutter 应用。您也可以使用安装并配置了 Flutter 和 Dart 插件的首选 IDE。

以下步骤说明如何将 Dart 调试器与默认的示例 Flutter 应用一起使用。VS Code 中的特色组件在调试您自己的 Flutter 项目时也能正常工作并显示。

1. 创建一个基本的 Flutter 应用。

   flutter create my_app

   正在创建项目 my_app...
   正在解析 my_app 中的依赖项...
   已获取 my_app 中的依赖项。
   已写入 129 个文件。
   
   全部完成！
   您可以在以下网址找到 Flutter 的常规文档：https://docs.flutter.dev/
   详细的 API 文档可在以下网址找到：https://api.flutter.dev/
   如果您更喜欢视频文档，请考虑：https://www.youtube.com/c/flutterdev
   
   要运行您的应用程序，请输入：
   
     $ cd my_app
     $ flutter run
   
   您的应用程序代码位于 my_app/lib/main.dart 中。

   cd my_app

2. 使用 VS Code 打开 Flutter 应用中的 lib\main.dart 文件。

3. 点击错误图标 ()。 这将在 VS Code 中打开以下窗格：

   • 调试
   • 调试控制台
   • 小部件检查器

   第一次运行调试器所需时间最长。

4. 测试调试器。

   a. 在 main.dart 中，点击以下行：

   dart

   _counter++;

   b. 按下 Shift + F9。 这会在 _counter 变量递增的地方添加一个断点。

   c. 在应用中，点击 + 按钮递增计数器。应用会暂停。

   d. 此时，VS Code 显示：

   • 在 编辑器组 中：
     • main.dart 中突出显示的断点
     • 小部件检查器 的 小部件树 中 Flutter 应用的小部件层次结构
   • 在 侧边栏 中：
     • 调用堆栈 部分中应用的状态
     • 变量 部分中 this 局部变量的值
   • 在 面板 中：
     • 调试控制台 中 Flutter 应用的日志

VS Code 的 Flutter 插件向 VS Code 用户界面添加了许多组件。

启动后，Flutter 调试器会将调试工具添加到 VS Code 界面。

以下屏幕截图和表格解释了每个工具的目的。

要更改面板（以 橙色 显示）在 VS Code 中显示的位置，请转到 查看 > 外观 > 面板位置。

工具栏允许您使用任何调试器进行调试。您可以单步进入、单步跳出和单步执行 Dart 语句、热重载或恢复应用。

图标	操作	默认键盘快捷键

| 开始或恢复 | F5 | | | 暂停 | F6 | | | 单步执行 | F10 | | | 单步进入 | F11 | | | 单步跳出 | Shift + F11 | | | 热重载 | Ctrl + F5 | | | 热重启 | Shift + Special + F5 | | | 停止 | Shift + F5 | | | 打开小部件检查器 | |

在本指南的其余部分，您需要更新测试 Flutter 应用。此更新添加了要调试的原生代码。

1. 使用您首选的 IDE 打开 lib/main.dart 文件。

2. 将 main.dart 的内容替换为以下代码。

   展开以查看此示例的 Flutter 代码

   lib/main.dart

   dart

   // 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),
             ],
           ),
         ),
       );
     }
   }

3. 要添加 url_launcher 包作为依赖项，请运行 flutter pub add：

   flutter pub add url_launcher

   正在解析依赖项...
     collection 1.17.1 (1.17.2 可用)
   + flutter_web_plugins 0.0.0 来自 sdk flutter
     matcher 0.12.15 (0.12.16 可用)
     material_color_utilities 0.2.0 (0.8.0 可用)
   + plugin_platform_interface 2.1.4
     source_span 1.9.1 (1.10.0 可用)
     stream_channel 2.1.1 (2.1.2 可用)
     test_api 0.5.1 (0.6.1 可用)
   + 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
   已更改 10 个依赖项！

4. 检查代码库中发生了哪些变化：

   1. 在 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

   2. 在 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 应用目录中所有目标平台的配置文件和代码文件。

本节说明如何调试 Flutter 应用中的 Dart 代码以及任何原生代码及其常规调试器。此功能允许您在编辑原生代码时利用 Flutter 的热重载。

要调试原生 Android 代码，您需要一个包含 Android 代码的 Flutter 应用。在本节中，您将学习如何将 Dart、Java 和 Kotlin 调试器连接到您的应用。您不需要 VS Code 来调试 Dart 和 Android 代码。本指南包含 VS Code 指令，以与 Xcode 和 Visual Studio 指南保持一致。

本节使用在更新测试 Flutter 应用中创建的相同示例 Flutter url_launcher 应用。

要生成所需的 Android 平台依赖项，请运行 flutter build 命令。

flutter build appbundle --debug

正在运行 Gradle 任务 'bundleDebug'...                               27.1s
✓ 已构建 build/app/outputs/bundle/debug/app-debug.aab。

要调试 iOS 代码，您需要一个包含 iOS 代码的 Flutter 应用。在本节中，您将学习如何将两个调试器连接到您的应用：通过 VS Code 和 Xcode 连接 Flutter。您需要同时运行 VS Code 和 Xcode。

本节使用在更新测试 Flutter 应用中创建的相同示例 Flutter url_launcher 应用。

要生成所需的 iOS 平台依赖项，请运行 flutter build 命令。

flutter build ios --config-only --no-codesign --debug

警告：禁用代码签名的情况下构建设备版本。您必须在部署到设备之前手动进行代码签名。
正在为设备构建 com.example.myApp (ios)...

要调试 macOS 代码，您需要一个包含 macOS 代码的 Flutter 应用。在本节中，您将学习如何将两个调试器连接到您的应用：通过 VS Code 和 Xcode 连接 Flutter。您需要同时运行 VS Code 和 Xcode。

本节使用在更新测试 Flutter 应用中创建的相同示例 Flutter url_launcher 应用。

要生成所需的 macOS 平台依赖项，请运行 flutter build 命令。

flutter build macos --debug

正在构建 macOS 应用程序...

要调试 C++ 代码，您需要一个包含 C++ 代码的 Flutter 应用。在本节中，您将学习如何将两个调试器连接到您的应用：通过 VS Code 和 Visual Studio 连接 Flutter。您需要同时运行 VS Code 和 Visual Studio。

本节使用在更新测试 Flutter 应用中创建的相同示例 Flutter url_launcher 应用。

要生成所需的 Windows 平台依赖项，请运行 flutter build 命令。

C:\> flutter build windows --debug

正在构建 Windows 应用程序...                                    31.4s
√  已构建 build\windows\runner\Debug\my_app.exe。

查看以下关于调试 Flutter、iOS、Android、macOS 和 Windows 的资源：

• 调试 Flutter 应用
• Flutter 检查器 和 DevTools 文档
• 性能分析

您可以在 developer.android.com 上找到以下调试资源。

• 调试您的应用
• Android 调试桥 (adb)

您可以在 developer.apple.com 上找到以下调试资源。

• 调试
• Instruments 帮助

您可以在 Microsoft Learn 上找到调试资源。

• Visual Studio 调试器
• 学习使用 Visual Studio 调试 C++ 代码

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。